Я работал с одностраничными приложениями большую часть своей карьеры. Несколько раз у меня возникало ощущение, что я еду на последней волне лучших практик/парадигм. Это странное чувство: я знаю, что никогда не смогу точно сказать, правильно ли это, без недели или около того целенаправленных исследований и экспериментов.
После пары месяцев написания нескольких SPA на основе React я понял, что некоторые части моего рабочего процесса стали болезненно неэффективными, и мне пришлось обновить свои знания и инструменты. Я начал больше читать о flux и redux и был взволнован, но на меня обрушился шквал вопросов.
Я составил список вещей, которые я хочу хорошо понять, как я буду использовать redux для реального приложения. Проблемы, которые все когда-либо находили. Это то, на что я смотрю, оценивая новую парадигму/структуру, места, куда не попадает большинство примеров дел:
- Как сделать управление маршрутом, история, пути, ссылки.
- Как реагировать на пользовательский ввод, который инициирует асинхронные запросы, отображая обратную связь с пользователем, например проверку на стороне сервера или автозаполнение.
- Загрузка начального состояния с минимальным количеством циклов.
- Изящная обработка ошибок и частичный поиск информации (включая разбиение на страницы, отложенную загрузку, кэширование).
- Отладка состояния приложения, тестирование, воспроизводимость ошибок. Легко читаемые трассировки стека.
- Обработка пользовательских сессий: учетные данные, логин, сохраненные настройки на стороне сервера.
- Создание приложения для развертывания, строгий CSP, минимизация данных для передачи, пакетная обработка контента для оптимизации запросов.
- Модульность и тестируемость компонентов.
- Оптимизация времени разработки: быстрая компиляция, инструменты для перезагрузки (с редуксом, я хочу путешествовать во времени и горячую замену модулей), автоматические линты и тесты.
Поэтому я пошел по магазинам в поисках крутых проектов, использующих Redux. Я нашел пару, которые были довольно интересными:
- davezuko/react-redux-starter-kit: хороший выбор для начала нового проекта и экспериментов.
- andrewngu/sound-redux: клиент SoundCloud с довольно большим количеством функций для демонстрационного проекта.
- react.rocks: галерея доказательств концепций и небольших приложений. Многие из них используют Redux.
Итак, после нескольких часов копания в коде мне захотелось начать кодировать приложение среднего размера, чтобы проверить редукцию в реальной жизни. Поскольку я фанат биткойнов, я начал кодировать кошелек, основанный на биткойн-площадке, приложении, которое я помог написать, чтобы продемонстрировать нашу биткойн-библиотеку биткор.
Вы можете проверить код на github. Я начал со всего шаблона, созданного кем-то другим. Я ненавижу шаблоны. Мне понравился react-redux-starting-kit, потому что в нем были примеры почти всего, что я хотел. Я изменил структуру папок, чтобы сделать ее более семантической. Чтобы начать отвечать на некоторые сомнения, которые у меня были, redux-simple-router был способом управления маршрутами и ссылками.
Чтобы решить асинхронное состояние кнопки, я хотел создать библиотеку, аналогичную редукс-формам. По сути, я хотел бы иметь пространство имен в моем состоянии, которое заботится о кнопках и вводах, которые заблокированы в ожидании статуса запроса.
Что касается загрузки начального состояния, я до сих пор не уверен, как быть с изоморфными страницами. Я предполагаю, что примера биткойн-кошелька недостаточно, отчасти потому, что это только на стороне клиента (без пользовательского хранилища). Позже я добавлю еще немного функциональности (вероятно, превратю его в размещенный кошелек, такой как blockchain.info). То же самое с логином, но код в sound-redux убедил меня, что это не будет PITA.
Мне понравилась скорость разработки с заменой модулей в горячем режиме и путешествиями во времени. Ошибки React по-прежнему иногда уродливы для отладки; но теперь это намного лучше с мгновенной обратной связью. Redux-devtools может многое улучшить, но пока все отлично. Я, вероятно, добавлю некоторые функции, чтобы вручную вставлять действия, делать снимки состояния и загружать их.
В общем, это был крутой эксперимент. Я с нетерпением жду, когда рабочие процессы разработчиков значительно улучшатся благодаря методу горячей замены модулей. Кроме того, я продолжу работу над фичами для Шерлока в качестве побочного проекта — у него большой список желаний и пулл-реквесты приветствуются!