Angular vs. React vs. Vue - Srovnání

Rozhodování o rámci JavaScriptu pro vaši webovou aplikaci může být ohromující. Angular and React jsou v těchto dnech velmi populární a je tu povýšení, které v poslední době získává hodně trakce: VueJS. A co víc, jsou to jen některé z nových dětí v bloku.

Javascripty v roce 2017 - v těchto dnech to není snadné!

Jak tedy máme rozhodnout?

Než začneme - SPA nebo ne?

Nejprve byste se měli jasně rozhodnout, zda potřebujete jednostránkovou aplikaci (SPA), nebo zda byste raději zvolili vícestránkový přístup.

Dnes předkrmy: Angular, React a Vue

Nejprve bychom rádi probrali životní a strategické úvahy. Poté se přesuneme k funkcím a konceptům tří rámců javascript. Nakonec dospějeme k závěru.

Zde jsou otázky, na které se dnes podíváme:

  • Jak zralé jsou rámce / knihovny?
  • Je pravděpodobné, že rámce budou chvíli existovat?
  • Jak rozsáhlé a užitečné jsou jejich odpovídající komunity?
  • Jak snadné je najít vývojáře pro každý z rámců?
  • Jaké jsou základní programové koncepce rámců?
  • Jak snadné je použití rámců pro malé nebo velké aplikace?
  • Jak vypadá křivka učení pro každý rámec?
  • Jaký výkon můžete očekávat od rámců?
  • Kde se můžete blíže podívat pod kapotu?
  • Jak se můžete začít vyvíjet s vybraným rámcem?

1. Životní cyklus a strategické úvahy

1.1 Nějaká historie

Úhlový je rámec JavaScriptu založený na TypeScript. Byl vyvinut a udržován společností Google a je popisován jako „superhrdina JavaScript MVWFramework“. Úhlová (také „Úhlová 2+“, „Úhlová 2“ nebo „ng2“) je přepsaný, většinou nekompatibilní nástupce AngularJS (také „Angular.js“ nebo „AngularJS 1.x“). Zatímco AngularJS (stará) byla původně vydána v říjnu 2010, stále se jí opravují chyby atd. - nová Angular (sans JS) byla představena v září 2016 jako verze 2. Nejnovější hlavní verze je verze 4, as verze 3 byla přeskočena. Úhlové používají Google, Wix, weather.com, medical.gov a Forbes (podle madewithangular, stackshare a libscore.com).

React je popsán jako „knihovna JavaScript pro vytváření uživatelských rozhraní“. React, který byl původně uveden v březnu 2013, byl vyvinut a udržován společností Facebook, která používá komponenty React na několika stránkách (nikoli však jako jednostránkovou aplikaci). Podle tohoto článku Chris Cordle je React používán mnohem více na Facebooku než Angular je na Google. React používá také společnost Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart a další (podle Facebooku, stackshare a libscore.com).

Facebook pracuje na vydání React Fiber. Změní to React pod kapotou - vykreslení by mělo být v důsledku toho mnohem rychlejší - ale po změnách budou věci zpětně kompatibilní. Facebook hovořil o změnách na své vývojové konferenci v dubnu 2017 a byl vydán neoficiální článek o nové architektuře. React Fiber byl propuštěn s React 16 v září 2017.

Vue je jedním z nejrychleji rostoucích JS frameworků v roce 2016. Vue se popisuje jako „Intuitivní, rychlý a složitelný MVVM pro vytváření interaktivních rozhraní.“ Poprvé vyšlo v únoru 2014 bývalým zaměstnancem Google Evan You (BTW: Evan napsal zajímavý blogový příspěvek o marketingových aktivitách a číslech v prvním týdnu tehdy). Byl to docela úspěch, zejména s ohledem na to, že Vue získává tolik trakce jako show jednoho muže bez podpory velké společnosti. Evan má v současné době tým desítek klíčových vývojářů. V roce 2016 byla vydána verze 2. Vue používají Alibaba, Baidu, Expedia, Nintendo, GitLab - seznam menších projektů naleznete na madewithvuejs.com.

Všechny tři rámce jsou k dispozici na základě licence MIT.

React byl dodán se zvláštním licenčním souborem BSD3 do září 2017. O patentovém spisu proběhlo mnoho diskusí. Pokud vás zajímá historie, přečtěte si tuto diskusi o vydání Githubu, důvody a historii patentového spisu (technikem bývalého Facebooku James Ide), proč byste se neměli bát (Dennisem Walshem), varování před použitím pro startupy (Raúl Kripalani) a dřívější prohlášení společnosti Facebook k tomuto tématu: Vysvětlení licence společnosti React. Každopádně - na tom by už nemělo záležet, jak Facebook nakonec oznámil, že React získá licenci MIT.

1.2 Hlavní vývoj

Jak již bylo uvedeno, Angular and React jsou podporovány a používány velkými společnostmi. Facebook, Instagram a Whatsapp ji používají pro své stránky. Google ji používá v mnoha projektech: například nové uživatelské rozhraní Adwords bylo implementováno pomocí Angular & Dart. Vue je opět realizována skupinou jednotlivců, jejichž práce je podporována prostřednictvím Patreonu a dalších sponzorských prostředků. Můžete se sami rozhodnout, zda je to pozitivní nebo negativní. Matthias Götzke si myslí, že malý tým Vue je výhodou, protože vede k čistšímu a méně přepracovanému kódu / API.

Podívejme se na několik statistik: Úhlové seznamy 36 lidí na stránce jejich týmu, Vue uvádí 16 lidí a React nemá týmovou stránku. Na Githubu má Angular> 25 000 hvězd a 463 přispěvatelů, React má> 70 000 hvězd a> 1 000 přispěvatelů a Vue má téměř 60 000 hvězd a pouze 120 přispěvatelů. Můžete také zkontrolovat historii hvězd Github pro Angular, React a Vue. Opět se zdá, že Vue trendy velmi dobře. Podle bestof.js za poslední tři měsíce získává Angular 2 v průměru 31 hvězd za den, React 74 hvězd a Vue.JS 107 hvězd.

Historie hvězd Github pro Angular, React & Vue (Source)

Aktualizace: Díky Paulu Henschelovi za to, že poukázal na trendy npm. Ukazují počet stažení pro dané balíčky npm a jsou ještě užitečnější jako pouhý pohled na hvězdy Github:

Počet stažení npm pro dané balíčky npm za poslední 2 roky.

1.3 Životní cyklus trhu

Je obtížné srovnávat Angular, React a Vue v Google Trends kvůli různým názvům a verzím. Jedním ze způsobů, jak se přiblížit, by mohlo být vyhledávání v kategorii „Internet a technologie“. Zde je výsledek:

Ach, dobře. Vue nebyl vytvořen před rokem 2014 - takže je tu něco špatně. La Vue je francouzština pro „pohled“, „zrak“ nebo „názor“. Možná je to tak. Srovnání „VueJS“ a „Angular“ nebo „React“ také není spravedlivé, protože VueJS nemá ve srovnání s ostatními téměř žádné výsledky.

Zkusme tedy ještě něco. Technologický radar od ThoughtWorks dává dobrý dojem, jak se technologie vyvíjejí v průběhu času. Redux je ve fázi adopce (bude přijata v projektech!) A byla neocenitelná v řadě projektů ThoughtWorks. Vue.js je ve zkušební fázi (vyzkoušejte to!). Je popisována jako lehká a flexibilní alternativa k Angular s nižší křivkou učení. Úhel 2 je ve fázi hodnocení - je úspěšně využíván týmy ThoughtWork, ale zatím není silným doporučením.

Podle posledního průzkumu Stackoverflow 2017 se společnosti React líbí 67% dotázaných vývojářů a AngularJS o 52%. „Žádný zájem na dalším vývoji“ registruje vyšší čísla pro AngularJS (48%) vs. React (33%). Vue v žádném případě není v Top 10. Následuje průzkum statejs.com porovnávající „front-end frameworks“. Nejzajímavější fakta: React a Angular mají 100% povědomí a Vue nezná 23% dotázaných lidí. Pokud jde o spokojenost, React skóroval 92% za „opětovné použití“, Vue 89% a Angular 2 pouze 65%.

A co další průzkum spokojenosti zákazníků? Eric Elliott začal jeden v říjnu 2016, aby vyhodnotil Angular 2 a React. Pouze 38% dotázaných použilo Angular 2 znovu, zatímco 84% použilo React znovu.

1.4 Dlouhodobá podpora a migrace

Reagovat API jsou celkem stabilní, jak uvádí Facebook ve svých konstrukčních principech. Existují také některé skripty, které vám pomohou přejít z aktuálního API na novější: podívejte se na reakční kodemod. Migrace jsou poměrně snadné a neexistuje žádná taková věc (nutná) jako verze s dlouhodobou podporou. V tomto příspěvku Reddit lidé berou na vědomí, že aktualizace nikdy nebyly problémem. Tým React napsal blogový příspěvek o své verzi verzí. Když přidají varování o zastoupení, uchová si je po zbytek aktuální verze vydání, než se chování změní v další hlavní verzi. Neexistuje žádná plánovaná změna na novou hlavní verzi - v14 byl vydán v říjnu 2015, v15 byl vydán v dubnu 2016 a v16 zatím nemá datum vydání. Aktualizace by neměla být problém, jak nedávno poznamenal vývojář jádra React.

Pokud jde o Angular, existuje blogový příspěvek o verzích a uvolňováníAngular začínající vydáním v2. Každých šest měsíců bude vydána jedna významná aktualizace a doba odepisování bude minimálně šest měsíců (dvě hlavní vydání). V dokumentaci jsou uvedena některá experimentální rozhraní API s kratší dobou odepisování. Zatím neexistuje oficiální oznámení, ale podle tohoto článku tým Angular oznámil verze dlouhodobé podpory počínaje Angular 4. Ty budou podporovány nejméně jeden rok po vydání další hlavní verze. To znamená, že Angular 4 bude podporován až do září 2018 opravami chyb a důležitými opravami. Ve většině případů je aktualizace Angular z v2 na v4 stejně snadná jako aktualizace závislostí Angular. Angular také nabízí průvodce s informacemi o tom, zda jsou nutné další změny.

Proces aktualizace pro Vue 1.x na 2.0 by měl být pro malou aplikaci snadný - vývojářský tým tvrdil, že 90% API zůstalo stejné. Na konzole pracuje pěkný pomocný nástroj pro upgrade a diagnostiku migrace. Jeden vývojář poznamenal, že aktualizace z verze v1 na v2 nebyla ve velké aplikaci nijak zábavná. Bohužel neexistuje jasný (veřejný) plán další hlavní verze nebo informace o plánech pro verze LTS.

Ještě jedna věc: Úhlová je plný rámec a nabízí spoustu věcí spojených dohromady. React je flexibilnější než Angular a pravděpodobně budete ukončeni pomocí více nezávislých, neuspokojených, rychle se pohybujících knihoven - to znamená, že se musíte postarat o odpovídající aktualizace a migrace sami. Mohlo by to být také na škodu, pokud se některé balíčky již neudržují nebo se nějaký jiný balíček v určitém okamžiku stává de facto standardem.

1.5 Lidské zdroje a nábor

Pokud máte vlastní vývojáře HTML, kteří se nechtějí dozvědět více o Javascriptu, je lepší zvolit Angular nebo Vue. React znamená další Javascript (o tom mluvíme později).

Máte návrháře blízko kódu? Uživatel „pier25“ upozorňuje na Reddit, že React má smysl, pokud pracujete pro Facebook, kde je každý vývojář superhrdiny. Ve skutečném světě nenajdete vždy návrháře, který může JSX upravovat - práce s HTML šablonami bude mnohem jednodušší.

Dobrá věc na Angular framework je, že nový vývojář Angular 2 z jiné společnosti se rychle seznámí se všemi potřebnými konvencemi. Projekty reakce se liší z hlediska architektonických rozhodnutí a vývojáři se musí seznámit s konkrétním nastavením projektu.

Úhlové je také dobré, pokud máte vývojáře s objektově orientovaným pozadím nebo kteří nemají rádi Javascript. Chcete-li řídit tento bod domů, zde je nabídka od Mahesh Chand:

Nejsem vývojář jazyka JavaScript. Moje pozadí je budování rozsáhlých podnikových systémů pomocí „reálných“ softwarových platforem. Začal jsem v roce 1997 budováním aplikací pomocí C, C ++, Pascal, Ada a Fortran. (...) Jasně mohu říci, že JavaScript je pro mě jen blábolný. Protože jsem Microsoft MVP a odborník, dobře rozumím TypeScript. Nevidím Facebook také jako společnost vyvíjející software. Google a Microsoft jsou však již největšími softwarovými inovátory. Cítím se pohodlněji pracovat s produktem, který má silnou podporu od společností Google a Microsoft. Také (…) s mým pozadím vím, že Microsoft má ještě větší plány pro TypeScript.

Dobře, pak ... asi bych měl zmínit, že Mahesh je oblastním ředitelem společnosti Microsoft.

2. Porovnání React, Angular & Vue

2.1 Součásti

Všechny uvedené rámce jsou založeny na komponentách. Komponenta získá vstup a po nějakém interním chování / výpočtu vrátí jako výstup vykreslenou šablonu uživatelského rozhraní (oblast přihlášení / odhlášení nebo položku seznamu úkolů). Definované komponenty by měly být snadno znovu použitelné na webové stránce nebo v rámci jiných komponent. Například byste mohli mít komponentu mřížky (skládající se z komponenty hlavičky a několika komponent řádku) s různými vlastnostmi (sloupce, informace záhlaví, datové řádky atd.) A mohli byste ji znovu použít s různými datovými sadami na jiné stránce. Zde je obsáhlý článek o komponentách, pokud se o tom chcete dozvědět více.

React a Vue vynikají při manipulaci s hloupými komponentami: malé funkce bez státní příslušnosti, které přijímají vstupní a návratové prvky jako výstup.

2.2 Typograf vs. ES6 vs. ES5

React se zaměřuje na použití Javascriptu ES6. Vue používá Javascript ES5 nebo ES6.

Úhlové se spoléhá na TypeScript. To nabízí větší konzistenci v souvisejících příkladech a projektech s otevřeným zdrojovým kódem (příklady React lze nalézt v ES5 nebo ES6). To také zavádí koncepty, jako jsou dekoratéři a statické typy. Statické typy jsou užitečné pro nástroje inteligence kódu, jako je automatické refaktorování, skok na definice atd. - mají také snižovat počet chyb v aplikaci. I když v tomto tématu rozhodně není shoda. Eric Elliott nesouhlasí ve svém článku „Šokující tajemství statických typů“. Daniel C Wang říká, že náklady na používání statických typů nepoškozují a že je dobré mít testovací vývoj (TDD) i statické psaní.

Pravděpodobně byste také měli vědět, že k aktivaci kontroly typu v React můžete použít Flow. Je to statická kontrola typu vyvinutá společností Facebook pro JavaScript. Flow lze také integrovat do VueJS.

Pokud píšete kód v TypeScript, již nepíšete standardní JavaScript. Přestože se TypeScript stále rozšiřuje, má ve srovnání s celým jazykem JavaScript stále malou uživatelskou základnu. Jedním rizikem může být to, že se pohybujete nesprávným směrem, protože TypeScript se může - i když je to nepravděpodobné - také časem ztratit. TypeScript navíc k projektům přidává mnoho (učení) režijních nákladů - o tom si můžete přečíst v porovnání Angular 2 vs. React od Eric Elliott.

2.3 Šablony - JSX nebo HTML

Reagujte na přestávky s dlouhodobými osvědčenými postupy. Po celá desetiletí se vývojáři snažili oddělit šablony uživatelského rozhraní a inline Javascriptovou logiku, ale s JSX jsou tyto znovu promíseny. Může to znít hrozně, ale měli byste si poslechnout řeč Petera Hunta „Reagovat: Přehodnotit osvědčené postupy“ (od října 2013). Poukazuje na to, že oddělení šablon a logiky je pouhým oddělením technologií, nikoli obav. Měli byste sestavovat komponenty místo šablon. Komponenty jsou opakovaně použitelné, skládatelné a testovatelné na jednotku.

JSX je volitelný preprocesor pro HTML-podobnou syntaxi, který bude později zkompilován v Javascriptu. Má několik zvláštností - například místo třídy musíte použít className, protože tato je v Javascriptu chráněným názvem. JSX je velká výhoda pro vývoj, protože máte vše na jednom místě a dokončení kódu a kontroly kompilace fungují lépe. Když uděláte překlep v JSX, React se nezkompiluje a vytiskne číslo řádku, kde došlo k překlepu. Angular 2 v době běhu potichu selže (toto je pravděpodobně neplatný argument, pokud používáte AOT s Angular).

JSX znamená, že vše v React je Javascript - používá se jak pro šablony JSX, tak pro logiku. Cory House na to poukazuje ve svém článku z ledna 2016: „Angular 2 nadále vkládá do jazyka HTML„ JS “. React vloží do JS „HTML“. “. To je dobrá věc, protože Javascript je silnější než HTML.

Šablony Úhlové jsou vylepšené HTML se speciálním úhlým jazykem (Věci jako ngIf nebo ngFor). Zatímco React vyžaduje znalost JavaScriptu, Angular vás nutí naučit se syntaxi specifickou pro Angular.

Vue obsahuje „komponenty jednoho souboru“. Vypadá to jako kompromis, pokud jde o oddělení zájmů - šablony, skripty a styly jsou v jednom souboru, ale ve třech různých, uspořádaných částech. To znamená, že získáte zvýraznění syntaxe, podporu CSS a snadnější použití preprocesorů jako Jade nebo SCSS. V dalších článcích jsem četl, že JSX je pro ladění jednodušší, protože Vue nebude zobrazovat špatné chyby syntaxe HTML. To není pravda, protože Vue převádí HTML na renderovací funkce - takže chyby jsou zobrazovány bez problémů (Díky Vinicius Reis za komentáře a opravy!).

Vedlejší poznámka: Pokud se vám líbí myšlenka JSX a chcete ji použít ve Vue, můžete použít babel-plugin-transform-vue-jsx.

2.4 Framework vs. knihovna

Úhlová je spíše rámcem než knihovnou, protože poskytuje silné názory na to, jak by měla být vaše aplikace strukturována a také má více funkcí hned po vybalení. Úhlová je „kompletní řešení“ - baterie jsou součástí balení a jsou připraveny poskytnout vám příjemný start. Nemusíte analyzovat knihovny, řešení směrování apod. - stačí začít pracovat.

Na druhou stranu React a Vue jsou univerzálně flexibilní. Jejich knihovny mohou být spárovány se všemi druhy balíčků (pro React je dost spousta, ale Vue má méně balíčků, protože je stále docela mladý). Pomocí React můžete dokonce vyměnit knihovnu za alternativy kompatibilní s API, jako je Inferno. S velkou flexibilitou však přichází velká odpovědnost - s Reactem neexistují žádná pravidla a omezené vedení. Každý projekt vyžaduje rozhodnutí o jeho architektuře a věci se mohou snáze snášet.

Úhlový, na druhé straně, přichází s matoucím hnízdem nástrojů pro sestavení, kotle, linterů a časových dřezů. To platí také pro React, pokud jsou použity startovací sady nebo šablony. Jsou přirozeně velmi nápomocní, ale React funguje po vybalení z krabice, a to je pravděpodobně způsob, jak se to naučit. Někdy je řada nástrojů potřebných pro práci v prostředí Javascript označována jako „únava Javascriptu“. Eric Clemmons o tom napsal článek:

Na začátku je stále spousta nainstalovaných nástrojů, na které nejste zvyklí. Jsou generovány, ale pravděpodobně mnoho vývojářů nechápe, co se děje pod kapotou - nebo jim to trvá hodně času.

Vue se zdá být nejčistší a nejlehčí ze tří rámců. GitLab má blogový příspěvek o svém rozhodnutí ohledně Vue.js (říjen 2016):

Vue.js přichází s dokonalou rovnováhou toho, co pro vás udělá a co musíte udělat sami. (…) Vue.js je vždy na dosah, robustní, ale flexibilní bezpečnostní síť připravená, aby vám pomohla udržet vaše programování efektivní a vaše utrpení způsobené DOMem na minimum.

Líbí se jim jednoduchost a snadnost použití - zdrojový kód je velmi čitelný a není potřeba žádná dokumentace ani externí knihovny. Všechno je velmi jednoduché. Vue.js „nedělá velké předpoklady ani o ničem“. Existuje také podcast o rozhodnutí GitLabu.

Další blogový příspěvek o posunu směrem k Vue pochází z Pixeljets. Reagovat „byl velkým krokem vpřed pro svět JS, pokud jde o uvědomění státu, a ukázal hodně lidem skutečné funkční programování dobrým a praktickým způsobem“. Jednou z velkých nevýhod React vs. Vue je problém rozdělení komponent na menší komponenty kvůli omezením JSX. Zde je citace článku:

Pro mě a můj tým je důležitá čitelnost kódu, ale stále je velmi důležité, aby psaní kódu bylo zábavné. Není zábavné vytvářet 6 komponent, pokud implementujete opravdu jednoduchý kalkulačkový widget. V mnoha případech je to také špatné, pokud jde o údržbu, úpravy nebo použití vizuální opravy u nějakého widgetu, protože musíte přeskakovat více souborů / funkcí a zkontrolovat každý malý kus HTML samostatně. Znovu nenavrhuji psát monolity - doporučuji používat komponenty místo mikropočítačů pro každodenní vývoj.

O blogovém příspěvku se zajímají zajímavé diskuse o novinkách Hacker a Reddit - existují argumenty disidentů a dalších příznivců Vue.

2.5 Správa státu a vazba dat

Vytváření uživatelských rozhraní je obtížné, protože všude jsou stavy - změna dat v průběhu času vyžaduje složitost. Definované pracovní postupy jsou velkou pomocí, když aplikace rostou a jsou složitější. Pro omezené aplikace je to pravděpodobně nadměrné a něco jako Vanilla JS by stačilo.

Jak to funguje? Komponenty popisují UI v kterémkoli okamžiku. Když se data změní, rámec znovu vykreslí celou komponentu uživatelského rozhraní - zobrazená data jsou vždy aktuální. Tento koncept můžeme nazvat „UI jako funkce“.

Reagovat často funguje společně s Reduxem. Redux se popisuje ve třech základních principech:

  • Jeden zdroj pravdy
  • Stav je pouze pro čtení
  • Změny se provádějí s čistými funkcemi

Jinými slovy: stav kompletní aplikace je uložen ve stromu objektů v jednom úložišti. Pomáhá to s laděním aplikace a některé funkce se snadněji implementují. Stav je pouze pro čtení a lze jej změnit pouze prostřednictvím akcí, aby se zabránilo podmínkám závodu (také pomáhá s laděním). Reduktory jsou psány specifikovat, jak mohou být stavy transformovány pomocí akcí.

Většina výukových programů a předloh má Redux již integrovaný, ale můžete použít React bez něj (a nemusíte Redux ve svém projektu vůbec potřebovat). Redux zavádí do vašeho kódu složitost a docela silná omezení. Pokud se učíte React, měli byste přemýšlet o učení plain React, než přejdete na Redux. Určitě byste si měli přečíst „Možná nebudete potřebovat Reduxa“ od Dana Abramova.

Někteří vývojáři doporučují používat Mobx místo Redux. Můžete to považovat za „automatický Redux“, díky kterému jsou věci mnohem jednodušší a pochopitelné hned na začátku. Pokud se chcete podívat, měli byste začít úvodem. Můžete si také přečíst toto užitečné srovnání mezi Redux a MobX od Robina. Stejný autor také nabízí informace o přechodu z Reduxu na MobX. Tento seznam je užitečný, pokud chcete zkontrolovat jiné knihovny Flux. A pokud přicházíte ze světa MVC, budete si muset přečíst článek „Myšlení v Reduxu (když vše, co víte, je MVC)“ od Michail Levkovského.

Společnost Vue může využít Redux - ale nabízí Vuex jako své vlastní řešení.

Velký rozdíl mezi React a Angular je jednosměrná vs. obousměrná vazba. Angularova obousměrná vazba mění stav modelu při aktualizaci prvku uživatelského rozhraní (např. Uživatelského vstupu). Reagovat jde pouze jednou cestou: nejprve aktualizuje model a poté vykreslí prvek uživatelského rozhraní. Angularova metoda je čistší v kódu a pro vývojáře je snadnější implementovat. Způsob reakce vede k lepšímu přehledu dat, protože data proudí pouze jedním směrem (usnadňuje tak ladění).

Oba koncepty mají klady a zápory. Musíte pochopit pojmy a zjistit, zda to ovlivňuje vaše rámcové rozhodnutí. Článek „Obousměrná vazba dat: Angular 2 and React“ a tato otázka Stackoverflow nabízejí dobré vysvětlení. Zde najdete příklady interaktivního kódu (3 roky, pouze pro Angular 1 & React). V neposlední řadě podporuje Vue jednosměrné i obousměrné vázání (ve výchozím nastavení jednosměrné).

Existuje dlouhý článek o různých typech stavů a ​​řízení státu v Angular aplikacích (Victor Savkin), pokud si chcete přečíst více.

2.6 Další koncepty programování

Úhlová zahrnuje injekci závislosti, vzor, ​​ve kterém jeden objekt dodává závislosti (službu) jinému objektu (klientovi). To vede k větší flexibilitě a čistšímu kódu. Tento koncept je podrobněji vysvětlen v článku „Porozumění závislostní injekci“.

Model-view-controller pattern (MVC) rozděluje projekt na tři komponenty: model, pohled a ovladač. Úhel jako rámec MVC má MVC vyřazeno z krabice. React má pouze V - musíte vyřešit M a C sami.

2.7 Flexibilita a redukce na mikroservisy

S Reactem nebo Vue můžete pracovat jednoduše tak, že do zdrojového kódu přidáte knihovnu Javascript. U Angular to není možné kvůli použití TypeScript.

Nyní směřujeme více k mikroprocesům a microappsům. React and Vue vám dává větší kontrolu nad velikostí aplikace výběrem pouze věcí, které jsou skutečně nezbytné. Nabízejí větší flexibilitu při přechodu z SPA na mikroservisy pomocí částí dřívější aplikace. Úhlová práce nejlépe pro SPA, protože je pravděpodobně příliš nafouknutá, než aby byla použita pro mikroskopické služby.

Jak poznamenává Cory House:

JavaScript se pohybuje rychle a produkt React vám umožňuje zaměnit malé části aplikace za lepší knihovny místo čekání a doufat, že se vaše framework inovuje. Filozofie malých, skladatelných, jednoúčelových nástrojů nikdy nevyjde z módy.

Někteří lidé používají React i pro jiné webové stránky než SPA (např. Pro komplexní formuláře nebo průvodce). I Facebook používá React - ne pro hlavní stránku, ale spíše pro konkrétní stránky a funkce.

2.8 Velikost a výkon

Existuje veškerá funkčnost, která je obrácena: Úhlová struktura je docela nafouknutá. Velikost souboru gzip je 143 kB, ve srovnání s 23 kB pro Vue a 43 kB pro React.

React a Vue mají virtuální DOM, který má zlepšit výkon. Pokud vás to zajímá, můžete si přečíst o rozdílech mezi Virtuální DOM a DOM a také o skutečných výhodách Virtuální DOM v Reag.js. Také jeden z autorů Virtual-DOM sám odpovídá na otázku týkající se výkonu na Stackoverflow.

Pro kontrolu výkonu jsem se podíval na velký js-framework-benchmark. Můžete si ji stáhnout a spustit sami, nebo se podívat na interaktivní tabulku výsledků. Než zkontrolujete výsledky, měli byste vědět, že rámce podvádějí benchmarky - takováto kontrola výkonu by neměla být používána k rozhodování.

Výkon Úhlové, Reakce a VuePřidělení paměti v MB

Abych to shrnul: Vue má skvělý výkon a nejhlubší alokaci paměti, ale všechny tyto rámce jsou opravdu velmi blízko u sebe ve srovnání se zvlášť pomalými nebo rychlými rámci (jako je Inferno). Znovu: Výkonnostní měřítka by měla být považována pouze za vedlejší poznámku, nikoli za verdikt.

2.9 Testování

Facebook používá Jest k testování svého kódu React. Zde je srovnání mezi Jestem a Mochou - a je zde článek o tom, jak používat Enzyme s Mochou. Enzyme je nástroj pro testování JavaScriptu používaný ve společnosti Airbnb (ve spojení s Jestem, Karmou a dalšími testovacími běžci). Pokud si chcete přečíst více, jsou zde nějaké starší články o testování v Reactu (zde a zde).

V Angular 2 je pak Jasmine jako testovací rámec. V článku od Eric Elliott je výkřik, který říká, že Jasmine „vede k milionům způsobů, jak psát testy a tvrzení, které si musí každý pozorně přečíst, aby pochopil, co dělá“. Výstup je také velmi nafouklý a pracný na čtení. Existuje několik informativních článků o integraci Angular 2 s Karmou a Mochou. Zde je staré video (z roku 2015) o strategiích testování s Angular 2.

Vue postrádá pokyny pro testování, ale Evan ve svém náhledu na rok 2017 napsal, že tým na tom plánuje pracovat. Doporučují použití karmy. Vue spolupracuje s Jestem a je zde také avoriaz jako zkušební nástroj.

2.10 Univerzální a nativní aplikace

Univerzální aplikace zavádějí aplikace na web, na plochu a do světa nativních aplikací.

React a Angular podporují nativní vývoj. Angular má NativeScript (podporovaný Telerikem) pro nativní aplikace a Ionic Framework pro hybridní aplikace. Pomocí React můžete vyzkoušet reaktivně-nativní vykreslovač a vytvářet aplikace pro platformu iOS a Android s křížovou platbou nebo nativní aplikace pro nativní aplikace. Mnoho aplikací (včetně Facebooku; další informace o Showcaseu) jsou vytvořeny s reaktivními.

Rámce Javascript vykreslují stránky na klientovi. To je špatné pro vnímaný výkon, celkovou uživatelskou zkušenost a SEO. Předběžné vykreslování na straně serveru je plus. Všechny tři rámce mají knihovny, které s tím hledají pomoc. Pro React existují next.js, Vue má nuxt.js a Angular má… .Angular Universal.

2.11 Křivka učení

Pro Angular rozhodně existuje strmá křivka učení. Má komplexní dokumentaci, ale někdy se s tím můžete cítit frustrovaní, protože věci jsou složitější, než znějí. I když máte hluboké znalosti o Javascriptu, musíte se naučit, co se děje pod kapotou rámce. Nastavení je na začátku magické a nabízí spoustu zahrnutých balíčků a kódu. To lze považovat za negativní, protože existuje velký, již existující ekosystém, který se musíte časem naučit. Na druhou stranu by to mohlo být v dané situaci dobré, protože již bylo učiněno mnoho rozhodnutí. S aplikací React budete pravděpodobně muset učinit mnoho uvalitelných rozhodnutí, pokud jde o knihovny třetích stran. Existuje pouze 16 různých tokových balíčků pro správu státu, které si můžete vybrat pouze v React.

Vue je docela snadné se naučit. Společnosti přecházejí na Vue, protože se zdá být mnohem jednodušší pro juniorské vývojáře. Zde si můžete přečíst o někom, kdo popisuje pohyb jeho týmu z Angular do Vue. Podle jiného uživatele byla aplikace React ve své společnosti tak složitá, že nový vývojář nedokázal držet krok s kódem. S Vue se mezera mezi vývojáři juniorů a seniorů zmenšuje a mohou spolupracovat snadněji as menším počtem chyb, problémů a času na vývoj.

Někteří lidé tvrdí, že věci, které udělali v Reactu, by bylo lépe napsáno ve Vue. Pokud jste nezkušeným vývojářem Javascriptu - nebo pokud jste v poslední dekádě pracovali hlavně s jQuery - měli byste uvažovat o použití Vue. Posun paradigmatu je výraznější při přechodu na React. Vue vypadá spíše jako obyčejný Javascript a zároveň přináší některé nové nápady: komponenty, model založený na událostech a jednosměrný tok dat. Má také malou stopu.

Mezitím mají Angular a React vlastní způsob, jak dělat věci. Mohou se vám bránit, protože musíte upravit své postupy tak, aby věci fungovaly podle jejich představ. To může být na újmu, protože jste méně flexibilní a je zde strmější křivka učení. Může to být také výhoda, protože jste nuceni se učit správné koncepty při učení technologie. S Vue můžete dělat věci staromódním způsobem Javascript. To může být na začátku jednodušší, ale pokud se věci nebudou dělat správně, může to být z dlouhodobého hlediska problém.

Pokud jde o ladění, je plus, že React a Vue mají méně kouzel. Hledání chyb je snazší, protože existuje méně míst, kde se dá hledat, a stopy zásobníku mají lepší rozlišení mezi vlastním kódem a kódem knihoven. Lidé pracující s React hlásí, že nikdy nemusí číst zdrojový kód knihovny. Při ladění aplikace Angular však často potřebujete ladit vnitřky Angular, abyste porozuměli základnímu modelu. Z jasného hlediska mají být chybové zprávy jasnější a informativní počínaje Angular 4.

2.12 Úhlová, reagující a Vue pod kapotou

Chcete zkontrolovat zdrojový kód sami? Chcete vidět, jak se věci cítí?

Pravděpodobně budete chtít nejdříve zkontrolovat úložiště Github: React (github.com/facebook/react), Angular (github.com/angular/angular) a Vue (github.com/vuejs/vue)

Jak vypadá syntaxe? ValueCoders porovnává syntaxi pro Angular, React a Vue.

Je také dobré vidět věci ve výrobě - ​​ve spojení s podkladovým zdrojovým kódem. TodoMVC uvádí desítky stejné aplikace Todo napsané s různými kostry jazyka Javascript - můžete porovnat řešení Angular, Reactand Vue. RealWorld vytváří aplikaci ve skutečném světě (střední klon) a je připravena řešení pro Angular (4+) a React (s Redux). Vue je nedokončená práce.

Existují také některé aplikace v reálném světě, na které byste se mohli podívat. Zde jsou řešení pro React:

  • Do (pěkná aplikace pro správu poznámek v reálném světě vytvořená pomocí React & Redux)
  • sound-redux (klient Soundcloud postavený s React & Redux)
  • Brainfock (řešení projektového a týmového řízení postavené s React)
  • Reakce-hn & Reakce-zprávy (Hackerovy zpravodajské klony)
  • Reakce-nativní-whatsapp-ui + výukový program (Whatsapp klon s reakcí-nativní)
  • phoenix-trello (klon Trello)
  • slack-clone + další výukový program (Slack clones)

Existuje několik aplikací pro Angular:

  • angular2-hn & hn-ng2 (klony Hacker News + pěkný návod o vytvoření dalšího od Ashwina Sureshkumara)
  • Redux-and-angular-2 (klon Twitter)

Existují také řešení pro Vue:

  • vue-hackernews-2.0 a novinky Loopa (klony hackerů)
  • vue-soundcloud (ukázka Soundcloud)

Závěr

Nyní rozhodněte o rámci

React, Angular a Vue jsou docela v pohodě a žádný z nich není jasně nad ostatními. Věřte svému střevnímu pocitu. Tento poslední kousek zábavného cynismu může pomoci vašemu rozhodnutí:

Špinavé malé tajemství je, že většina „moderního vývoje JavaScriptu“ nemá nic společného se skutečným vytvářením webových stránek - je to vytváření balíčků, které mohou používat lidé, kteří vytvářejí knihovny, které mohou používat lidé, kteří vytvářejí rámce, lidé, kteří píší výukové programy a vyučují kurzy nejsem si jistý, že někdo ve skutečnosti staví cokoli pro skutečné uživatele, se kterými by mohli komunikovat.

To je samozřejmě přehnané, ale pravděpodobně je to zrnko pravdy. Ano, v ekosystému Javascript je hodně bzučení. Během vyhledávání pravděpodobně najdete spoustu dalších atraktivních alternativ - zkuste se oslepit nejnovějším a nejosvětlejším rámcem.

Co si mám vybrat?

Pokud pracujete ve společnosti Google: Angular

Pokud máte rádi TypeScript: Angular (nebo React)

Pokud máte rádi objektově orientované programování (OOP): Úhlové

Pokud potřebujete vedení, strukturu a pomocnou ruku: Úhlové

Pokud pracujete na Facebooku: React

Pokud máte rádi flexibilitu: Reagujte

Pokud máte rádi velké ekosystémy: Reagujte

Pokud si chcete vybrat mezi desítkami balíčků: React

Pokud máte rádi JS a přístup „vše-je-Javascript“: Reagujte

Pokud máte rádi opravdu čistý kód: Vue

Pokud chcete nejjednodušší křivku učení: Vue

Pokud chcete nejlehčí kostru: Vue

Pokud chcete oddělit obavy v jednom souboru: Vue

Pokud pracujete sami nebo máte malý tým: Vue (nebo React)

Pokud má aplikace tendenci být opravdu velká: Úhlová (nebo Reagovat)

Chcete-li vytvořit aplikaci s reakcí-native: React

Pokud chcete mít v bazénu mnoho vývojářů: Angular nebo React

Pokud pracujete s designéry a potřebujete čisté soubory HTML: Úhlové nebo Vue

Pokud máte rádi Vue, ale bojíte se omezeného ekosystému: React

Pokud se nemůžete rozhodnout, nejprve se naučte React, pak Vue, pak Angular.

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