Сравнение между AngularJS VS React през 2018г

В тази статия сравняваме 2 най-популярни технологии за развитие на предния край: Angular и React. Ще ги сравним от гледна точка на архитекта на проекта и от гледна точка на разработчиците, както и от гледна точка на компаниите.

Сравняването на Angular и react е много популярна тема в днешно време. React и Angular са както високо напреднали, широко възприети JavaScript технологии, които използваме за създаване на отзивчиви уеб приложения и интерактивни едностранични приложения. Броят на JavaScript инструментите за бързо разработване на едностранични приложения (SPA) непрекъснато нараства, така че изборът на подходяща рамка за уеб разработчици е по-предизвикателно.

Основните разлики между AngularJS (Framework) и React (библиотеката) са компонентност, свързване на данни, производителност, разделителна способност, директиви и шаблони. Нека разгледаме подробно всеки от тези аспекти.

AngularJS

Ъгловата версия 2 и по-нова версия е била по-малко от React, но ако разчитате в историята на предшественика си, AngularJS, картината изравнява. Той се поддържа от Google и се използва в Google Анализ, Adwords и Google Fiber. Тъй като AdWords е един от ключовите проекти в Google, ясно е, че те са направили голям залог и е малко вероятно да изчезне скоро.

реагирам

React се разработва и поддържа от Facebook и също така се използва в техните продукти като Instagram и WhatsApp. Вече е около четири години и половина, така че не е съвсем ново. Това е и един от най-популярните проекти в GitHub, с около 92 000 звезди към момента на писането. Звучи ми добре.

Componentization

AngularJS

AngularJS има много сложна и фиксирана структура, защото се основава на архитектурата Model-View-Controller, типична за едностраничните приложения. Обектът $ обхват в AngularJS е отговорен за частта от модела, която се инициализира от контролера и след това се трансформира в HTML за създаване на изгледа за потребителя. AngularJS предоставя много стандартни услуги, фабрики, контролери, директиви и други компоненти.

Разбиваме кода на няколко файла в AngularJS. Например, когато създаваме компонент за многократна употреба със собствена директива, контролер и шаблон, трябва да опишем всеки фрагмент код в отделен файл. След като опишем нашата директива, след това добавяме връзка към нашия шаблон в директивата, за да свържем тези части. AngularJS директивите представляват логиката на шаблона за вашето приложение. Шаблонът е HTML разширен с директивите AngularJS, обикновено написани като тагове или атрибути. Ние също така добавяме контролери, за да предоставим на нашите модели необходимия $ обхват или контекст. Контролерите се записват и в отделни файлове. Когато модулираме нашето приложение по такъв начин, можем да използваме отново нашия шаблон или компонент в друга част на уебсайта и това е много полезно за компанията за развитие на AngularJS, защото спестява много време и ускорява процеса на разработка.

реагирам

Няма "правилна" структура за приложения, създадени с React. Това е голяма JavaScript библиотека, която ни помага да актуализираме изгледа за потребителя. Но React все още не ни позволява да създаваме приложения самостоятелно. В библиотеката липсват слоевете модел и контролер. За да попълни празнината, Facebook представи Flux, който в момента има многобройни варианти, за да контролира работния процес на приложението.

React предоставя много прост и ефикасен начин за изграждане на компоненти на дървета. Той може да се похвали с функционален стил на програмиране, където дефинициите на компонентите са декларативни. Съставянето на приложението ви от компоненти на React е като съставяне на програма от JavaScript от функции.

Обвързване на данни

В MVC Patterns обвързването е най-важната тема за предаване на всякакви данни в еднопосочен или двупосочен поток. Свързването на данни е процесите на синхронизиране на данни, които работят между модела и вижте компонентите.

AngularJS

Обвързването на данни в ъгловите приложения е автоматичното синхронизиране на данни между модела и компонентите на изглед. Начинът, по който Angular внедрява обвързването на данни, ви позволява да третирате модела като единствен източник на истината във вашето приложение. Изгледът е проекция на модела по всяко време. Когато моделът се промени, изгледът отразява промяната и обратно.
 Това е просто прикачване на данни от Model към View или обратно по синхронизиран начин, така че всеки път, когато настъпи промяна в някой от модела или изгледа, други трябва да покажат промяната и това е синхронизиране.

реагирам

Най-добрата характеристика в реагирането е Virtual-Dom. React инжектира данни в своите представени изгледи по време на конструиране, било то, когато коренният изглед е създаден или чрез вложен изглед.React използва еднопосочно свързване на данни, което означава, че сме в състояние да насочим потока от данни само в една посока. Вътре в класа предаваните данни се осъществяват чрез свойството реквизит в текущия контекст.

производителност

AngularJS

Има две неща, които трябва да вземете под внимание, когато говорим за представянето на Angular. Както споменахме по-рано, Angular 1.x и по-висока разчита на двупосочно свързване на данни. Тази концепция се основава на "мръсна проверка", механизъм, който може да направи нашата AngularJS разработка на приложения по-малко.

Когато свързваме стойности в HTML с нашия модел, AngularJS създава наблюдател за всяко свързване, за да проследи промените в DOM. След като View се актуализира, AngularJS сравнява новата стойност с първоначалната стойност и изпълнява цикъла $ digest. След това $ digest цикълът проверява не само стойностите, които действително са се променили, но и всички други стойности, които се проследяват чрез наблюдатели. Ето защо производителността ще намалее много, ако приложението ви има твърде много наблюдатели.

Друг недостатък на рамката AngularJS е начинът, по който работи с DOM. За разлика от React, AngularJS прилага промени в реалния DOM в браузъра. Когато реалният DOM се актуализира, браузърът трябва да промени много вътрешни стойности, за да представлява нов DOM. Това също има отрицателно въздействие върху производителността на приложението.
 Лошата производителност е основната причина, поради която поддръжниците на Angular 2 преработиха как Angular променя състоянието на програмата. Ъгъл 2 и най-новите рамкови версии на Angular 4 също имат рендериране от страна на сървъра и еднопосочно свързване на данни подобно на React. Все пак Angular 2 и 4 предлагат двупосочно обвързване на данни като опция.

реагирам

React въведе концепцията за виртуалния DOM, което е едно от най-големите предимства на React в сравнение с AngularJS. Как работи виртуалният DOM? Когато нашият HTML документ се зареди, React създава леко DOM дърво от JavaScript обекти и го записва на сървъра. Когато потребителят въведе нови данни в полето в браузъра, React създава нов виртуален DOM и след това го сравнява с предварително запазения DOM. Библиотеката намира различия между два обектни модела по такъв начин и възстановява отново виртуалния DOM, но с нов променен HTML код. Цялата тази работа се извършва на сървъра, което намалява натоварването на браузъра.

Сега, вместо да изпраща напълно нов HTML в браузъра, React изпраща HTML само за променения елемент. Този подход е много по-ефективен от това, което предлага AngularJS.

Разрешаване на зависимости

AngularJS

Dependency Injection е модел на софтуерен дизайн, при който на компонентите се дават техните зависимости, вместо да ги твърдо кодират в компонента. Това освобождава компонент от локализиране на зависимостта и прави зависимостите конфигурируеми. Това помага за създаването на компоненти за многократна употреба, поддръжка и тест.
 AngularJS автоматично намира подходящи обекти, които се инжектират като параметри $ routeParams, $ filter, store и $ range. Има две функции, които правят възможно инжектирането на зависимост в рамката AngularJS: $ инжектиране и $ предоставяне.

реагирам

Разликата между React и AngularJS по отношение на инжектирането на зависимост е, че React не предлага никаква концепция за вграден контейнер за инжектиране на зависимост. Но това не означава, че трябва да измислим метод за инжектиране на зависимости в нашия проект React. Можете да използвате няколко инструмента за автоматично инжектиране на зависимости в приложение React. Такива инструменти включват Browserify, RequireJS, ECMAScript 6 модули, които можем да използваме чрез Babel, ReactJS-di и т.н. Единственото предизвикателство е да изберете инструмент, който да използвате.

Директиви и шаблони

AngularJS

Директивите в AngularJS са начин да организираме нашия код около DOM. Ако работим с AngularJS, ние получаваме достъп до DOM само чрез директиви. AngularJS има много стандартни директиви, като ng-bind или ng-app, но понякога правим свои собствени директиви в AngularJS, за да вмъкваме данни в шаблони. Шаблонът трябва да има елемент с нашата директива, написан като атрибут. Това е толкова просто като това. Но директивите на AngularJS, ако са дефинирани изцяло, са сложни. Обектът с настройки, които връщаме в директивата, съдържа около десет свойства. Такива свойства като templateUrl или шаблон са лесни за разбиране.

реагирам

React не предлага разделение на шаблони и директиви или логика на шаблона. Логиката на шаблона трябва да бъде записана в самия шаблон. За да видите как изглежда това, отворете пример от GitHub. Ще забележите, че компонентното приложение на React.TodoItem е създадено със стандартен метод React.createClass (). Предаваме обект със свойства на тази функция. Такива свойства като компонентDidUpdate, трябваComponentUpdate, handleKeyDown или handleSubmit представляват логиката - какво ще се случи с нашия шаблон. В края на компонента обикновено дефинираме свойството render, което е шаблон, който трябва да бъде изобразен в браузъра. Всичко е разположено на едно място, а JSX синтаксисът в шаблона е лесен за разбиране, дори ако не знаете как да пишете в JSX. Ясно е какво ще се случи с нашия шаблон, как трябва да се визуализира и каква информация ще бъде представена за него от свойствата.

Заключение:

Докато стигнете до края на дискусията, сега са ви изяснени няколко точки както в рамките, така и кое е по-добре за разработването на уеб приложения. Следователно, ако решите да изберете един от тях, ето моето мнение. Ако се опитвате да разработите основно приложение за уеб, тогава и двете могат да се използват. Все пак ReactJS е SEO приятелски настроен в реално време и съвместим с интензивен трафик. Докато AngularJS предлага плавна разработка и тестване заедно с надеждността.

Първоначално публикуван в Angular Minds.