Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

От AngularJS к React

2 года назад
8558 просмотров
AngularJS Facebook Google JavaScript ReactJS

От AngularJS

Ранее я повсюду использовал AngularJS. Он хорошо. Действительно хорош. Позволяет решать многие задачи очень маленьким количеством кода. Для небольших проектов Angular - самое то. Но когда проект расширяется, начинаешь понимать, что бОльшую часть времени ты борешься с самим фреймворком, а не пишешь код.

Написать на AngularJS что-то реюзабельное у меня, например, не особо получается. iDialog - тому исключение, но всего одно. И то его исходник мне, честно говоря, не нравится. Все слишком завязано на фреймворке и это мне надоело.

К тому же, ни для кого не секрет, что Ангуляр работает слишком медленно. Это начинает быть заметным на проектах чуть больше мелкого. Конечно, можно оптимизировать практически все, но вам так хочется 90% времени думать об оптимизации? Мне - нет.

К React

Для начала, React - не фреймворк и на самом деле я сравниваю бульдога с носорогом (но кого это волнует). По своей сути это шаблонизатор. Крутой, очень крутой, но шаблонизатор. Он не имеет слоя данных или контроллеров. Однако, для меня это не проблема. React покрывает 90% моих потребностей, а остальное можно добить сторонними решениями.

К тому же React работает офигетькакбыстро. Вот серьезно. Попробуйте, например, создать календарик на том и другом. А потом заполнить календарик тысячей ячеек. Ангуляр умрет. React даже не поперхнется. И это без выдумывания оптимизаций.

Скорость - не основная причина по которой мне понравился React. Попробуйте на нем что-нибудь написать. Да у него же порог вхождения куда ниже, чем у Ангуляра. Код более понятный и структурированный. Нет разбиения на кучи Factory, Service, Provider, Directive, Module, Controller. Есть только компоненты (остальное вам не понадобится в 90% случаев). Это реально упрощает жизнь. И пусть кода становится раза в два больше, он более понятный и легок в поддержке даже для новичка. Это же просто JS и HTML, без выдумывания своих правил.

Нет разделения шаблонов и логики шаблонов

Отдельно хочется выделить, что логику шаблонов нужно писать в самом шаблоне. Поначалу это кажется кашей (мы ж все умные, MVC там тыры-пыры), но потом понимаешь, что так куда удобнее.

Конечно, в Ангуляре тоже можно хранить шаблоны в директивах. Но вы правда считаете этот способ удобным?

Прошу не путать с бизнес-логикой. Ее не стоит вносить в React-компоненты.

Все движется в одну сторону

Другим преимуществом является адекватность "движения данных" в React. Есть данные, на основе которых строится представление. Не наоборот. Даже value у input не может меняться без "пинка" со стороны данных.

Таким образом мы всегда знаем откуда эти данные поменялись. В Ангуляре при разрастании приложения начинаешь путаться в том, откуда же меняются значения в $scope.

У них есть даже собственная архитектура - Flux. Если разобраться, то все становится еще круче и удобнее. Но предупреждаю сразу, это не библиотека и не очередной фреймворк. Это просто текст. Если интересно, могу написать статью на эту тему.

Есть и недостатки (куда ж без них)

Первое и основное - это вес. Вместе с аддонами аж 600Кб в несжатом и 137Кб в сжатом виде. Для шаблонизатора, пусть и очень прошаренного, это довольно немало.

Второе. Собственный синтаксис - JSX. Хоть и является необязательным, но без него будет плохо. Ничего сложного, просто смесь JS и HTML в одном файле, но ее надо компилировать, причем, желательно на вашей стороне, а не на клиенте. Может быть не слишком удобно для некоторых программистов, хотя у меня проблем не вызывает. Gulp - наше всё.

В заключение

Чтобы понять все прелести (и не только) React, нужно его попробовать. В реальных условиях, а не в песочнице. Но я не думаю, что вы пожалеете.

Так же не стоит пренебрегать предложенной архитектурой - Flux. Ничего нового они не открыли, но становится реально удобнее.

Что еще почитать