Я открываю исходники 3 модуля с Airbnb

… И вот как это мне помогло

Фон

Когда я читал рассказ Адама Нири о Реорганизации внешнего интерфейса Airbnb, я натолкнулся на два React компонента, которые действительно вызвали у меня интерес как у начинающего разработчика интерфейса.

Чтобы назвать их, они называются <HideAt/> и <ShowAt/>. У меня было несколько причин, почему я так ими заинтересовался:

Я хотел создать свой самый первый модуль NPM, но не хотел, просто потому, что у меня он был. Я всегда хотел придать ценность сообществу, создав его.
<HideAt/> и <ShowAt/>, они решают проблему, и я даже думаю, что в них больше потенциала.
Казалось, что их легко воспроизвести, хотя на первый взгляд я понятия не имел, как мне начать их реализовывать.

По словам Адама, <HideAt/> и <ShowAt/>:

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

Реализация

В качестве отправной точки я пошел на airbnb.com, открыл React Dev Tools и поискал либо <HideAt/>, либо <ShowAt/>, сейчас я не могу вспомнить. 🙃
Вскоре я понял, что мне нужно реализовать 3 модуля, а не 2, поскольку они были заключены в HOC под названием withBreakpoints. (Интересный факт: Когда я впервые столкнулся с ними, я даже не знал точно, что такое HOC.)

После этого я попытался скопировать поведение трех модулей с веб-сайта Airbnb, насколько мне было известно, и с помощью Google.

Эти три модуля научили меня нескольким вещам:

Чтение документов - это всегда кратчайший путь
Прежде чем создавать новый модуль npm, полезно поискать конкурентов на рынке, не изобретайте велосипед
Это окупается чтением исходного кода модулей конкурентов (если, конечно, он есть)
Не сомневайтесь в вопросе "Как?", просто начните, и в конце концов вы добьетесь цели.
Используйте npms.io и посмотрите, как они оценивают ваш модуль, он действительно может предоставить вам некоторые полезные идеи

С технической стороны:

Что такое HOC и почему они полезны
Настройка babel и eslint
Знакомство с написанием тестов с jest, enzyme и Node assert
Использование покрытия с комбинезоном и Travis CI

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

Поскольку я использую довольно много модулей npm изо дня в день, я предпочитаю те, которые имеют написанные тесты и владеют процентами покрытия 💯 или, скорее, 90% <.
В общем, у меня была работа, тяжелая работа… по крайней мере, я так думал.

Трэвис:
Простота настройки Travis CI (службы интеграции, которую я выбрал) стала для меня приятным сюрпризом. Мне просто нужно было создать .travis.yml со следующим фрагментом:

# .travis.yml
language: node_js
node_js:
  - 6
  - 7
notifications:
  email:
    on_success: never

СОВЕТ: свойство notifications не является обязательным, но, объявив его, вы можете настроить свои уведомления от Трэвиса. Из приведенного выше фрагмента кода видно, что я предпочитаю получать электронные письма только о неудачных сборках.

Модульные тесты:

Прочтите документы, прочтите документы и прочтите документы. 😃

Нет, если серьезно, я раньше не писал ни одного модульного теста, я даже не знал конкретной разницы между jest и enzyme. Итак, вы можете себе представить, как я начал это испытание. 😱

И после того, как я внимательно прочитал документацию, внезапно понял, что это тоже был приятный сюрприз. Вы можете очень быстро приступить к написанию модульного теста - конечно, я говорю здесь о некоторых основных вещах, таких как «компонент может получать и изменять свои props», но в моем сообщении просто делается попытка предположить, что написание тестов полностью не сложно выучить. 😊

Подводя итог, эти два показались мне самыми болезненными в реализации. Я просто хотел сказать тебе, насколько я был неправ.

Больше потенциала

На мой взгляд, <HideAt/> и <ShowAt/> имеют больший потенциал, чем просто отзывчивые утилиты. В сочетании с withBreakpoints и react-loadable Джеймса Кайла они могли обеспечить действительно более компактные веб-страницы, импортировав только те пакеты, которые нужны клиентской стороне.
Например, когда вы открываете страницу на мобильном устройстве, Пакет просмотра планшета и ПК можно не учитывать, поскольку они не нужны / избыточны в этом контексте. Эти пакеты можно импортировать асинхронно, только когда это происходит resize.

Заключительные слова

Если вас заинтересовали эти компоненты, вы можете связаться с ними по ссылкам, и, если вы там были, не стесняйтесь открывать проблемы или разветвлять их. 🙂

И последнее, но не менее важное: я хотел бы поблагодарить Тамаса Фодора за наставничество в этих проектах, Якуба Ющака за ваш средний пост о том, как публиковать модули npm, и Адама Нири для создания этого среднего сообщения и обмена этими компонентами, теперь они доступны всему сообществу React. 😉

Нажмите или удерживайте этот маленький значок 👏, если вам понравилась моя небольшая история о моих первых трех модулях npm, и спасибо, что прочитали это!

Я открываю исходники 3 модуля с Airbnb