Вы продаете формы?

Нет, только показываем.

Красивое...

Всем привет! Делимся полезными материалами с недавно прошедшего митапа Frontend Mix, где экперты ЮMoney и Альфа Банка рассказали, как они создают продукт. 

Фронтендер, который посмотрит доклады под катом: 

• погрузится в свежий React 18 и посмотрит на демо новых функций, фич и изменений.

• послушает про опыт стандартизации фронтовых приложений и узнает, какие сложности могут возникнуть при внедрении и рекомендации для их преодоления. 

• посмотрит на «велосипед» формы без кода на фронте с использованием единого механизма для Android, iOS и web-приложений и решит, подходит ли такой подход для решения собственных проблем. 

• научится генерировать готовые React-компоненты иконок и осчастливит этим дизайнеров.  

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

Скорее к докладам!

Погружение в React 18

Владимир Голотин, старший программист отдела разработки интерфейсов ЮMoney

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

Таймкоды:

0:31 Почему так долго не выходил React 18

3:35 Вспоминаем архитектуру React Fiber 

4:17 Реализация Concurrent Mode

4:50 Новый Root API и Automatic Batching

5: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

Какие преимущества дает унификация написания кода приложений? Какие проблемы мы решали с её помощью? Что можно стандартизировать? Опытом внедрения стандартизации в отделе фронтенда поделится Артем.

Таймкоды:

0:48 Отдел разработки интерфейсов ЮMoney

2:23 Какие у нас появились сложности 

2:56 Единые стандарты в отделе

3:54 Наш путь к унификации

5:07 Единый стек технологий

9:19 Единая платформа приложений

10:03 Стандартизация существующего кода: документация

13:38 Что в итоге и дальнейшее развитие 

14:52 Рекомендации 

JSON Driven forms bicycle

Степан Михайлюк, технический лидер Альфа Банка

Вам не кажется что фронты делают много форм? Вам не кажется. Степан расскажет том, как в «Альфе» делают формы без кода на фронте, используя единый механизм для Android, iOS и web-приложений.

Таймкоды:

1:29 Почему актуальна тема JSON Driven forms

4:00 Что обычно нужно для создания формы: шаги и где скрывается проблема

8:17 Решение проблемы дублирования кода - Web View 

9: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.

Таймкоды:

0:09 Наши проекты в Figma и React-компоненты

0:55 Главный дисклеймер доклада

1:18 Работа с иконками сейчас, а как хочется

2:39 Структура Figma-проектов и библиотек

4:07 Файл компонента, файл иконки, файл с типами и файл со стилями

6:11 Использование иконки

6:35 Нюансы 

8:50 Процесс генерации иконок. Получение структуры документа проекта

10:07 Выбор frame с телами иконок и frame с вариантами стилей

11:59 Выбор нод, которые соответствуют ожидаемой структуре

14:54 Извлечение составляющих иконок

26:32 Генерация всех вариантов для каждой иконки на основании стилей

27:10 Запись библиотеки в файлы

28:39 Демо

29:54 Что в итоге? 

Собеседование 2.0

Илья Ломтев, старший программист отдела разработки интерфейсов ЮMoney

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

Таймкоды:

0:58 Как выглядело собеседование раньше

1:15 Знакомство

1:37 Техническая часть

2:05 Обработка результатов и перерыв

2:30 Знакомство с руководителем отдела

2:50 Что захотелось изменить в процессе?

5:10 Шаги внедрения

6:04 Изменение процесса собеседования 

6:50 Изменение технического скрининга

10:38 А что с теорией? 

11:40 Результаты: что получили мы?

12:35 Какой профит для кандидата

13:00 О сокращении времени

13:12 Что хотим улучшать дальше

13:40 Рекомендации 

У нас в блоге есть отдельная статья Ильи про собеседования.

За анонсами митапов следите в Telegram-канале ЮMoney Tech — и приходите к нам в прямой эфир, чтобы задать волнующие вопросы.