Как воспользоваться преимуществами архитектуры приложений Flux, сохранив при этом существующий уровень представления
В TrainingPeaks мы создали мощное приложение JavaScript, чтобы помочь опытным спортсменам на выносливость и их тренерам отслеживать, анализировать и планировать свои тренировки. Для того, чтобы продолжать обеспечивать потрясающий пользовательский опыт по мере развития нашего приложения, мы должны иметь возможность внедрять новые концепции и инструменты, а также находить способы совместной работы различных библиотек и фреймворков.
Мы начали этот проект в начале 2013 года, используя Backbone и Marionette. Два года спустя наше приложение переросло нашу первоначальную архитектуру. Шаблоны, которые хорошо работали в небольшом приложении, перестали работать по мере роста нашего программного обеспечения. Части приложения становились хрупкими, и мы не могли так хорошо реагировать на меняющиеся требования, как хотелось бы.
Почему бы не представить Flux сейчас и оставить React на потом?
Наше приложение Backbone продемонстрировало многие из симптомов, для решения которых был разработан Flux. React и Flux набирали популярность, и было легко увидеть, как паттерн Flux поможет решить некоторые из наших проблем. Хотя мы хотели воспользоваться этими новыми инструментами и идеями, нам также нужно было продолжать предоставлять новые функции в соответствии с графиком.
Мы решили, что если бы мы могли извлечь большую часть наших данных и обработки событий на уровень Flux, было бы проще поддерживать существующие части приложения и добавлять новые функции. Мы бы сохранили представления и модели Backbone, но только как слой представления. Мы могли бы подключить все наши представления и модели Backbone к Flux, а затем позже переписать часть слоя представления в React или написать новые функции с использованием React.
Начните с чего-то простого, делайте небольшие шаги и поэтапно проводите рефакторинг.
Нашей целью было извлечь все наши события, данные и HTTP-взаимодействия из наших моделей и представлений в хранилища и действия Flux. Однако наше приложение было довольно сложным, и мы не могли сразу погрузиться и перенести всю эту логику во Flux. Нам нужно было найти один маленький шаг, который мы могли бы сделать, чтобы лучше понять проблему и подготовить почву для дальнейшего рефакторинга.
Мы определили одну часть нашего приложения, библиотеку тренировок, которая была относительно простой и не слишком переплеталась с другими компонентами. Мы могли бы начать с рефакторинга этого небольшого фрагмента, чтобы изучить идеи и установить шаблоны. Затем мы могли бы повторить этот процесс для других частей нашего приложения.
После того, как мы проверили некоторые идеи, установили несколько полезных шаблонов и обрели некоторую уверенность, мы были готовы заняться более сложными частями приложения.
Проведите рефакторинг, чтобы обеспечить ценность для бизнеса, и знайте, когда остановиться.
Наша самая важная цель — обеспечить ценность для бизнеса. Flux, React, Backbone и другие инструменты являются средствами для достижения этой цели. Мы провели рефакторинг некоторых частей нашего приложения для использования Flux, потому что знали, что пожинаем плоды, когда приступим к разработке некоторых запланированных нами новых функций. Мы также переписали некоторые части нашего слоя представления на React, и все наши новые функции созданы с помощью React.
Многие части нашего приложения все еще используют представления Backbone, а некоторые даже используют Backbone без использования Flux. Хотя было бы приятно переписать все это для использования Flux и React, это не принесло бы значительной пользы нашим клиентам или бизнесу. В конце концов, когда нам потребуется значительно переработать эти функции, мы рефакторим их, чтобы также использовать Flux и React.
