Современная разработка веб-интерфейсов сосредоточена вокруг нескольких больших сообществ. На протяжении последних пяти лет React завоевывал симпатии программистов из самых разных отраслей. React – это одна-единственная библиотека, сделавшая MVC рудиментарным в программировании веб-интерфейсов. Сегодня React используется крупнейшими компаниями для разработки самых разнообразных продуктов — Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, список можно продолжать.
Одной из уникальных особенностей мира React является крупнейшее и очень активное сообщество опенсорс-разработчиков вокруг него. Max Stoiber — один из людей, благодаря которым React стал тем, чем он является на сегодня как проект. На протяжении последних нескольких лет он работал над популярнейшим boilerplate проектом в сообществе и внедрял новейшие и лучшие технологии в массовое использование.
Мы поговорили с Максом о новых веяниях в сообществе, о статической типизации для разработки с React, о новом подходе стилизации компонентов и о snapshot-тестировании.
К секретам разработки на React можно приобщиться ниже в интервью.
– Привет, Макс! Что интересного происходит сейчас в React Community?
– styled-components — новый прекрасный способ стилизовать React-компоненты (разумеется, я сужу пристрастно, так как сам сделал этот проект вместе с Glen Maddern). Но если серьёзно, React VR выглядит очень многообещающе, жду не дождусь хорошего шанса опробовать его в деле.
– Flow и React – разработка Facebook, и кажется, что React-команда более склонна к flow (react-native, например, полностью покрыт flow) react тоже использует flow. Значит ли это, что лучше использовать flow с React, чем TypeScript? Может ли TypeScript быть потенциальной заменой Flow + Babel?
– В своей работе я использовал связку Flow и Babel по той простой причине, что эти два инструмента сделаны разработчиками из Facebook и, следовательно, гарантированно будут совместимы с React. C TypeScript немного другая история. В планах разработчиков Flow есть много интересных идей, от которых TypeScript будет неизбежно отставать ввиду некоторых особенностей своего устройства (например, dead code elimination).
Flow создает так называемый Flowgraph, который представляет собой граф всего приложения — он запоминает, какие модули связаны друг с другом. TypeScript не предлагает ничего подобного, потому что это слишком большая задача, Flow заходит дальше. Flow определяет, отрезаны ли большие части приложения от остальной части кода, и предлагает удалить их! Джефф Моррисон много говорил об этом на ReactEurope.
– React-boilerplate входит в топ-10 самых известных и используемых boilerplate-проектов на всем GitHub! Как ты думаешь, что сделало его столь популярным?
– React-boilerplate входит в Топ-3, если считать create-react-app. Думаю, сообщество очень помогло ему войти в первую тройку. Проект пользуется популярностью из-за активности сообщества вокруг него. Каким-то образом мне удалось обеспечить постоянный приток участников, которые проводят много времени, улучшая его. В отличие от многих других boilerplate, это не проект одного энтузиаста — это работа огромной группы людей!
При помощи react-boilerplate вы можете достаточно быстро развернуть готовую среду для разработки и тестирования вашего будущего React-приложения. Проект содержит в себе инструменты для командной строки, которые помогут вам генерировать новые компоненты для будущего приложения при помощи нескольких коротких команд! Готовая структура папок для ваших компонентов, styled-components, вся необходимая конфигурация для работы с Babel и многое другое в виде скомпилированного проекта здесь и сейчас доступны в этом проекте.
Присоединяйтесь к сообществу, рады отзывам и участию.
– Ты недавно проводил опросы про то, как люди управляют стилями в React-приложениях и css-in-js. Какие выводы ты можешь сделать? Что такое вообще css-in-js (люди понимают под этим разное)? Чем это лучше, чем просто CSS? Как стилизовать React-компоненты? Хороши ли inline-styles? Используются ли ещё BEM/OOCSS?
– Мой вывод — нам нужен более удобный способ стилизовать компоненты, именно поэтому мы и стали работать с Glen Maddern над styled-components, которые, надеемся, решат все проблемы! Используйте styled-components!
Особенность styled-components в том, что они обеспечивают использование передовых методик в ваших компонентно-ориентированных системах. Мое выступление на ReactiveConf рассказывает об этом в деталях. В двух словах, суть в том, что, избавляясь от связи между компонентами и стилями (названия классов), вы создаете целую систему небольших компонентов, которые полностью сосредоточены на выполнении одной задачи, также это помогает разграничить компоненты-контейнеры и презентационные компоненты.
Примечание автора: на сегодня styled-components не поддерживают возможности подсветки синтаксиса во всех популярных редакторах и IDE, но Макс заверил в своей презентации на ReactiveConf 2016, что в скором времени эта жизненно необходимая функциональность будет доступна в Atom, WebStorm и прочем.
– Какие инструменты для разработки c React ты можешь порекомендовать?
– Redux DevTools отличный инструмент, потому что позволяют мне очень легко отслеживать все изменения, которые произошли в моем приложении, пока оно работает. В отличие от работы с другими фреймворков, например, Angular, который использует двустороннюю привязку данных, я знаю совершенно точно, что и почему происходит в моем приложении.
React и Redux DevTools просто прекрасны, очень жаль, что не все их до сих пор используют.
Примечание автора: React Developer Tools, в свою очередь, являются незаменимым инструментом для визуализации иерархии компонентов в приложении. Вы можете анализировать State, Props компонентов, не прибегая к дебаггеру и не модифицируя код.
– Если посмотреть, чем тестируют js и React в частности, голова немного идет кругом. Mocha, ava, jest, enzyme… Способов тоже несколько, shallow testing, можно использовать jsdom, недавно появились еще snapshot'ы в jest. Что нам со всем этим делать? Нет ли тут React testing fatigue?
– Не думаю, более того, большинство этих инструментов не используются исключительно для React. Инструменты для тестирования существуют уже многие годы. Я большой поклонник Jest, не только из-за того, что он сделан австрийцем (Christoph Pojer), но также и потому, что snapshot-тестирование — это настоящая революция в том, как люди тестируют React-компоненты и в тестировании вообще!
Snapshot-тесты упрощают юнит тестирование. По сути, они автоматизирует всю работу, которую раньше приходилось выполнять вручную – вы просто делаете снимок, и когда вы что-то меняете, вы можете сообщить Jest: «Да, это правильное изменение» (что будет подтверждено в ходе code review) или «Нет, все поломалось, верните как было!». Все происходит автоматически, так что делать юнит-тестирование теперь легко и быстро!
– Redux все ещё на коне? Стоит ли использовать MobX?
– Я использую в моих приложениях Redux вместе с redux-saga и очень доволен этой комбинацией.
Можно представить Saga в виде отдельного потока в приложении (JavaScript, конечно, остается по-прежнему однопоточным). Сага коммуницирует с главным потоком при помощи Action (Redux Actions) асинхронно. Для приложения неважно, что происходит после того, как кнопка нажата, оно просто запускает Action. Поток Saga может подождать, пока действие дойдет, сделать что-то, а затем отправить Action обратно — все это время наше основное приложение не подозревает, что вообще выполняется какой-то Action. Потому что, когда Saga возвращает Action, оно просто повторно рендерится, и все!
Это удивительным образом улучшает разработку, так как ваше основное приложение и ваши длинные текущие транзакции действительно очень, очень чистые. Все ваше приложение становится чистым, функциональным и легко тестируемым.
– Что ни возьми: CSS, тестирование, типизацию, bundling — у React куча решений. Как ты считаешь, это проблема? Все React-приложения разные, как снежинки, может, нам нужны стандарты?
– Нет, я совсем не считаю, что нам необходимы стандарты. React используется для создания сложных интерактивных приложений (по крайней мере, это его предназначение). Каждое такое приложение, ввиду своей естественной сложности, выдвигает совершенно разные требования.
Несмотря на кажущееся разнообразие возможных решений, сегодня уже можно выделить ряд рекомендуемых передовых подходов для решения типовых задач в разработке приложений, таких как стилизации, тестирования и отладки React-компонентов.
Возможно, styled-components немного сыроваты для использования в серьезных приложениях сегодня, однако все зависит только от приложенных усилий контрибьюторов React-сообщества, которые работают над ним прямо сейчас. Дайте им полгода – или внесите собственный вклад в разработку одной из самых популярных и современных библиотек на сегодня. После разговора с Максом можно прийти к выводу, что сила React не столько в производительности или паттернах, сколько в дружном сообществе людей, открытых к новым идеям и преданных общей цели делать разработку веб-интерфейсов все лучше и эффективнее.
Если вы стараетесь следить за миром JavaScript, то ближайшее профессиональное мероприятие для вас – технологическая конференция HolyJS 2016 Moscow. На конференции будет 20 докладов, посвященных JavaScript-разработке для фронтенда, бэкенда, десктопа и даже VR.
Автор: JUG.ru Group
