Пять докладов для фронтендера
Делимся полезными материалами с прошедшего митапа 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 — Что в итоге?