Frontend

Сказ о том, как я расчехлил свой пет проектик 2014 года, чтобы обновить дизайн, а в итоге все вылилось в обновление на современные рельсы. Начнем со сборки, пройдемся по стилям, и закончим переездом в облака.

В МТС Диджитал мы успешно используем веб компоненты для создания интерфейсов. Моя команда создает ui-блоки для управления разной бизнес-логикой, которые представлены в виде виджетов и написаны на разных фреймворках (в основном на Angular и Vue). В рамках своего выступления я поделюсь опытом, который будет полезен фронтенд-разработчикам крупных компаний, где не определен четкий стек технологий для работы с веб интерфейсами.

TypeScript с нами уже больше 10 лет, и за это время было множество статей и докладов о том, какой он чудесный. Но почти не было материалов о его слабых сторонах, и вряд ли это из-за того, что таковых нет. Пришло время изучить этот вопрос. И не просто изучить, а сделать это в контексте разработки инструментов.

Сначала обсудим основные особенности TypeScript. Насколько он повышает надежность кода на самом деле, как влияет на скорость разработки и в чем его реальная польза. Затем перейдем к системному коду: посмотрим кейсы где TS может нам помешать. Поговорим о проблемных моментах, про которые редко кто-то задумывается. Дальше разберем решения: как получить основные преимущества TS без написания логики на нем. Под конец посмотрим: есть ли сейчас какие-то живые альтернативы TypeScript.

Цель не в том, чтобы убедить вас выкинуть TS из своего проекта. Она скорее в том, чтобы показать иной взгляд: как можно делать сложные вещи по-другому, и возможно, более эффективно

Доклад будет особенно полезен разработчикам библиотек и чего-то сложного на JS. А также тем, кто считает, что без TypeScript сегодня работать невозможно

Многие знают что такое BEM, на много меньше людей знают что такое Atomic CSS. И совсем единицы понимают, какая разница между ними и что когда лучше использовать.

Мы сжимаем стили, делим JavaScript на чанки, выбираем легковесные библиотеки и подключаем CDN. Но что, если все эти оптимизации могут легко нивелироваться неоптимальной работой с графикой?

В этом докладе мы разберём главные ошибки, которые разработчики допускают с изображениями. Вы узнаете:

- Как выбор неправильного формата файлов может замедлить ваш сайт.

- Как правильно работать с ретина-дисплеями, чтобы изображения не были размытыми или слишком тяжёлыми, а так же не забывать про пользователей с обычными дисплеями.

- Какие инструменты помогут оптимизировать изображения без потери качества.

Этот доклад — инструкция по тому, как перестать игнорировать графику и сделать ваш сайт или приложение не только быстрым, но и визуально безупречным

e2e-тестирование — важная часть разработки, но оно до сих пор часто ассоциируется с болью. Долгие прогоны, зависимость от бэкенда, сложности с поддержкой тестов. В своём докладе я расскажу, как Cypress может сделать процесс написания и выполнения e2e-тестов максимально комфортным и эффективным и безболезненным.

Посмотрим, как писать тесты на Cypress в купе с дополнительными инструментами, чтобы сократить время прогонов и зависимость от доступности бэкенда до минимума, а также посмотрим, как Cypress помогает облегчить разработку не только со стороны тестирования.

Технический долг, как суслик: вы его не видите, а он есть. Если вы его заметили, это означает, что долг уже накопился до значительного уровня.

Накопление технического долга — актуальная проблема для всех команд, особенно остро она проявляется в интенсивно развивающихся проектах, в которых происходит быстрый рост команды.

В своем докладе я хочу рассказать о том, что помогает сохранять кодовую базу актуальной: от очевидной автоматизации до философских размышлений о построении API.

1) как метрики помогают выявлять и решать проблемы производительности

2) ключевые метрики Web Vitals — LCP, FID, CLS, TBT

3) инструменты для измерения этих метрик: Lighthouse, React Profiler, библиотека web-vitals

4) методы оптимизации под каждую метрику

5) интеграция метрик в процесс разработки

6) заключение и рекомендации

В процессе рассказа покажу неоптимизированное react приложение, к концу доклада оптимизируем его и я покажу результаты после оптимизации