7 вещей, которые я узнал на ReactJS Girls 2019

3 мая 2019 года я посетила ReactJS Girls 2018 «Конференция для всех разработчиков React, где женщины выходят на сцену».

С самого начала сцена была наполнена энергией… буквально 5 спикеров танцевали и раскручивали толпу - это было круто! Затем в ходе разнообразных бесед были получены знания по целому ряду тем, от улучшения командной культуры (Кейт Бирд) до обучения GraphQL (Кэролайн Стран).

Стоит отметить, что у некоторых читателей мой уровень знаний может отличаться. Если вы были на конференции и думаете, что мой список можно улучшить, дайте мне знать в Twitter @ harry_ronchetti или LinkedIn @ harry-ronchetti.

Резюме

  1. Дизайн-система - это продукт, который служит другим продуктам.
  2. Многоразовый - не значит гибкий (Компоненты)
  3. Сборник рассказов - это любовь
  4. Перси делает тебя популярным
  5. Прекратите лениться, доступность - это просто
  6. Стой, иди, поощряй критику и исправляй ошибки
  7. Вы подключитесь к React 16.8

1. Дизайн-система - это продукт… который обслуживает другие продукты

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

О дизайн-системах нужно заботиться как о продукте, чтобы их можно было легко понять и правильно внедрить. Это не просто «проект».

Однако не у всех есть возможность создать продукт с нуля, поэтому Эмма рекомендует проводить аудит пользовательского интерфейса. Это включает в себя создание снимков экрана всего, что может быть компонентом, их группировку по сходству и преобразование каждой группы в компонент.

Еще один совет, которым поделилась Эмма, - это передача значков SVG в качестве реквизита в React. Я часто использую иконочные шрифты, но недавно я узнал о том, какое негативное влияние они оказывают на доступность, поэтому обязательно буду использовать такие SVG в будущем. Вот хороший урок, который я нашел по созданию динамических SVG в React.

Полный текст выступления Эммы: https://www.youtube.com/watch?v=ropAuzI7MtA

2. Многоразовое использование не означает гибкость (компоненты)

Jen Creighton разрушила мое прежнее представление о том, как компоненты должны работать в React. Все это время я передавал несколько свойств / добавлял сложную логику, чтобы сделать компоненты максимально многоразовыми, но это не было гибким.

Джен предложила использовать одну опору под названием «тип». Эту единственную опору следует использовать в чем-то вроде корпуса выключателя; где каждый «тип» передает вариант использования компонентов в сценарии.

Это увеличивает вероятность того, что вы и другие разработчики лучше поймете ваш код. (Мы все были там, когда вы возвращались к своему столу в понедельник и понятия не имели, о чем вы думали / делали в пятницу раньше!)

Последний совет, который дала Джен, заключался в том, чтобы «убить своих любимых». Это означает, что не держитесь за те чрезвычайно сложные компоненты, на создание которых потребовались годы. Если непонятно, нужно знать, когда отпустить.

Полный доклад Джен: https://www.youtube.com/watch?v=vot0nJJ2Qdo

3. Сборник рассказов - это любовь

Эрин Фокс представила удивительный пример рассказывания историй, рассказав о том, как она рассталась и снова сошлась с Storybook (на React).

Я уже знал о Storybook и его преимуществах, но Эрин продемонстрировала Storybook внутри XCode и упомянула, что он также работает с Android Studio. Это было очень важно для меня, потому что на моей нынешней должности меня окружают разработчики приложений; Использование кроссплатформенности сборника рассказов действительно может улучшить согласованность между нативным и веб-сайтом.

Эрин также упомянула, что во время ее роли в Major League Soccer у них было 3 разных названия компонентов:

  • Отдельные компоненты используются только в одной конкретной области, и это не должно влиять на другие компоненты, если они будут изменены в будущем.
  • Многоразовые компоненты используются во всем приложении. Если вы измените его в будущем, он изменится везде, где используется.
  • Универсальные компоненты - это волшебные компоненты, которые работают точно так же в исходном виде / в Интернете.

В качестве примера того, как выглядит высокоразвитая дизайн-система в Storybook, Эмма Ведекинд продемонстрировала Carbon Design System от IBM. Я обязательно буду копаться в их огромном репозитории сборников рассказов, как только напишу эту статью!

Полный текст выступления Эрин: https://www.youtube.com/watch?v=vYI1riChSj4

4. Перси делает вас популярным

Хорошо, я, возможно, ввел вас в заблуждение - вы не получите пропуск в классную группу в старшей школе, но Перси действительно улучшает кроссбраузерность и заставит пользователей полюбить вас.

Лаура Медарлия представила Percy.io и то, как он определяет визуальные несоответствия вашего сайта между браузерами. Он работает, делая скриншоты каждого браузера / устройства для обнаружения различий. Довольно круто, правда? Его также можно использовать с React Native и интегрировать с Storybook и различными другими инструментами.

Мне нравится идея использовать Перси. Моя текущая команда использует BrowserStack, что замечательно, но Percy автоматизирован, поэтому обнаруживает различия намного быстрее, чем любой QA-инженер. Это оставляет больше времени для тестирования несоответствий функциональности между браузерами.

5. Не ленитесь, доступность - это просто

Марси Саттон в значительной степени посрамила себя и большинство знакомых мне разработчиков, продемонстрировав, насколько легко тестировать (и внедрять) лучшие практики доступности. Вот несколько советов, которыми она поделилась:

  • Прокрутите свой веб-сайт и убедитесь, что все работает должным образом для пользователей, использующих только клавиатуру.
  • Используйте ярлыки Aria, чтобы передать, что делают элементы, если у них нет вспомогательного текста.
  • Убедитесь, что нажатие клавиши escape закрывает все модальные окна / всплывающие окна для пользователей, использующих только клавиатуру.
  • Используйте встроенную в Chrome средство проверки контрастности цвета, чтобы оценить коэффициент контрастности текста.

В целом, каждый должен делать все вышеперечисленное, чтобы наши веб-сайты были максимально удобными для использования. Марси подчеркнула, что это не только ограничивает доход, не удовлетворяя потребности каждого пользователя, но и совершенно неэтично.

Полный текст выступления Марси: https://www.youtube.com/watch?v=xVmUvMkBHas

6. Стой, вперед, поощряйте критику и исправляйте ошибки

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

Кейт говорила в основном, исходя из опыта участия в буткемпе «Основатели и программисты» (FAC), который она проводила до своей первой роли разработчика в Financial Times, и я должен сказать все, что она сказала, что я хочу сделать этот учебный курс!

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

Поощрение критики в конечном итоге придаст вам больше уверенности и нормализует ошибки, так что их будет легче преодолевать.

Наконец, Кейт упомянула, что каждую неделю в FAC они использовали упражнение под названием «Стой, давай, продолжай», чтобы отметить то, что нравится членам команды, и избавиться от тех аспектов, которые у них не было. Без неправильных ответов это звучит как отличный способ изменить ретроспективу Agile, чтобы все чувствовали, что их слушают.

Полный текст выступления Кейт: https://www.youtube.com/watch?v=pG1tOvtFCg4

7. Вам понравится React 16.8

Если вы разработчик React, то, если вы не живете в пещере в течение 6 месяцев, вы, вероятно, знаете, что в версии 16.8 были представлены хуки. Вкратце Манджула Дубе объяснила:

  • Хуки - это функции, которые можно вызывать только на «верхнем уровне» (не внутри циклов, условий или вложенных функций).
  • Они почти полностью исключают необходимость использования компонентов React Class, поскольку позволяют контролировать состояние, ссылки, контекст и (большинство) событий жизненного цикла внутри функциональных компонентов.
  • Не существует эквивалентов хуков для необычных getSnapshotBeforeUpdate и componentDidCatch (пока).
  • Вы можете создавать собственные хуки, которые позволяют извлекать логику компонента в функции многократного использования. Некоторые примеры можно найти на useHooks.com.
  • Два встроенных хука - это useState и useEffect.
  • useState позволяет манипулировать состоянием с помощью функциональных компонентов
  • useEffect позволяет управлять componentDidMount, componentDidUpdate и componentWillUnmount.

Манджула показал, что использование хуков заметно уменьшает размер файла и повышает производительность. Так что же не нравится? Ничего такого! Еще одна новинка, которую нужно изучить, но это жизнь Front-end разработчика, поэтому нам, вероятно (неохотно), нужно просто разобраться с этим.

Полный доклад Манджулы: https://www.youtube.com/watch?v=qX5zj037iVU

Заключение

В целом конференция прошла отлично. Eve Porcello проделала потрясающую работу в качестве ведущей в перерывах между выступлениями и удерживала всех вовлеченными. Если вы подумываете о проведении конференции, я думаю, что все в ReactJS Girls присоединятся ко мне и порекомендуют ее в качестве ведущей, потому что она постоянно нас раздражала!

Я так многому научился и обязательно поеду снова в следующем году.

Я упомянул 7 своих основных моментов выше, но на конференции было 10 докладов. Моника Пауэлл сделала потрясающий обзор того, как автоматизировать рабочий процесс в React, Кэролайн Стран объяснила миф о GraphQL, а Марта Фернандес показала, как функциональное программирование работает в React. Эти 3 выступления не были применимы ко мне, но если вы хотите узнать больше, нажмите на их имена, чтобы увидеть твиттер-дескрипторы, или больше, найдите их информацию на веб-сайте ReactJS Girls.

Спасибо за чтение, надеюсь, вам понравилось! Я буду пытаться делать одно из них на каждой конференции по веб-дизайну / разработке, на которую я пойду, так что дайте мне подписаться, если вы хотите увидеть больше