7 вещей, которые я узнал на ReactJS Girls 2019
3 мая 2019 года я посетила ReactJS Girls 2018 «Конференция для всех разработчиков React, где женщины выходят на сцену».
С самого начала сцена была наполнена энергией… буквально 5 спикеров танцевали и раскручивали толпу - это было круто! Затем в ходе разнообразных бесед были получены знания по целому ряду тем, от улучшения командной культуры (Кейт Бирд) до обучения GraphQL (Кэролайн Стран).
Стоит отметить, что у некоторых читателей мой уровень знаний может отличаться. Если вы были на конференции и думаете, что мой список можно улучшить, дайте мне знать в Twitter @ harry_ronchetti или LinkedIn @ harry-ronchetti.
Резюме
- Дизайн-система - это продукт, который служит другим продуктам.
- Многоразовый - не значит гибкий (Компоненты)
- Сборник рассказов - это любовь
- Перси делает тебя популярным
- Прекратите лениться, доступность - это просто
- Стой, иди, поощряй критику и исправляй ошибки
- Вы подключитесь к 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 средство проверки контрастности цвета, чтобы оценить коэффициент контрастности текста.
- Используйте расширение браузера ax для сверхбыстрой проверки доступности.
- Автоматизируйте тестирование доступности с Кипарисом и топором
В целом, каждый должен делать все вышеперечисленное, чтобы наши веб-сайты были максимально удобными для использования. Марси подчеркнула, что это не только ограничивает доход, не удовлетворяя потребности каждого пользователя, но и совершенно неэтично.
Полный текст выступления Марси: 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.
Спасибо за чтение, надеюсь, вам понравилось! Я буду пытаться делать одно из них на каждой конференции по веб-дизайну / разработке, на которую я пойду, так что дайте мне подписаться, если вы хотите увидеть больше