От автора: веб-разработка не стоит на месте. В этой сфере инструменты развиваются быстрее, чем в любой другой. Особенно это касается фреймворков и библиотек, которые становятся основой веб-приложений. Причем, некоторые из них мощны ровно настолько, насколько сложны в использовании. Именно потому издательство O’Rilley выпускает книги, вроде «React и Redux функциональная веб разработка». Из-за постоянного развития невозможно стабильно следить за новинками самостоятельно. Саму книгу, конечно же, сегодня не перескажем. Зато подготовим читателя к освоению материала, дав определение базовым понятиям.
React — «V» от MVC
React.js — инструмент, популярность которого трудно оценить. Разработчики, которые только освоили его, начинают создавать на «либе» всевозможные веб-приложения, считая панацеей. В действительности, это не так. На самом деле, это просто высокофункциональная open-source библиотека JavaScript, которая подходит для большинства динамических решений. Один из молодых продуктов: создан в 2013 году.
Перед созданием React.js веб-разработка нуждалась в конкретном решении, которое дало бы возможность для создания масштабных веб-приложений. Джордан Уокер, программист из Facebook, решил разработать программное обеспечение для решения проблем компании. Он, вдохновившись XHP для PHP, создал библиотеку, задачей которой было предоставление:
масштабируемости. Для таких проектов, как социальная сеть, важно одинаково правильное применение на микро- и макроуровне. Пока с этим справляется React.js;
скорость. Рендеринг на React.js не имеет себе равных — это одна из сильных сторон библиотеки;
простота. Тот, кто с нуля разбирался с React, сейчас удивился. Но для тех, кто перед тем решал все с помощью Angular, это казалось подарком.
Суть React.js можно объяснить с через концепцию MVC (модель, вид, контроллер). Вся суть концепта состоит в том, чтобы разделить вид (визуализацию) и модель, которая содержит бизнес-логику веб-приложения. Как и ожидалось, модель в системе отвечает за правила работы объекта, за принципы его взаимодействия. В это время view или вид отвечает за обмен данными между моделью и пользователем. В «V» не анализируются данные, которые своими действиями вводит пользователь.
Так вот React.js — это лишь view в системе, которую представляет MVC. Это представление, которое дает фреймворк. В руках у юзера React.js, PL для использования шаблонов и работы с динамическим HTML. Как правило, библиотека в веб-приложении выполняет роль слоя V. Способов реализовать много, и о них вы узнаете из книги.
Через Flux к Redux
Еще одна технология из арсенала, созданного компанией Facebook для своих веб-приложений. Это разновидность архитектуры, которая позволяет создавать приложения на React, дополняя их еще одним слоем. Мы уже выяснили что такое React, значит, с флюксом не будет никаких проблем.
Итак, React.js можно использовать для создания V-слоя. Это гибкий инструмент с возможностью автоматического обновления всех вложенных элементов. Ну, а благодаря однопоточному наследованию, он как раз хорош для такого веб-приложения, как Facebook и Instagram. Но одного только view будет мало для полноценного приложения, и разработчик приступает к слою Model: за него как раз и отвечает Flux.
Следуя принципу однопоточных данных, о которых упоминали выше, с помощью шаблона flux можно разрабатывать продукт, который значительным образом защищен от ошибок. Еще одним отличием является то, что Flux не использует DOM для демонстрации изменений в веб-приложении. Есть действия пользователя: они становятся причиной измененных данных.
Несмотря на то, что Flux нельзя назвать усовершенствованным MVC, это вовсе не значит, что он хуже — просто имеет свою нишу. Основным его аргументом против flux будет то, что он широко используем, а все его слабые стороны проверены временем. Но с приходом таких масштабных продуктов, как Facebook, понадобилось совсем другое решение.
Для Flux характерны инструменты, с помощью которых он обеспечивает работу модели: store, reducer и container. Функции Store заканчиваются на том, чтобы кэшировать и хранить данные. Также этот util должен давать ответы на запросы от dispatcher (вспомогательный обработчик). Несмотря на то, что такую прогрессивную разработку, как flux, тепло приняли в среде разработчиков, наиболее популярной стала одна — Redux. Это контейнер для JS-приложений, где все данные находятся в хранилище (Store). Основная функция Redux, как и flux, в том, чтобы выполнять роль Model.
Кроме самой популярной реализации, у flux-архитектуры есть еще несколько представителей. Это, к примеру, Reflux (второй по используемости), которому не нужен диспетчер, а обработкой занимается каждый Action.
Также довольно распространённой среди разработчиков веб-приложений, является реализация Alt. В ней заключены все основные возможности Flux, но отличает гораздо более простой синтаксис. Fluxxor, как и видно с названия, является более расширенной версией flux-архитектуры. Как раз эта реализация и дает разработчику наибольшую функциональность в создании слоев данных JavaScript.
Несмотря на то, что сегодня пытаемся выразить предназначение flux простыми словами, все звучит сложно. Но если определить предназначение такого типа архитектуры в целом, то flux — для упрощения структуры веб-приложения. И это касается не только самой его работы, но и стадии, когда код нужно читать, исправлять и отправлять на аутсорс. Как раз потому, такие масштабные продукты, как FB, используют Redux при работе с React.js.
Переходи на сторону Реакта
Нет, просто так не переходи, и об этом поговорим немного ниже. Но если разработчик преследует одну из ниженазванных целей, то ничто не поможет лучше, чем React.js:
работа в команде. Простые продукты создаются небольшой группой людей, пусть даже поэтапно, не взаимодействуя друг с другом? Им вряд ли нужен React.js. Но если веб-приложение разрабатывает и поддерживает целая команда, то трудно придумать что-то более подходящее. С Реактом процесс шаблонизирован и четкий, что значительно упрощает задачу;
удобно заглянуть под капот. Вот у вас уже создано веб-приложение, и оно требует дополнений, поправок, обновлений. Если разработчику дали подобную задачу, то он надеется, что попадется проект на React.js. В противном случае, ему предстоит долго разбираться в написанном.
И эти плюсы подкреплены еще одним — широким использованием React.js. И здесь дело не только в том, что все проблемы с ним постепенно решаются, но и в том, что новые технологии поддерживают Реакт. Ну, а сам концепт React.js позволяет быстро создавать веб-приложения любой сложности, но об этом вы можете узнать из книги, которая упоминалась в начале (слишком большой объем информации для одной статьи 
).
Сейчас не время: причины не использовать React
Несмотря на то, что выше уже называли основные факторы, которые делают React.js библиотекой выбора, существуют и те, которые заставляют использовать ее чересчур часто: простота и трендовость. Действительно, инструмент получил широкую популярность благодаря именитым брендам, но разве это повод внедрять React.js при любом удобном случае?
Среди разработчиков считается дурным тоном применять React.js для всех веб-приложений. Дело в том, что инструмент является весьма мощным и может выполнять скрипты практически любой сложности. Он идеально подходит для динамических сайтов, где постоянное обновление просто необходимо (например, для криптовалютной биржи). Здесь не должно даже быть сомнений — выбирайте React.js. Но если нужно создать простую страницу для стартапа, лучше воздержитесь. Не стоит использовать бульдозер, когда достаточно простой саперной лопатки.
Даже если у веб-приложения и есть некоторые динамические элементы, это также не повод для React.js. Виртуальный DOM не нужен там, где справится шаблонизатор. Например, там, где горячие головы используют React.js, более опытные программисты применяют Jade — своеобразный аналог PHP, если вы хотите идти в ногу со временем.
Однозначно, есть области, где связку React.js+Redux использовать лучше всего. Тем более, что веб-приложения становятся все сложнее, и тяжело сказать, где заканчивается простая визитка и начинается динамический продукт. К примеру, подход всегда будет актуален (пока не придумают что-то лучше) в создании веб-приложений для обработки Big Data или просто больших массивов данных. Если раньше готовых решений для React.js было относительно немного, то сегодня армия разработчиков создает под него целые шаблоны: подставляй значение и получай необходимый продукт.
На этом все! Постигайте современные технологии и читайте книги по веб-разработке!