Преимущества react

14.02.2016

Сравнительно недавно я стал работать с react только на "клиентской стороне", но сразу пришло ощущение что react почти идеален для реализации интерфейса. Возможно ценители angular 1/2 могут на это возразить, с в виде аргумента что нибудь в формате "TypeScript это чистый код" либо "angular это библиотека а не фреймворк", либо "angular это production решение".
Во всем этом есть доля правды, но больше лени, ведь никто не пожелает переписывать уже созданный набор моделей/компонентов/шаблонов либо изучать новый подход повсеместно внедряя его в проект.

Экосистема готовых решений на angular значительно больше аналогичных на react. Также в пользу angular идет простота поддержки и старта. Но все же давайте рассмотрим что может дать react и чего нет у angular или других фреймворков.

Размер фреймворка

Очевидно что данный показатель не может быть решающим. Но все же нужно признать тот факт что ядро react+flux занимает в 3 раза меньше angular2 либо незначительно меньше angular1. Конечно существует набор функционала которого нет в ядре react, но что если он вам ненужен? Зачем вместо того чтобы подгружать необходимый функционал с помощью модулей, создавать сборку-монстра.

Скорость работы

Не буду приводить цифр (в сети достаточно тестов и бенчмарков с результатами) но react благодаря подходу с виртуальны DOM и jsx значительно опережает конкурентов. Для меня этот фактор стал решающим.

Однонаправленный поток данных

Каждый кто создавал полноценное крупное (не hello world) приложение на angular/ember так или иначе сталкивались с проблемой потока данных и связей хранилище-модель-представления (а также их комбинацией). С аналогичной проблемой столкнулись и инженеры facebook, результатом их работы стал flux. Стоит отдать должное - решение справляется со своей задачей. Более подробно можно узнать из записи презентации:

Компиляция в html на сервере

Огромное преимущество решений на базе react. Да существует angular-server но он не полноценен, и работает с определенной "натяжкой"/ограничениями. Что касается React, то существует возможность (и инструменты которые ее реализуют) выдавать полностью автономную html страницу которая не требует повторной компиляции на клиенте (что еще и ускарает процесс визуализации). Собственно это позволяет приложению оставаться отчасти рабочим даже с выключенным или недоступным JavaScript на клиенте.

Сущность jsx

Даже если опустить сам факт что это более продуманное и соответственно более быстрое решение (в плане скорости работы) решение, сама сущность jsx дает еще преимущество при обработке ошибок. К примеру, допустим в процессе разработки или слияние веток, была допущена ошибка в шаблоне представления модели. Что в этом случае произойдет? Собственно ничего - приложение успешно упадет на клиентской стороне не отобразив ничего (это уж как повезет). Конечно если ваше приложение покрыто полностью и безоговорочно тестами и не только модульными, то возможно тесты выявят проблему. А может и нет, все зависит от входных данных покрытия и количества тестов/кода и возможно от других факторов. Что же произойдет если вы допустите ошибку в JSX - приложение не пройдет сборку (не  скомпилируется) выдав при этом номер строки где допущена ошибка а также перечень предупреждений где потенциально могут возникнуть проблема.

Философиия

React в отличии от ember/angular создает впечатление программы, которая делает что-то одно, но делают это хорошо. В react вы не найдете "стандартно маршрутизатора" либо других заранее навязанных DI зависимостей.

Итоги

Существует еще целый ряд преимуществ react (к примеру hot-reloading), но даже без них, причин достаточно чтобы хотя-бы изучить данный фреймворк. Возможно потом вы будете удивлены и спросите себя "как же без этого я работал ранее?".