Angular vs. React срещу Vue - Сравнение

Решението за рамка на JavaScript за вашето уеб приложение може да бъде невероятно. Ъгловите и Реактните са много популярни в наши дни, а в последно време има много изпъкналост: VueJS. Нещо повече - това са само няколко от новите деца в блока.

Javascripts през 2017 г. - нещата не са лесни в наши дни!

И така, как да решим?

Преди да започнем - SPA или не?

Първо трябва да вземете ясно решение дали имате нужда от заявка за една страница (SPA) или ако предпочитате да използвате многостраничен подход.

Днес стартерите: Angular, React и Vue

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

Ето въпросите, които ще адресираме днес:

  • Колко зрели са рамките / библиотеките?
  • Възможно ли е рамките да съществуват известно време?
  • Колко обширни и полезни са съответните им общности?
  • Колко лесно е да намерите разработчици за всяка от рамките?
  • Кои са основните концепции за програмиране на рамките?
  • Колко лесно е да използвате рамките за малки или големи приложения?
  • Как изглежда кривата на обучение за всяка рамка?
  • Какъв вид изпълнение можете да очаквате от рамките?
  • Къде можете да погледнете по-отблизо под капака?
  • Как можете да започнете да разработвате с избраната рамка?

1. Жизнен цикъл и стратегически съображения

1.1 Някаква история

Angular е основана на TypeScript Javascript рамка. Разработен и поддържан от Google, той е описан като „Супергеройска JavaScript MVWFramework“. Angular (също „Angular 2+“, „Angular 2“ или „ng2“) е преписаният, предимно несъвместим наследник на AngularJS (също „Angular.js“ или „AngularJS 1.x“). Докато AngularJS (старата) първоначално беше пусната през октомври 2010 г., тя все още получава корекции на грешки и т.н. - новият Angular (sans JS) беше представен през септември 2016 г. като версия 2. Най-новата основна версия е версия 4, тъй като версия 3 беше прескочена. Angular се използва от Google, Wix, weather.com, healthcare.gov и Forbes (според madewithangular, stackshare и libscore.com).

React е описан като „библиотека на JavaScript за изграждане на потребителски интерфейси“. Първоначално пуснат през март 2013 г., React е разработен и се поддържа от Facebook, който използва React компоненти на няколко страници (но не като приложение за една страница). Според тази статия на Крис Кордъл, React се използва много повече във Facebook, отколкото Angular е в Google. React се използва и от Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart и други (според Facebook, stackshare и libscore.com).

Facebook работи по издаването на React Fiber. Той ще промени React под капака - рендерингът трябва да бъде много по-бърз като резултат - но нещата ще са обратно съвместими след промените. Facebook говори за промените на конференцията си за разработчици през април 2017 г. и бе публикувана неофициална статия за новата архитектура. React Fiber беше освободен с React 16 през септември 2017 г.

Vue е една от най-бързо развиващите се JS рамки през 2016 г. Vue се описва като „интуитивен, бърз и удобен MVVM за изграждане на интерактивни интерфейси.“ Той бе пуснат за първи път през февруари 2014 г. от бившия служител на Google Evan You (BTW: Evan написа интересна публикация в блога за маркетинговите дейности и номера през първата седмица назад). Това е доста успешен, особено като се има предвид, че Vue получава толкова много сцепление, колкото спектакъл за един човек, без подкрепата на голяма компания. В момента Evan има екип от десетки основни разработчици. През 2016 г. бе издадена версия 2. Vue се използва от Alibaba, Baidu, Expedia, Nintendo, GitLab - списък с по-малки проекти можете да намерите на madewithvuejs.com.

И трите рамки са достъпни под лиценза на MIT.

React се доставя със специален файл с лиценз BSD3 до септември 2017 г. Имаше много дискусии по патентния файл. Ако се интересувате от историята на това, можете да прочетете тази дискусия за издаване на Github, причините и историята зад патентния файл (от бившия инженер на Facebook Джеймс Иде), защо не трябва да се плашите (от Денис Уолш), предупреждение срещу използването на стартъпи (от Раул Крипалани) и бивше изявление от Facebook по тази тема: Обяснение на лиценза на React. Както и да е - всички не трябва да имат значение, тъй като Facebook най-накрая обяви, че React ще получи лиценза за MIT.

1.2 Основно развитие

Както вече беше отбелязано, Angular и React се поддържат и използват от големи компании. Facebook, Instagram и Whatsapp го използват за своите страници. Google го използва в много проекти: например новият потребителски интерфейс на Adwords беше реализиран с Angular & Dart. Отново Vue се реализира от група хора, чиято работа се подкрепя чрез Patreon и други средства за спонсорство. Можете сами да решите дали това е положително или отрицателно. Матиас Гьоцке смята, че малкият екип на Vue е от полза, защото води до по-чист и по-малко проектиран код / ​​API.

Нека да разгледаме някои статистически данни: Angular посочва 36 души на своята екипна страница, Vue списъци 16 души, а React няма екипна страница. В Github, Angular има> 25 000 звезди и 463 сътрудници, React има> 70 000 звезди и> 1000 сътрудници, а Vue има почти 60 000 звезди и само 120 сътрудници. Можете също така да проверите историята на Github Stars за Angular, React и Vue. За пореден път изглежда, че Vue се развива много добре. Според bestof.js през последните три месеца Angular 2 получава средно по 31 звезди на ден, React 74 звезди и Vue.JS 107 звезди.

История на Github Stars за ъглови, реактивни и Vue (източник)

Актуализация: Благодаря на Пол Хеншел, който посочи тенденциите в npm. Те показват броя на изтеглянията за дадените npm пакети и са още по-полезни като чист поглед към звездите на Github:

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

1.3 Пазарен жизнен цикъл

Трудно е да се сравнят Angular, React и Vue в Google Trends поради различните имена и версии. Един от начините за приближаване може да бъде търсенето в категорията „Интернет и технологии“. Ето резултата:

О, добре. Vue не е създаден преди 2014 г. - така че тук не е наред. La Vue е френски за „гледка“, „зрение“ или „мнение“. Може би е това. Сравнението на „VueJS“ и „Angular“ или „React“ също не е честно, тъй като VueJS почти няма резултати в сравнение с останалите.

Тогава нека опитаме нещо друго. Технологичният радар от ThoughtWorks създава добро впечатление как технологиите се развиват във времето. Redux е в етап на приемане (трябва да бъде приет в проекти!), И той е безценен в редица проекти на ThoughtWorks. Vue.js е в пробния етап (изпробвайте го!). Описва се като лека и гъвкава алтернатива на Angular с по-ниска крива на обучение. Angular 2 е в етап на оценка - той се използва успешно от екипите на ThoughtWork, но все още не е категорична препоръка.

Според последното проучване на Stackoverflow 2017, React е обичан от 67% от анкетираните разработчици, а AngularJS - с 52%. „Няма интерес да продължа да се развива“ регистрира по-високи числа за AngularJS (48%) срещу React (33%). В двата случая Vue не е в Топ 10. След това е проучването statejs.com, което сравнява „фронталните рамки“. Най-интересните факти: React и Angular имат 100% осъзнатост, а Vue е неизвестен за 23% от анкетираните. Що се отнася до удовлетвореността, React отбеляза 92% за „бих използвал отново“, Vue 89% и Angular 2 само 65%.

Какво ще кажете за поредната анкета за удовлетвореност на клиентите? Ерик Елиът започна един през октомври 2016 г. за оценка на Angular 2 и React. Само 38% от анкетираните биха използвали Angular 2 отново, докато 84% ще използват React отново.

1.4 Дългосрочна подкрепа и миграции

API на React са доста стабилни, както Facebook посочва в принципите си на дизайн. Има и някои скриптове, които ще ви помогнат да преминете от текущия си API към по-нов: проверете react-codemod. Миграциите са доста лесни и няма такова нещо (необходимо) като версия за дългосрочна поддръжка. В този пост в Reddit хората отбелязват, че надстройките никога не са били проблем. Екипът на React написа публикация в блога за тяхната версия на версията. Когато добавят предупреждение за премахване, те го запазват за останалата част от текущата версия на изданието, преди поведението да бъде променено в следващата основна версия. Няма планирана промяна в нова основна версия - v14 е издаден през октомври 2015 г., v15 е публикуван през април 2016 г., а v16 все още няма дата на издаване. Надстройката не би трябвало да е проблем, както наскоро отбеляза разработчикът на ядрото на React.

Що се отнася до Angular, има публикация в блога за версия и издаванеAngular, като се започне с версията на v2. Ще има една основна актуализация на всеки шест месеца и ще има период на амортизация от поне шест месеца (две основни версии). Има някои експериментални API, отбелязани в документацията с по-кратки периоди на амортизация. Все още няма официално съобщение, но според тази статия екипът на Angular обяви версии за дългосрочна поддръжка, започвайки с Angular 4. Те ще се поддържат поне една година след следващата голяма версия. Това означава, че Angular 4 ще се поддържа поне през септември 2018 г. с корекции на грешки и важни корекции. В повечето случаи актуализацията на Angular от v2 до v4 е толкова лесно, колкото актуализирането на ъгловите зависимости. Angular предлага също справочна информация за това дали са необходими допълнителни промени.

Процесът на актуализиране на Vue 1.x до 2.0 трябва да е лесен за малко приложение - екипът на разработчиците заяви, че 90% от API-тата са останали същите. На конзолата има хубав инструмент за надграждане-диагностика за миграция. Един разработчик отбеляза, че актуализацията от v1 до v2 все още не е забавна в голямо приложение. За съжаление няма ясна (обществена) пътна карта за следващата основна версия или информация за плановете за версиите на LTS.

И още нещо: Angular е пълна рамка и предлага много неща, обединени заедно. React е по-гъвкав от Angular и вероятно ще завършите, използвайки по-независими, неуредени, бързо движещи се библиотеки - това означава, че трябва да се грижите за съответните актуализации и миграции сами. Това може също да бъде в ущърб, ако определени пакети вече не се поддържат или някой друг пакет стане фактически стандарт в даден момент.

1.5 Човешки ресурси и набиране на персонал

Ако имате вътрешни HTML разработчици, които не искат да научат повече Javascript, по-добре е да изберете Angular или Vue. React води до още Javascript (говорим за това по-късно).

Имате ли дизайнери, работещи близо до кода? Потребителят „pier25“ отбелязва на Reddit, че React има смисъл, ако работите за Facebook, където всички са супергеройски разработчици. В реалния свят не винаги ще намерите дизайнер, който да променя JSX - като такъв, работата с HTML шаблони ще бъде много по-лесна.

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

Ъгловата е добра също, ако имате разработчици с обектно ориентиран фон или които не харесват Javascript. За да закарате тази точка у дома, ето цитат от Mahesh Chand:

Не съм разработчик на JavaScript. Моят фон е изграждането на мащабни корпоративни системи, използващи „истински“ софтуерни платформи. Започнах през 1997 г. изграждане на приложения, използващи C, C ++, Pascal, Ada и Fortran. (…) Ясно мога да кажа, че JavaScript е просто глупост за мен. Като Microsoft MVP и експерт, аз добре разбирам TypeScript. Аз също не виждам Facebook като компания за разработка на софтуер. Google и Microsoft обаче вече са най-големите софтуерни новатори. Чувствам се по-удобно да работя с продукт, който има силна подкрепа от Google и Microsoft. Също така (…) с моя произход знам, че Microsoft има още по-големи планове за TypeScript.

Е, тогава ... Вероятно трябва да спомена, че Махеш е регионален директор в Microsoft.

2. Сравнение на React, Angular & Vue

2.1 Компоненти

Въпросните рамки са базирани на всички компоненти. Компонентът получава вход и след известно вътрешно поведение / изчисление, той връща визуализиран UI шаблон (зона за вход / изход или елемент от списъка със задачи) като изход. Дефинираните компоненти трябва лесно да се използват повторно на уеб страницата или в други компоненти. Например, можете да имате компонент на мрежата (състоящ се от заглавен компонент и няколко редови компоненти) с различни свойства (колони, информация в заглавката, редове с данни и т.н.) и да можете да използвате повторно компонента с различни набори от данни на друга страница. Ето подробна статия за компоненти, в случай че искате да научите повече за това.

React и Vue се отличават с боравенето с тъпи компоненти: малки функции без състояние, които получават входни и връщащи елементи като изход.

2.2 Типографски скрипт срещу ES6 срещу ES5

React се фокусира върху използването на Javascript ES6. Vue използва Javascript ES5 или ES6.

Ъгловата разчита на TypeScript. Това предлага повече последователност в свързани примери и проекти с отворен код (Реактивни примери могат да бъдат намерени или в ES5, или в ES6). Това също въвежда понятия като декоратори и статични типове. Статичните типове са полезни за инструментите за интелигентна информация за кода, като автоматично рефакторинг, прескачане до дефиниции и т.н. - те също трябва да намалят броя на грешките в приложението. Въпреки че със сигурност няма консенсус по тази тема. Ерик Елиът не е съгласен в статията си „Шокиращата тайна за статичните типове“. Daniel C Wang казва, че цената на използването на статични типове не вреди и че е добре да имате както тестова разработка (TDD), така и статично въвеждане.

Вероятно също трябва да знаете, че можете да използвате Flow, за да активирате проверката на типа в React. Това е статична проверка на типа, разработена от Facebook за JavaScript. Flow също може да бъде интегриран във VueJS.

Ако пишете кода си в TypeScript, вече не пишете стандартен JavaScript. Въпреки че нараства, TypeScript все още има малка потребителска база в сравнение с тази на целия език на JavaScript. Един риск може да бъде, че се движите в грешна посока, защото TypeScript може - колкото и да е малко вероятно - също да изчезне с времето. Освен това TypeScript добавя много (научени) режийни разходи за проекти - можете да прочетете повече за това в сравнението Angular 2 vs. React от Ерик Елиът.

2.3 Шаблони - JSX или HTML

Реагирайте на почивките с дългогодишни най-добри практики. Десетилетия наред разработчиците се опитваха да разделят шаблоните на потребителския интерфейс и вградената логика на JavaScript, но при JSX те отново се смесват. Това може да звучи ужасно, но трябва да слушате беседата на Питър Хънт „Реагирайте: Преосмисляне на най-добрите практики“ (от октомври 2013 г.). Той посочва, че разделянето на шаблоните и логиката е просто разделяне на технологиите, а не притеснения. Трябва да изградите компоненти вместо шаблони. Компонентите са за многократна употреба, за използване и за тестване на единица.

JSX е незадължителен препроцесор за HTML-синтаксис, който ще бъде компилиран в Javascript по-късно. Той има някои странности - например трябва да използвате className вместо клас, тъй като последният е защитено име в Javascript. JSX е голямо предимство за развитието, защото разполагате с всичко на едно място, а проверките за попълване на код и време за компилиране работят по-добре. Когато правите печатна грешка в JSX, React няма да компилира и отпечатва номера на реда, където е възникнала печата. Angular 2 се проваля тихо по време на изпълнение (този аргумент вероятно е невалиден, ако използвате AOT с Angular).

JSX предполага, че всичко в React е Javascript - използва се както за JSX шаблоните, така и за логиката. Кори Хаус посочва това в статията си от януари 2016 г .: „Angular 2 продължава да вкарва„ JS “в HTML. React поставя „HTML“ в JS. “ Това е добро нещо, защото Javascript е по-мощен от HTML.

Angular шаблоните са подобрени HTML със специален ъглов език (неща като ngIf или ngFor). Докато React изисква познаване на JavaScript, Angular ви принуждава да научите специфичен за Angular синтаксис.

Vue разполага с „еднофайлови компоненти“. Това изглежда като компромис по отношение на разделянето на проблемите - шаблони, скриптове и стилове са в един файл, но в три различни, подредени секции. Това означава, че получавате подчертаване на синтаксис, CSS поддръжка и по-лесна употреба на препроцесори като Jade или SCSS. Прочетох в други статии, че JSX е по-лесен за отстраняване на грешки, защото Vue няма да показва лоши HTML синтаксични грешки. Това не е вярно, защото Vue преобразува HTML, за да изобрази функции - затова грешките се показват без проблеми (Благодаря на Vinicius Reis за коментар и корекция!).

Странична забележка: Ако ви харесва идеята за JSX и искате да я използвате във Vue, можете да използвате babel-plugin-transform-vue-jsx.

2.4 Рамка срещу библиотека

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

React и Vue, от друга страна, са универсално гъвкави. Техните библиотеки могат да бъдат сдвоени към всички видове пакети (има доста за React при npm, но Vue има по-малко пакети, тъй като все още е доста млад). С React можете дори да обмените самата библиотека за съвместими с API алтернативи като Inferno. Въпреки това, с голяма гъвкавост идва голяма отговорност - няма правила и ограничени насоки с React. Всеки проект изисква решение относно неговата архитектура и нещата могат да се объркат по-лесно.

Ъгловата, от друга страна, идва с объркващо гнездо от инструменти за изграждане, котлони, лайнери и мивки с време за справяне. Това важи и за React, ако се използват стартерни комплекти или котелни плочи. Те са естествено много полезни, но React работи извън кутията и вероятно това е начинът, по който трябва да го научите. Понякога разнообразието от инструменти, необходими за работа в среда на Javascript, се нарича „умора от Javascript“. Има статия за него от Ерик Клемънс, който има това да каже:

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

Vue изглежда е най-чистият и лек от трите рамки. GitLab има публикация в блога относно своето решение относно Vue.js (октомври 2016 г.):

Vue.js идва с перфектния баланс за това какво ще направи за вас и какво трябва да направите сами. (...) Vue.js винаги е на обсег, здрава, но гъвкава предпазна мрежа, готова да ви помогне да поддържате ефективно програмирането си и вашето DOM-причинено страдание до минимум.

Харесват простотата и лекотата на използване - изходният код е много четим и не са нужни никаква документация или външни библиотеки. Всичко е много ясно. Vue.js „не прави големи предположения и за голяма част от всичко“. Има и подкаст относно решението на GitLab.

Друг пост за блогове за смяна към Vue идва от Pixeljets. React „беше чудесна стъпка напред за света на JS от гледна точка на осведомеността на държавата и показа на много хора истинското функционално програмиране по добър, практичен начин“. Един от големите минуси на React срещу Vue е проблемът с разделянето на компоненти на по-малки компоненти, поради JSX ограниченията. Ето цитат на статията:

За мен и моя екип четеността на кода е важна, но все още е много важно писането на код да е забавно. Не е смешно да създавате 6 компонента, когато внедрявате наистина проста джаджа за калкулатор. В много случаи е лошо и по отношение на поддръжката, модификациите или прилагането на визуален преглед на някоя джаджа, защото трябва да прескочите множество файлове / функции и да проверите всеки малък парче HTML отделно. Отново не предлагам да пиша монолити - предлагам да се използват компоненти вместо микрокомпоненти за ежедневно развитие.

Има интересни дискусии относно публикацията в блога за новините на Hacker и Reddit - има аргументи от несъгласни и други поддръжници на Vue, така.

2.5 Управление на държавата и обвързване на данни

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

Как работи? Компонентите описват потребителския интерфейс по всяко време. Когато данните се променят, рамката рендерира целия компонент на потребителския интерфейс - показваните данни са винаги актуални. Можем да наречем тази концепция „потребителски интерфейс като функция“.

React често работи в комплект с Redux. Redux се описва в три основни принципа:

  • Единен източник на истината
  • Щатът е само за четене
  • Промените се правят с чисти функции

С други думи: състоянието на цялото приложение се съхранява в дърво на обекти в рамките на един магазин. Това помага при отстраняване на грешки в приложението, а някои функционалности са по-лесни за изпълнение. Състоянието е само за четене и може да се променя само чрез действия за избягване на състезателни условия (помага и при отстраняване на грешки). Редукторите се пишат, за да уточнят как държавите могат да бъдат трансформирани чрез действия.

Повечето уроци и котелни плочи вече са интегрирани Redux, но можете да използвате React без него (а може и да не ви е необходим Redux във вашия проект). Redux въвежда сложност и доста силни ограничения във вашия код. Ако научавате React, трябва да помислите как да научите обикновения React, преди да преминете към Redux. Определено трябва да прочетете „Може да не се нуждаете от Redux“ от Дан Абрамов.

Някои разработчици предлагат използването на Mobx вместо Redux. Можете да мислите за това като "автоматичен Redux", което прави нещата много по-лесни за използване и разбиране в самото начало. Ако искате да погледнете, трябва да започнете с въвеждането. Можете също да прочетете това полезно сравнение между Redux & MobX от Robin. Същият автор предлага и информация за преминаването от Redux към MobX. Този списък е полезен, ако искате да проверите в други библиотеки на Flux. И ако идвате от света на MVC, ще искате да прочетете статията „Мислене в Redux (когато всичко, което знаеш, е MVC)“ на Михаил Левковски.

Vue може да се възползва от Redux - но предлага Vuex като свое собствено решение.

Голяма разлика между React и Angular е еднопосочно срещу двупосочно обвързване. Ъгловото двупосочно обвързване променя състоянието на модела, когато UI елементът (например потребителски вход) се актуализира. React върви само по един начин: той първо актуализира модела и след това прави UI елемента. Методът на Angular е по-чист в кода и по-лесен за изпълнение на разработчика. Начинът на React води до по-добър преглед на данните, тъй като данните текат само в една посока (това прави отстраняването на грешки по-лесно).

И двете концепции имат плюсове и минуси. Трябва да разберете концепциите и да определите дали това влияе на вашето рамково решение. Статията „Двупосочно свързване на данни: ъглова 2 и реагира“ и този въпрос на Stackoverflow предлагат добро обяснение. Тук можете да намерите някои интерактивни примери на код (3 години, само за Angular 1 & React). Не на последно място, Vue поддържа еднопосочно и двупосочно обвързване (еднопосочно по подразбиране).

Има дълга статия за различните видове състояния и управлението на държавата в ъгловите приложения (от Виктор Савкин), ако искате да прочетете допълнително.

2.6 Други концепции за програмиране

Ъгловата включва инжектиране на зависимост - модел, при който един обект доставя зависимостите (услуга) на друг обект (клиент). Това води до повече гъвкавост и по-чист код. Статията „Разбиране на инжектирането на зависимост“ обяснява тази концепция по-подробно.

Моделът на изглед на контролер на модел (MVC) разделя проекта на три компонента: модел, изглед и контролер. Ъгловата като MVC рамка има MVC извън кутията. React има само V - трябва да решите M и C самостоятелно.

2.7 Гъвкавост и намаляване на микросервизите

Можете да работите с React или Vue, като просто добавите Javascript библиотеката към изходния код. Това не е възможно с Angular поради използването на TypeScript.

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

Както отбелязва Кори Хаус:

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

Някои хора използват React и за не-SPA сайтове (например за сложни форми или съветници). Дори Facebook използва React - не за главната страница, а за конкретни страници и функции.

2.8 Размер и производителност

Има обърната страна към цялата функционалност: ъгловата рамка е доста раздута. Размерът на gzipped файл е 143k, в сравнение с 23K за Vue и 43k за React.

И двете React и Vue имат Virtual DOM, което трябва да подобри производителността. Ако се интересувате от това, можете да прочетете за разликите между Virtual DOM & DOM, както и за реалните ползи на Virtual DOM в react.js. Също така, един от авторите на Virtual-DOM сам отговаря на въпрос, свързан с представянето на Stackoverflow.

За да проверя ефективността, хвърлих поглед върху страхотния js-frame-benchmark. Можете да го изтеглите и стартирате сами или да разгледате интерактивната таблица с резултати. Преди да проверите резултатите, трябва да знаете, че рамките изневеряват на показатели - такава проверка на ефективността не трябва да се използва за вземане на решения.

Изпълнението на Angular, React и VueРазпределение на паметта в MB

В обобщение: Vue има страхотна производителност и най-дълбоко разпределение на паметта, но всички тези рамки наистина са доста близки една до друга в сравнение с особено бавни или бързи рамки (като Inferno). Още веднъж: Референтните показатели трябва да се разглеждат само като странична бележка, а не като присъда.

2.9 Тестване

Facebook използва Jest за тестване на кода си React. Ето сравнение между Jest и Mocha - и има статия за това как да използвате Enzyme с Mocha. Enzyme е програма за тестване на JavaScript, използвана в Airbnb (съвместно с Jest, Karma и други тестови бегачи). Ако искате да прочетете повече, има някои по-стари статии за тестване в React (тук и тук).

След това има Жасмин като тестова рамка в Angular 2. Има гняв в статия на Ерик Елиът, която казва, че Жасмин „води до милиони начини за писане на тестове и твърдения, като трябва внимателно да ги прочетете, за да разберете какво прави“. Изходът също е много раздут и трудоемък за четене. Има някои информативни статии за интеграцията на Angular 2 с Karma и Mocha. Ето едно старо видео (от 2015 г.) за стратегиите за тестване с Angular 2.

На Vue липсват насоки за тестване, но Евън написа в предварителния си преглед за 2017 г., че екипът планира да работи по това. Те препоръчват да използвате Карма. Vue работи съвместно с Jest, а има и avoriaz като тест програма.

2.10 Универсални и местни приложения

Универсалните приложения въвеждат приложения в мрежата, на работния плот и в света на родните приложения.

Реагиращите и ъгловите поддържат местното развитие. Angular има NativeScript (подкрепен от Telerik) за родните приложения и Ionic Framework за хибридни приложения. С React можете да проверите reakct-native-renderer, за да изградите кросплатформени приложения за iOS и Android или да реагирате на местни приложения. Много приложения (включително Facebook; проверете на Showcase за повече) са създадени с реагиране.

Рамките на Javascript предоставят страници на клиента. Това е лошо за възприеманата производителност, цялостното потребителско изживяване и SEO. Предварителното рендериране от страна на сървъра е плюс. И трите рамки имат библиотеки, за да намерят помощ за това. За React има next.js, Vue има nuxt.js, а Angular има… .Angular Universal.

2.11 Крива на обучение

Определено има стръмна крива на обучение за Angular. Тя има изчерпателна документация, но понякога може да се почувствате разочаровани от нея, защото нещата са по-трудни, отколкото звучат. Дори когато имате дълбоко разбиране на Javascript, трябва да научите какво се случва под капака на рамката. Настройката е вълшебна в началото и предлага много включени пакети и код. Това може да се разглежда като отрицателен, защото има голяма, съществуваща екосистема, която трябва да научите във времето. От друга страна, може да се окаже добре в дадена ситуация, защото вече са взети доста решения. С React вероятно ще трябва да вземете много наложителни решения по отношение на библиотеките на трети страни. Има 16 различни пакети потоци за управление на държавата, които можете да избирате само в React.

Vue е доста лесен за научаване. Компаниите преминават към Vue, защото изглежда е много по-лесно за младшите разработчици. Тук можете да прочетете за някой, описващ преминаването на отбора му от Angular към Vue. Според друг потребител, приложението React от неговата компания било толкова сложно, че нов разработчик не можел да се справи с кода. С Vue разликата между младши и старши разработчици се свива и те могат да си сътрудничат по-лесно и с по-малко грешки, проблеми и време за развитие.

Някои хора твърдят, че нещата, които са направили в React, би било по-добре написано във Vue. Ако сте неопитен разработчик на Javascript - или ако сте работили основно с jQuery през последното десетилетие - трябва да помислите за използването на Vue. Смяната на парадигмата е по-изразена при преминаване към React. Vue прилича повече на обикновен Javascript, като същевременно представя някои нови идеи: компоненти, модел, управляван от събития, и еднопосочен поток от данни. Освен това има малък отпечатък.

Междувременно Angular и React имат свой собствен начин на работа. Те може да ви пречат, защото трябва да коригирате вашите практики, за да направите нещата да работят по своя начин. Това може да бъде в ущърб, защото сте по-малко гъвкави и има по-стръмна крива на обучение. Това също може да бъде от полза, защото сте принудени да научите правилните понятия, докато научите технологията. С Vue можете да правите нещата по старомодния Javascript начин. Това може да бъде по-лесно в началото, но може да се превърне в проблем в дългосрочен план, ако нещата не се правят правилно.

Когато става дума за отстраняване на грешки, е плюс, че React и Vue имат по-малко магия. Ловът за грешки е по-лесен, защото има по-малко места за разглеждане и следите в стека имат по-добри различия между техния собствен код и този на библиотеките. Хората, работещи с React, съобщават, че никога не им се налага да четат изходния код на библиотеката. Въпреки това, когато отстранявате грешки в Angular приложението си, често трябва да отстранявате грешки във вътрешността на Angular, за да разберете основния модел. От светлата страна, съобщенията за грешки трябва да бъдат по-ясни и по-информативни, като се започне от Angular 4.

2.12 Ъглови, реагиращи и Vue под капака

Искате ли сами да проверите изходния код? Искате ли да видите как се чувстват нещата?

Вероятно ще искате първо да проверите хранилищата на Github: React (github.com/facebook/react), Angular (github.com/angular/angular) и Vue (github.com/vuejs/vue)

Как изглежда синтаксисът? ValueCoders сравнява синтаксиса за Angular, React и Vue.

Също така е добре да видите нещата в производството - във връзка с основния изходен код. TodoMVC изброява десетки от същото приложение Todo, написано с различни рамки на Javascript - можете да сравните решенията Angular, Reactand Vue. RealWorld създава приложение в реалния свят (Medium-клон) и те имат готови решения за Angular (4+) и React (с Redux). Vue е незавършена работа.

Има и някои приложения в реалния свят, които бихте могли да разгледате. Ето решения за React:

  • Направете (хубаво приложение за управление на бележки в реалния свят, създадено с React & Redux)
  • звук-редукс (клиент Soundcloud, изграден с React & Redux)
  • Brainfock (решение за управление на проекти и екип, изградено с React)
  • react-hn & react-news (клонове за новини на Hacker)
  • react-native-whatsapp-ui + урок (WhatsApp клон с реакция-native)
  • феникс-трело (клон Trello)
  • слаби клонинг + друг урок (Слаби клонинги)

Има някои приложения за Angular:

  • angular2-hn & hn-ng2 (клониране на Hacker News + хубав урок за създаването на друг от Ашвин Сурешкумар)
  • Redux-and-angular-2 (клон в Twitter)

Има и решения за Vue:

  • vue-hackernews-2.0 & Loopa news (клонове на Hacker News)
  • vue-soundcloud (демонстрация на Soundcloud)

заключение

Решете рамка сега

React, Angular и Vue са доста готини и никой от тях не стои ясно над останалите. Доверете се на чувствата на червата. Последният къс забавен цинизъм може да помогне на вашето решение:

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

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

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

Ако работите в Google: Angular

Ако обичате TypeScript: ъглова (или реагираща)

Ако обичате обектно-ориентирано програмиране (OOP): Angular

Ако имате нужда от насоки, структура и помощна ръка: Ъглова

Ако работите във Facebook: Реагирайте

Ако харесвате гъвкавост: Реагирайте

Ако обичате големи екосистеми: Реагирайте

Ако обичате да избирате сред десетки пакети: Реагирайте

Ако обичате JS и „всичко-е-Javascript-подход“: Реагирайте

Ако харесвате наистина чист код: Vue

Ако искате най-лесната крива на обучение: Vue

Ако искате най-леката рамка: Vue

Ако искате да разделите притесненията в един файл: Vue

Ако работите сами или имате малък екип: Vue (или React)

Ако приложението ви има тенденция да стане наистина голямо: ъглово (или реагира)

Ако искате да създадете приложение с реагиращ род: React

Ако искате да имате много разработчици в пула: Angular или React

Ако работите с дизайнери и се нуждаете от чисти HTML файлове: Angular или Vue

Ако харесвате Vue, но се страхувате от ограничената екосистема: Реагирайте

Ако не можете да решите, първо научете React, след това Vue, след това Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/