Делимся полезными материалами с прошедшего митапа Frontend Mix, где эксперты ЮMoney и Альфа-Банка рассказали, как они создают продукт.
Фронтендер, который посмотрит доклады:
погрузится в свежий React 18 и посмотрит на демо новых функций, фич и изменений,
послушает про опыт стандартизации фронтовых приложений и узнает, какие сложности могут возникнуть при внедрении и как их преодолеть,
посмотрит на «велосипед» формы без кода на фронте с использованием единого механизма для Android, iOS и веб-приложений и решит, подходит ли такой подход для решения собственных проблем,
научится генерировать готовые React-компоненты иконок и осчастливит этим дизайнеров,
познает фишки грамотного технического интервью: сократит время собеседования и даст дополнительный профит своим кандидатам.
Скорее к докладам!
Погружение в React 18 — Владимир Голотин, старший программист отдела разработки интерфейсов ЮMoney
В докладе эксперт разбирает, что изменилось с релизом React 18, как на него обновиться и какие могут быть проблемы.
00:31 — Почему так долго не выходил React 18 03:35 — Вспоминаем архитектуру React Fiber 04:17 — Реализация Concurrent Mode 04:50 — Новый Root API и Automatic Batching 05:37 — Демо батчинга 10:05 — Новая функция flushSync 10:28 — Классы: как было и стало 11:29 — Проблемы с Concurrent Mode 11:59 — Обновление Strict Mode и его особенности 13:37 — Демо Strict Mode 18:52 — Strict Mode: выводы 19:57 — Новая concurrent-фича Transitions 23:18 — Про проблему Tearing: как было и стало, новый хук в React 18 26:26 — Изменения Suspense SSR 29:56 — Selective Hydration 31:40 — Suspense SSR: изменения в API 33:50 — Suspense SSR: выводы 35:20 — Как будут работать тесты 37:13 — Общие выводы
Стандартизация фронтовых приложений в продуктовой компании — Артём Лопатин, старший программист отдела разработки интерфейсов ЮMoney
Какие преимущества даёт унификация написания кода приложений? Какие проблемы мы решали с её помощью? Что можно стандартизировать? Опытом внедрения стандартизации в отделе фронтенда поделится Артём.
00:48 — Отдел разработки интерфейсов ЮMoney 02:23 — Какие у нас появились сложности 02:56 — Единые стандарты в отделе 03:54 — Наш путь к унификации 05:07 — Единый стек технологий 09:19 — Единая платформа приложений 10:03 — Стандартизация существующего кода: документация 13:38 — Что в итоге и дальнейшее развитие 14:52 — Рекомендации
JSON Driven Forms Bicycle — Степан Михайлюк, технический лидер Альфа-Банка
Вам не кажется, что фронты делают много форм? Вам не кажется. Степан расскажет о том, как в «Альфе» делают формы без кода на фронте, используя единый механизм для Android, iOS и веб-приложений.
01:29 — Почему актуальна тема JSON Driven Forms 04:00 — Что обычно нужно для создания формы: шаги и где скрывается проблема 08:17 — Решение проблемы дублирования кода: WebView 09:52 — Подход JSON/Data Driven Forms 15:00 — Примеры хотелок продактов и дизайнеров 16:54 — Требования к «велосипеду» 19:31 — Ивенты 21:09 — Хэндлеры 21:45 — Экстракторы 23:00 — Валидаторы 26:15 — Кому подойдёт такой подход 26:53 — Сложности 30:12 — Что ещё бывает 32:09 — Общий вывод
Как правильно отнять работу у разработчика — Андрей Ефременков, программист отдела разработки интерфейсов ЮMoney
Эксперт рассмотрел процесс генерации готовых React-компонентов иконок из проектов в Figma.
00:09 — Наши проекты в Figma и React-компоненты 00:55 — Главный дисклеймер доклада 01:18 — Работа с иконками сейчас, а как хочется 02:39 — Структура Figma-проектов и библиотек 04:07 — Файл компонента, файл иконки, файл с типами и файл со стилями 06:11 — Использование иконки 06:35 — Нюансы 08:50 — Процесс генерации иконок: получение структуры документа проекта 10:07 — Выбор фрейма с телами иконок и фрейма с вариантами стилей 11:59 — Выбор нод, которые соответствуют ожидаемой структуре 14:54 — Извлечение составляющих иконок 26:32 — Генерация всех вариантов для каждой иконки на основании стилей 27:10 — Запись библиотеки в файлы 28:39 — Демо 29:54 — Что в итоге?