Почему я перешел с AngularJS на React

Опубликовано: 2022-03-11

В 2011 году, когда мой код начал загромождать селекторы jQuery и обратные вызовы, AngularJS стал спасением, которое помогло улучшить управление, ускорить разработку и получить гораздо больше функциональности из коробки. Двусторонняя привязка AngularJS и философия «модель как единственный источник правды» поразили меня и уменьшили избыточность данных во всем моем приложении.

Однако со временем я обнаружил, что у AngularJS есть свои болевые точки. В конце концов, это вызвало у меня такое разочарование, что я начал искать альтернативные решения.

Болевые точки в AngularJS 1.x

  • DOM для исполнения

    Angular в значительной степени полагается на DOM для своего потока выполнения. При начальной загрузке приложений по умолчанию он сканирует DOM и компилирует его с приоритетами директив, что затрудняет отладку и тестирование порядка выполнения.

  • Собственная инъекция зависимостей

    JavaScript не имеет собственного менеджера пакетов и распознавателя зависимостей. Но в последнее время такие реализации, как AMD, UMD и CommonJS, очень хорошо решают эту проблему. К сожалению, AngularJS не подходит ни для одного из них. Скорее, он вводит собственную инъекцию зависимостей (DI); хотя существуют неофициальные реализации DI AngularJS, использующие RequireJS.

  • Двусторонняя привязка — палка о двух концах

    Заманчиво использовать двустороннюю привязку, но по мере роста сложности вашего компонента это может привести к снижению производительности.

    Как двусторонняя привязка влияет на производительность? Ну, JavaScript ES5 не имеет никакой реализации для уведомления о любых изменениях его переменных или объектов, поэтому Angular использует нечто, называемое «грязной проверкой», для отслеживания изменений данных и синхронизации их с пользовательским интерфейсом. Грязная проверка выполняется после любой операции, выполняемой в рамках Angular (цикл $digest), что приводит к снижению производительности по мере увеличения количества привязок.

    Другая проблема с двусторонней привязкой заключается в том, что многие различные компоненты на странице могут изменять данные, что приводит к множеству источников ввода данных. Если не обращаться должным образом, это может привести к двусмысленной ситуации. Но, честно говоря, это чисто вопрос реализации.

  • У Angular есть свой мир

    Каждая операция в Angular должна пройти цикл дайджеста, иначе ваши компоненты не будут синхронизироваться с вашими моделями данных. Итак, если вы используете какую-либо стороннюю существующую библиотеку JavaScript, вам нужно обернуть ее функцией $apply Angular, если она связана с изменением данных, или вам нужно будет преобразовать ее в службу, если это служебная библиотека. Это похоже на переизобретение каждого доступного модуля JavaScript для Angular.

  • Слишком много концепций и крутая кривая обучения

    Изучение Angular требует изучения множества концепций, включая модули, контроллеры, директивы, области видимости, шаблоны, функции связывания, фильтры и внедрение зависимостей.

Познакомьтесь с реакцией

React, новая библиотека JS с открытым исходным кодом от Facebook и Instagram, — это другой способ написания приложений JavaScript. Когда он был представлен на JSConf EU в мае 2013 года, аудитория была шокирована некоторыми принципами его разработки, такими как «односторонний поток данных» и «виртуальный DOM».

На официальном сайте React говорится: «React — это библиотека JavaScript для создания пользовательских интерфейсов», и да, только интерфейсы и ничего больше. Это не такой фреймворк, как AngularJS. Но вы можете написать автономные компоненты, которые более или менее сопоставимы с директивами Angular. Краткая информация

React переосмысливает лучшие практики веб-разработки. Reach поощряет односторонний поток данных и придерживается философии, согласно которой компоненты являются конечными автоматами, управляемыми данными. В то время как большинству других фреймворков нравится работать с DOM и напрямую манипулировать ею, React ненавидит DOM и работает, чтобы оградить разработчика от него. React предоставляет только базовый API, необходимый для определения любого компонента пользовательского интерфейса, и ничего больше. Reach следует философии UNIX: маленькое — красивое. Делайте одно дело и делайте это лучше всех.

Это очень хорошее сравнение между ними от Пита Ханта (из команды Instagram).

Это просто библиотека. Нужен ли нам фреймворк с React?

Краткий ответ: на ваш выбор.

Используя React, вы можете создавать пользовательские интерфейсы, но нам все еще нужно управлять зависимостями, делать вызовы AJAX, применять фильтры данных. Если нам нужен фреймворк, зачем отказываться от AngularJS?

Фреймворки — это набор пакетов и набор правил. Что делать, если мне не нужны некоторые пакеты или я хочу поменять их на другой пакет. Как мне это сделать? Нам нужен менеджер пакетов. Как мы управляем пакетами в AngularJS? Это ваш выбор, но у Angular есть свой собственный мир. Вам нужно будет обернуть каждый внешний пакет в мир Angular, а затем использовать его. Но React — это просто JavaScript, и любой пакет, написанный на JavaScript, не нуждается в обертке в React.

Итак, будет лучше, если мы выберем наши собственные пакеты из репозитория пакетов, такого как npm, и организуем их по своему усмотрению. Хорошая новость заключается в том, что React поощряет использование npm, у которого есть множество готовых к использованию пакетов. Чтобы начать работу с React, вы можете использовать один из этих стартовых комплектов полного стека.

Преимущества Реакта

Так почему же я действительно переключился на React?

Реагировать быстро!

React использует другой подход, чем другие фреймворки. Это не позволяет вам работать с DOM напрямую. Скорее, он вводит слой виртуальной DOM между вашей логикой JavaScript и фактической DOM. Это помогает резко повысить скорость. При последовательном рендеринге React выполняет сравнение виртуальной DOM и обновляет только ту часть реальной DOM, которую необходимо обновить.

Виртуальный DOM также помогает в решении кросс-браузерных проблем, поскольку он предоставляет унифицированный кросс-браузерный API, который работает даже в Internet Explorer 8. (Уф!)

Все является компонентом (виджет пользовательского интерфейса)

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

Односторонний поток данных для победы!

Flux — это архитектура для создания односторонних слоев данных в приложениях JavaScript. Он был разработан в Facebook вместе с библиотекой представлений React. Это упрощает разработку и облегчает отслеживание и исправление ошибок. Flux — это скорее концепция, чем реализация. Его можно реализовать и в других фреймворках. У Алекса Рэттрея есть очень хорошая реализация Flux с использованием Backbone Collection и Model в React.

JavaScript и ничего больше

Современные веб-приложения работают иначе, чем традиционная сеть. Слой представления необходимо обновлять с учетом взаимодействия с пользователем, не затрагивая сервер. И, следовательно, View и Controller должны сильно полагаться друг на друга. Многие другие фреймворки используют механизмы шаблонов, такие как Handlebars и Mustache, для своего уровня просмотра, но React считает, что эти две части настолько взаимозависимы, что должны находиться в одном месте без использования какого-либо стороннего механизма шаблонов и не выходя за пределы области видимости. JavaScript.

Изоморфный JavaScript

Самый большой недостаток одностраничных веб-приложений JavaScript заключается в том, что они имеют ограничения при сканировании поисковыми системами. У React есть решение для этого. React может предварительно отображать приложения на сервере перед их отправкой в ​​браузер, а также может восстанавливать то же состояние в реальном приложении из предварительно обработанного статического контента с сервера. Поскольку сканеры поисковых систем в значительной степени полагаются на ответ сервера, а не на выполнение JavaScript, предварительный рендеринг таких приложений помогает в поисковой оптимизации.

React хорошо сочетается с RequireJS, Browserify и Webpack.

Загрузчики и упаковщики очень нужны, когда вы создаете большое приложение. К сожалению, текущая версия JavaScript не предоставляет сборщик или загрузчик модулей, хотя он предлагается в следующей версии EcmaScript 6 (System.import). К счастью, у нас есть несколько достойных альтернатив, таких как RequireJS и Webpack.

React построен с помощью Browserify, но если вы хотите внедрить ресурсы изображения и скомпилировать LESS или CoffeeScript, то, вероятно, лучше подойдет Webpack.

Я перешел на React с некоторой болью.

  • Поскольку AngularJS — это фреймворк, он поставляется с множеством полезных функций, включая оболочку AJAX в службе $http, $q в качестве службы обещаний, ng-show, ng-hide, ng-class и ng-if в качестве управляющих операторов. для шаблона.

  • React — это не фреймворк, а библиотека для создания пользовательского интерфейса, поэтому вам нужно подумать обо всех остальных частях самостоятельно. Я работаю над проектом с открытым исходным кодом, который можно использовать с React для облегчения вашей разработки, и сообщество также активно вносит аналогичные повторно используемые компоненты.

    React-components.com — это неофициальный сайт-каталог, где вы можете найти такие компоненты с открытым исходным кодом.

  • Философия React не призывает вас использовать двустороннюю привязку, которая приносит много боли, когда вы имеете дело с элементами формы и редактируемыми сетками данных. Однако по мере того, как вы начинаете понимать поток данных и хранилища Flux, все становится яснее, проще и легче.

React является новым, поэтому для роста сообщества потребуется некоторое время.

В последнее время Angular приобрел огромную популярность и имеет относительно большое количество доступных расширений, таких как AngularUI и Restangular. Сообщество React с открытым исходным кодом новое, но оно быстро растет благодаря таким расширениям, как React Bootstrap. Это всего лишь вопрос времени, когда у нас будет больше доступных компонентов, и React можно будет легко использовать для быстрой разработки веб-приложений.

Заключение

Если вы раньше использовали AngularJS, то поначалу вы можете ненавидеть React, в основном из-за его одностороннего потока данных и отсутствия «фреймворка», где вам нужно позаботиться о многих других вещах самостоятельно. Но как только вы освоитесь с шаблоном проектирования Flux и философией React, вы поймете его красоту.

Facebook и Instagram используют React. Новый редактор Github Atom создан с использованием React. Предстоящая Yahoo Mail перестраивается в React. Какие еще примеры вам нужны? Попробуйте React сегодня.