Angular 2 срещу React: The Ultimate Dance Off

Сънсет прекъсвания - Али Марин (CC BY-NC-ND 2.0)

Повечето хора, които ме следват, знаят, че аз лично подкрепям React, но разбира се, че харесвам решенията ми да бъдат образовани, а не да се основават на неинформирани пристрастия. Напоследък изследвам задълбочено Angular 2. Ето как се сравнява с React според мен.

Забележка: Понякога ще съкратя ъглов 2 „ng2“ - често срещана практика в общността.

Да танцуваме

Искам да се съсредоточа върху опита на разработчиците, така че нека да разгледаме как се чувстват разработчиците съответно при използване на ng2 и React. Относно Angular 2 и React, попитах своите последователи „Бихте ли го използвали отново?“:

Само 17% са казали, че отново ще използват Angular 2.

56% са казали, че ще използват React отново.

Това е. Играта приключи. Така ли е? Е, не съвсем. Повечето от анкетираните все още не са използвали Angular 2, така че за да направим това справедливо, наистина трябва да премахнем тази група от анкетата.

Когато премахнем групата, която все още не ги е използвала, и двете оценки изглеждат по-добре:

Реакция: 84%

Ъглов 2: 38%

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

Нека разгледаме по-подробно разликите и защо хората могат да се чувстват така, както го правят.

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

Толкова много хора смятат, че технологичните селекции трябва да се отнасят до производителността. Статии React срещу Angular 1 са с тенденция да се центрират по отношение на производителността (React спечели лесно благодарение на мръсни цикли на проверка и усвояване на Angular 1). Но Angular 2 е изчистил своя акт. Бързо е При моите тестове както за React, така и за Angular 2, производителността не беше голям проблем нито с едното, нито с другото. Всеки от тях има своите предупреждения, но аз няма да навлизам в тях дълбоко.

Както при всички останали проблеми с CS Perf: ако трябва да повтаряте скъпи операции много пъти, това ще забави приложението ви. За React & ng2, това означава, че трябва да избягвате актуализациите на DOM, когато можете, избягвайте итерацията в дълбоки състояния, ако можете, избягвайте прекомерното създаване / разрушаване на обекти и компоненти и т.н. ... за целите на тази статия, ние приемаме, че ние сравняваме няколко суперкари и двамата са демони за скорост. Вашият пробег може да варира.

Това каза, аз оценявам ефективността на екипа толкова високо, колкото производителността на приложенията. Това сравнение ще се концентрира върху опита на разработчиците и проблемите с производителността на екипа. В крайна сметка вашият екип трябва да може да се движи бързо и да прави бързи промени. Ще проучим как всеки от тези инструменти се сравнява на тези фронтове.

Как ъглов 1 трансформира предния край

Angular 1 комбинира идеи от Backbone, Knockout и нововъзникващите спецификации на Web Components и донесе потребителски компоненти на масите чрез ng1 персонализирани директиви. Той също така въведе общ модел от OOP: контейнер за инжектиране на зависимост.

Вече трябва да е очевидно, но IMO, най-трансформиращото нещо, което Angular 1 популяризира, бяха потребителски компоненти. Днес всички популярни фронтални рамки поддържат персонализирани компоненти.

Как реагира трансформира предния край

Когато React беше освободен, MV * и двупосочното свързване на данни превзеха предния край от буря. Гръбнакът и нокаутът бяха тежки нападатели. Angular 1 беше новото дете на блока.

React не идва с никаква вградена концепция за модел и екипът препоръча да го използвате заедно с архитектурата на Flux. Flux е архитектура на потребителския интерфейс, която предписва еднопосочен поток на данни и транзакционно състояние. Разкрих много предимства и на двете подробно в „10 съвета за по-добра архитектура Redux“. Ако не сте запознати с React, Flux и Redux, силно препоръчвам да го прочетете, преди да продължите с тази статия.

Реакцията беше трансформационна, тъй като еднократно направи MVC да изглежда като остаряла технология и отприщи еднопосочен поток върху масите.

Според мен това е най-значимата трансформация на front-end архитектурата след HTML & JavaScript.

За щастие, тя беше толкова трансформационна, че вече не е уникална за React. Можете да го постигнете и в ng2.

Stuff in Angular 2 Няма да намерите в React

Разбира се, и двете рамки поддържат изграждане на персонализирани компоненти. Angular 2 има няколко допълнителни неща под капака, но по същество и двамата съществуват за изграждане на потребителски интерфейси в предния край на стека на приложенията. Ъгъл 2 просто има повече рецепти и философия за „включени батерии“.

Нека да разгледаме някои от предписанията на Angular 2.

написан на пишеща машина

Имам любовна / омразна връзка с TypeScript. Един от моите домашни любимци е популярната идея, че TypeScript ще спаси приложението ви от всякакви бъгове. Имам лоши новини за вас: няма да

Прочетете „Шокиращата тайна за статичните типове“. Намаляването на грешки не е в какво са добри статичните типове.

Коректността на типа не гарантира коректност на програмата.
  • Има много грешки, които статичните типове няма да уловят.
  • Обективно съществуват по-добри начини за улавяне на грешки (TDD, кодови ревюта) и тези ще улавят повечето грешки от типа.

Резултат? Вярно е, че статичните типове могат да елиминират един клас грешки, но с цената на повишена сложност на кода и прекалено цялостното намаляване на грешките върху проекта е малко.

Статичните типове са чудесни предимно за разработване на инструменти. Много е хубаво да получите вътрешна документация за неща като подписи на функционални обаждания, докато кодирате. Но не винаги се нуждаете от вградени пояснения навсякъде, за да постигнете това.

Обичам идеята да посочвам пояснения за типовете, когато се налага за яснота, документация за разработчици и подобрени инструменти за разработчици, но в по-голямата си част имам силно предпочитание за извода за тип. Декларациите с вграден тип имат тенденция да претрупват код и да затрудняват четенето.

Добрата новина е, че TypeScript е доста добър в извода на тип и ако искате, ще ви позволи да разчитате на извода през повечето време. Възможностите му за извеждане изглеждат по-добри от Tern, а инструментите за разработчици за Atom и Microsoft Code са много по-добри от сравними плъгини на Tern. Всъщност, аз щях да стигна толкова далеч, че да кажа, че TypeScript осигурява най-доброто изживяване за разработчици на intellisense, достъпно в света на JavaScript днес. Може да се влюбите в него.

TypeScript осигурява най-доброто изживяване на разработчика на intellisense, достъпно в света на JavaScript днес.

Ако само аз можех да използвам TypeScript строго за възможностите си за извеждане на тип и да пропускам грешки в повишаването на недекларирани модули и двусмислени параметри, бих го използвал през редовни JavaScript файлове през цялото време. Лесен избор.

Ако само поясненията за тип винаги са живели в отделни файлове (като определено въведените `d.ts` файлове) по споразумение с нулева конфигурация, аз също бих използвал повече пояснения и бих искал TypeScript много повече. Бихте могли по-лесно да интегрирате TypeScript с всеки работен процес, тъй като това буквално ще бъде „просто JavaScript“. Можете да компилирате с всеки компилатор, който поддържа стандартен JavaScript.

В действителност TypeScript добавя цял куп режийни разходи към големи проекти, включително конфигурация на режийни разходи (проследяване на всички ваши библиотечни типизации, за да се предотвратят грешки при импортиране на модули), синтаксис (надписи обикновено се декларират вградени), много "всякакви" излюпващи се люкове, и др ...

За да изясни „всякакви“ изходни люкове, TypeScript поддържа генерични файлове, използвайки синтаксиса на стила на конструктор на тип, но не винаги е ясно или лесно да се работи с помощта на функционални конструктивни стилове на програмиране, наблюдаеми, превключване на функции от по-висок ред и т.н. ...

Вместо да измислят правилния начин да въвеждате нещата, разработчиците обикновено прибягват до използването на "произволно". По същество същото, като да се откажеш от проверка на типа и просто да кажеш, "всеки тип ще работи тук", дори когато това не е абсолютно вярно.

Всички излюпващи се надземни и аварийни люкове добавят повече повърхност за скриване на грешки. Обичайно е да виждате проекти на TypeScript, където има грешки в TypeScript, които просто се игнорират от екипите. Понякога стотици или хиляди грешки.

Както доказа HTML, ако направите нещо, което работи, когато има грешки, грешките ще се разпространят.

Всеки път, когато има грешки, които се игнорират, грешките престават да бъдат полезни и просто се превръщат в шум. Привържениците на TypeScript вероятно вече са в коментарите, които ми казват как тези екипи го правят погрешно и наистина трябва да поправят грешките и те са прави, но.

Не винаги е очевидно как бързо да коригирате грешките, а междувременно мениджърите на проекти преследват разработчиците, за да извлекат функциите си. Тъй като TypeScript може да компилира работещи компилации, дори когато има грешки, е възможно, вероятно, големи проекти да попаднат в тази ситуация, независимо дали разработчиците харесват и са съгласни с нея или не. Ако попитате отделни сътрудници за този проект дали някога биха позволили на проекта да влезе в това състояние, ако това зависи от тях, вероятно 100% биха казали „не“.

Но не така работят големи проекти с големи екипи.

„Знаем, че това е гадно, но ще го поправим по-късно.“ - Всеки истински екип за разработчици, който някога е съществувал.

Възможно е TSLint и по-добрата документация да разрешат този проблем. Това остава да видим.

Така че, бих ли използвал TypeScript при следващия си проект? Въпреки че обичам инструментите за разработчици, намирам накладването да е по-трудно, отколкото си струва.

Колкото повече използвам TypeScript, толкова повече мисля, че ме забавя повече, отколкото ме ускорява. И ако не ме ускорява и не намалява много гъстотата на бъгове, защо ___ използвам ли го?

Всичко това каза, че все още може да се влюбите в TypeScript.

Може да ви забави, (не забравяйте, че нямам доказателство за това - просто заяждащо чувство), но може да се почувствате като това ви прави по-продуктивни. Понякога чувствата и харесването на нещата са много.

Щастието за програмисти е важно. Може да откриете, че когато не се занимавате с ограниченията на TypeScript:

Използването на TypeScript просто ви прави щастливи.

Има нещо удовлетворяващо в изграждането на въведен функционален интерфейс и знаем, че следващият разработчик, който идва заедно, ще знае как да извика функцията, без да чете документи или да гледа изходния код.

Просто влезте в него, като знаете, че ще добавите много режийни разходи към вашия проект и знаейки, че няма да ви помогне да намалите много бъгове.

Какво ще прави? Dev tool magic.

Знам, че току-що разгневих много фенове на TypeScript. Не казвам „TypeScript е гадно, не го използвайте.“ Казвам: „TypeScript е готин и има страхотни инструменти за разработка, но има и големи компромиси, с които разработчиците трябва да са наясно и може да не предоставя всички очаквани ползи. "

Инжектиране на зависимостта

Първо, обичам инжектирането на зависимост. Използвам го непрекъснато. Но Angular 2 ви бие над главата с инжектиране на зависимост. Четейки рецептите за документи и модули за тестване, ще намерите всякакви неща за доставчици и подигравателни зависимости и тестване на единици с „beforeEachProviders ()“ и ще отнеме известно време, за да обвиете главата си около всичко. Под предния капак се случва много магия, за да извадите ng2 инжекционните елементи, а недоразуменията за това как всичко работи и как трябва да използвате доставчици, могат да бъдат истинска пречка за начинаещи.

Има по-лесен начин. Вместо да импортирате зависимостите си и да разчитате на рамка, която автоматично да ги напълни в подписа на вашия конструктор на клас, просто напишете функция, която взема вашата зависимост. Наистина е лесно и работи така:

Привържениците на инжектирането на зависимостта (DI) ще кажат, че опростявам (съгласявам се) и че не се обръщам към инстанция (съгласен съм). Казвам, че няма значение.

На практика това, което в крайна сметка в Angular 2 е, че вместо да се подигравате само на шепа неща, които всъщност се нуждаят от подигравки (достъп до мрежа, достъп до дискове, таймери), в крайна сметка се подигравате на много неща, които трябва да бъдат в черно поле подробности за изпълнението.

Говорих това много пъти преди, но ще продължа да го казвам, докато не е общоизвестно:

Присмехът е кодов мирис.

Разбира се понякога се изисква подигравка, но ако приложението ви е обсипано с файлове `* .mock.ts`, правите нещо нередно. Приложението ви е твърде плътно свързано (по ирония на съдбата идеята на DI е да направи приложението ви по-малко свързано) или се опитвате да се подигравате на много неща, които не се нуждаят от подигравки.

Не е нужно да инжектирате и да се подигравате с целия свят.

жасмин

Прочетете „Защо използвам лента вместо Mocha и така трябва и вие“. Повечето се отнася за Жасмин.

Жасмин предоставя API, който се опитва да чете слабо като английски изречения и предоставя куп звъначи за твърдения. Резултатът е, че има милиони начини за писане на тестове и твърдения, което означава, че може да се наложи внимателно да прочетете всеки от тях, за да разберете какво прави.

По-добре е да се ограничите до няколко основни твърдения. Предимно проверки за равенство. В голям екип? Късмет с това.

Жасминът също така насърчава много зависимост от `beforeEach ()` и `afterEach () ', което може случайно да насърчи споделеното състояние: много често срещан проблем при единичните тестове, които могат да причинят случайни провали (тестовете за жасмин правилно се изпълняват в произволен ред до възпирайте използването на споделено състояние и зависимости от тестовия ред).

В допълнение към тези критики, Жасмин има още един недостатък, който ме влече 3 @ + $ # | + луд. Когато сравнявате два обекта за равенство, той сериализира и отпечатва и двата обекта на една голяма линия. С други думи, репортерският изход по подразбиране е # $%! @ # $ Безполезен.

[Забележка на редактора: Трябваше да отрежем около 8 параграфа, което не беше нищо друго освен! @ # $ Изчезва от тази част на статията. Бихме споделили пълния препис, но това може да накара децата да плачат и кученцата да се скрият под дивани.]

Чай отпечатва хубаво се различава. Лентата отпечатва това:

не добре 1 трябва да е същото
---
оператор: равен
очаква се: | -
{x: 1, y: {z: 3}}
действително: | -
{x: 1, y: {z: 2}}
...

За малките предмети лесно виждам разликите. Има репортери, които го правят още по-добре:

Разработчиците се нуждаят от ясно, очевидно отчитане на разликите, когато тестовете се провалят, а Жасмин пада плоско на лицето си в този отдел. Ако знаете как да свържете добър репортер в браузъра, за да отстраните този проблем, моля, коментирайте.

Ако чакате да бъде фиксиран в ядрото, не задръжте дъха си. Отворен въпрос за този проблем се спира от 2014 г.

Други неща

Има и куп ъглови неща. Форми и валидатори и т.н. ... но разбира се, всички тези неща са достъпни за реагиращите потребители, ако искат да ги използват. Голямата разлика е, че потребителите на React не винаги ще намерят най-добрите решения на очевидните места (като документацията на React). Вместо това потребителите на React разчитат повече на най-добрите практики на общността, статии в блогове и други учебни ресурси, за да идентифицират най-добрия избор.

Всички допълнителни „други неща“ раздуват снопът на Angular 2. Ъгловата 2 + RxJS е доста огромна. Почти 800 к. Това е около 4 пъти по-голямо от React + Redux и не оставя много място за дишане на кода на приложението ви, ако искате приложението ви да се зареди и рендира бързо.

Това е единствената голяма забележима разлика в производителността, която мисля, че наистина има значение и има доста голямо значение. Подобряването на времето за зареждане ще подобри коренно KPI на приложението ви навсякъде. Бръсненето на милисекунди извън времето за зареждане може да премести иглите по важни бизнес показатели.

4 пъти по-голям (почти мегабайт!) Наистина е голяма работа. Ако не ви трябва, не го зареждайте.

EDIT: Както посочиха няколко коментатора, ng2 има възможността да прави Ahead Of Time компилиране (AOT) и разклащане на дървета. С правилно конфигурирана конструкция на производството можете да намалите драстично размера на пакета, като използвате само функциите, действително използвани в приложението ви, които дават на крайния пакет много по-малък отпечатък. Горещо препоръчвам да конфигурирате правилно своя производствен пакет. Това ще има потенциално драматично въздействие върху степента на отпадане, процентите на конверсия, удовлетвореността на клиентите и бързината.

Stuff in React няма да намерите в ъгъл 2

Angular 2, подобно на Angular 1, разчита на HTML шаблони.

Хубавото на ng2 шаблоните е, че те са основно подобрена форма на стандартен HTML.

Лошото при ng2 шаблоните е, че трябва да научите малко Angular DSL. Неща като `* ngIf` и` * ngFor`.

Грозното при ng2 шаблоните е, че когато направите грешка, те не успяват по време на изпълнение. Понякога безшумно. Отстраняването на грешки на Angular 2 шаблони може да бъде болка.

Редактиране: Казват ми, че това е коригирано в най-новите версии на Angular 2, когато използвате AOT. Грешките в шаблона ще бъдат докладвани по време на компилиране. Все още не съм имал възможност да тествам поправката.

React няма шаблони. Вместо това, той има JSX, който се компилира към JavaScript по време на компилиране.

Страхотното в JSX е, че когато направите грешка, е вероятно да бъдете хванати по време на проектиране от лайнер или време за компилиране, вместо да чакате време за изпълнение. Babel, ESLint и много инструменти за редактор имат вградена поддръжка за JSX.

Друго страхотно нещо за JSX е, че можете да насочвате към него повече от HTML. Можете да насочвате към персонализирани маркировки, можете да насочвате към платното, дори можете да насочвате към родния мобилен потребителски интерфейс.

Лошото в JSX е, че той не съвпада точно 1: 1 с HTML тагове. Това е Франкенщайн хибрид на JavaScript API и API. Това означава, че трябва да научите нейните странности, като например да използвате `className` вместо` class` - но тъй като можете доста свободно да смесвате обикновен стар JavaScript с JSX за цикли, условности и т.н. ... Мисля, че бие ng2 за учене.

Какво ще кажеш за държавата?

Както Angular 2, така и React могат да използват слоя за управление на данни, който искате. Ако нямате нищо против да се откажете от двупосочно обвързване на данни (което, IMO е нещо лошо), можете да доведете собственото си управление на държавата до ng2. Препоръчвам ngrx / store, който по същество е Redux + наблюдаем.

За React опитайте Redux (за повечето големи приложения) или MobX (за по-малко сложни приложения, които не се нуждаят от транзакционно състояние).

За много повече подробности относно съвременното управление на държавата за JavaScript приложения, вижте „10 съвета за по-добра архитектура Redux“.

Какво трябва да изберете?

След като използвате и двете силно за известно време (реагирайте много по-дълго, разбира се), ми се вижда очевидно, че Angular 2 изисква много повече покупка на технологии и много повече котлони в приложенията.

Ако обичате технологичния избор и можете да живеете с допълнителните режими на котлона, изберете Angular 2.

Ако не сте доволни от някои от технологичните решения на Angular 2 и искате нещо по-тънко и по-малко предписващо, изберете React.

Разбира се, има и други опции (някои от тях са много добри), но те имат стойност в голяма екосистема и общност на разработчици и React & Angular доминират в използването. Няма дори близо трети. Единствената по-популярна от тези две библиотека е jQuery (да, все пак).

Продължавайте да танцувате.

Започнете безплатния си урок на EricElliottJS.com

Ерик Елиът е автор на книгите „Съставяне на софтуер“ и „Програмиране на JavaScript приложения“. Като съосновател на EricElliottJS.com и DevAnywhere.io, той обучава разработчиците на основни умения за разработка на софтуер. Той създава и съветва екипи за разработка на крипто проекти и допринася за софтуерни преживявания за Adobe Systems, Zumba Fitness, The Wall StreetJournal, ESPN, BBC и най-добрите звукозаписни артисти, включително Usher, Frank Ocean, Metallica и много други.

Той се радва на отдалечен начин на живот с най-красивата жена в света.