Jumpstart to React + Redux Development

Jumpstart to React + Redux Development

Где-то в ноябре 2015 года мы поняли, что наш существующий продукт требует надлежащего обновления, поскольку он довольно долго оставался на стадии бета-тестирования. Мы думали, какой подход лучше всего использовать?

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

Наш подход

В blogfoster мы как бы посередине. Молодая компания, которая соответствует требованиям рынка, имеет клиентов и приносит прибыль. Мы думали о комбинированном подходе. Усовершенствуйте наше существующее интерфейсное приложение, заменив некоторые его части, используя технологический стек для дальнейшего роста и скорости разработки.

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

Мы договорились о следующем: React для обработки UI, Redux для управления состоянием, Webpack как бандлер и ES2015 с Babel как язык программирования. На стороне сервера Hapi.js для REST API, MySQL и Sequilize как хранилище данных и доступ.

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

Цель состояла в том, чтобы создать простое приложение, которое будет включать в себя вполне типичные операции веб-приложений, например маршрутизация, рендеринг, выборка и отправка данных в REST API. Поскольку вход / регистрация - это вход для всех приложений, имеет смысл реализовать его в качестве первого прототипа.

Я был почти уверен, что мне нужно около двух дней на это.

У меня ушла неделя на то, чтобы привести его в форму, чтобы мы были уверены, что продолжим это делать. React, Redux, Webpack, Babel довольно сложно совместить, если вы делаете это в первый раз.

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

Webpack

Webpack оказался огромным программным обеспечением с очень неинтуитивным API. Настройка Webpack более сложна по сравнению с настройкой grunt / gulp + browserify + tools. Я начал рассматривать Webpack как огромную кухонную раковину. Выполнение, комплектация, оптимизация, горячая перезагрузка, развертывание сервера - все в комплекте.

Но как только он настроен, вы понимаете, что оно того стоит.

Во-первых, работает довольно быстро. Наше приложение все еще невелико, но для его полной перестройки требуется всего 1,6 секунды. Во-вторых, Webpack - это гораздо больше, чем просто инструмент для сборки. Он знакомит вас с другим способом работы с веб-ресурсами, такими как источники, стили и изображения.

Наконец, Hot Reload - это то, что делает разработку с помощью Webpack действительно увлекательной. Совершенно здорово иметь опыт обновления части приложений без обновления страницы.

Вавилон и ES2015

Babel 6 вышел в конце октября. Я начал использовать его с самого начала, но это была большая ошибка. Многие библиотеки по-прежнему зависели от Babel 5 и отказывались работать должным образом. У меня была куча загадочных сообщений об ошибках в консоли, я прочитал кучу проблем на GitHub, прежде чем понял это. Это заставило меня отказаться от response-hot-reloader вместо react-transform, поскольку он еще не был перенесен на Babel 6, и у нас все еще есть небольшие проблемы после обновлений Babel.

Но теперь, если вы спросите меня - не хотите ли вы снова переключиться на ES5, я, скорее всего, скажу нет. Я не был счастлив, когда впервые услышал, что в ES6 будут классы. Но реализация компонентов React в виде классов имеет большой смысл.

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

Redux

Redux - одна из самых популярных библиотек JavaScript за всю историю. Используя подход функционального программирования в сочетании с красивым API и своевременным выпуском, Redux де-факто является реализацией Flux по умолчанию для приложений на основе React.

Он требует большого изменения парадигмы, потому что он сильно отличается от библиотек MVC / MVVM, с которыми я работал.

Философия Redux основана на том факте, что все состояние приложения представлено как один большой объект. Пользовательский интерфейс приложения становится функцией этого объекта состояния. Единственный способ изменить состояние - это отправить действие. Действие содержит его тип и некоторую полезную нагрузку, которая передается в функцию-редуктор. Функция reducer создает новый экземпляр состояния. На основе обновленного состояния приложение повторно визуализирует свой пользовательский интерфейс.

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

Кроме того, подключить Redux к приложению React было непросто. Некоторое время я потратил на понимание конфигурации хранилищ, подключенных компонентов и т. Д.

У меня все еще много вопросов. Я не очень доволен всем кодом, который вам нужно написать, если вы хотите ввести новые действия. И я пока не знаю, как все это как следует тестировать.

Но Redux дает хороший инструментарий, а также большую уверенность в том, что происходит в приложении. Поскольку все действия могут регистрироваться и состояние никогда не перезаписывается, намного проще отлаживать и вводить новые функции.

Реагировать

0.14 - последний релиз React, выпущенный в октябре.

Во-первых, это просто работает. Мне так приятно работать с React, потому что он приносит меньше сюрпризов. Концепция компонента проста и понятна.

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

Я доволен сообщениями об ошибках, которые предоставляет React. Сообщения, указывающие вам прямо на конкретную проблему. По сравнению с другими библиотеками, которые не выдают ничего, кроме зашифрованных сообщений об ошибках (да, angular). Создание пользовательского интерфейса с помощью React - это здорово.

В настоящее время мы начали привлекать наших дизайнеров к работе напрямую с JSX, а не с HTML, и с нетерпением ждем результатов.

Во-вторых, React, вероятно, станет самым большим изменением во фронтенд-разработке за последние 5 лет. Виртуальный DOM, дерево различий и частичный повторный рендеринг - настоящая библиотека шедевра. Не могу сказать, что мне это кажется совершенно идеальным, но это действительно хорошо.

ESLint

Не могу не упомянуть ESLint. Раньше я использовал JSHint, но, к сожалению, они решили не поддерживать новейшие языковые функции до официальной поддержки.

Но ESLint на самом деле становится намного лучше. Он настолько прост в настройке и настолько полезен, что я больше не могу представить себе разработку без него.

И Atom, и Sublime поддерживают ESLint, и это будет единственный выбор, если вы захотите пойти по пути ES6 / React / Webpack с линтингом.

Выводы

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

Разработка с нуля + новейшие библиотеки и инструменты делают весь процесс разработки приятным и увлекательным.