Úhlový vs. Vue.js - praktický srovnávací průvodce

Moderní front-end vývoj se v posledních několika desetiletích dramaticky změnil. Jako front-endový vývojář, kdykoli přemýšlím o moderním front-endovém vývoji, přicházejí na mysl tři slibné technologie, o kterých se domnívám, že většina z vás může snadno hádat -

  1. Google's Angular
  2. Facebook's React
  3. Vue.js

Každá z nich přichází s vlastní sadou silných a slabých stránek. Co bych měl použít pro svůj další projekt, pokud by to byl React nebo Angular nebo Vue.js, je velmi častá otázka, která se chvěje v mysli každého front-endového programátora.

Na základě svých zkušeností píšu tento blog, abych porovnal dva z největších hráčů na front-end vývojovém trhu, tj. Angular (Být nejstarší ze tří z nich) a Vue (Být nejmladší z dané kohorty) a pokusím se najít odpověď, co byste měli použít ve vašem příštím projektu. Pokud chcete najít srovnání mezi a React a Vue.js, najdete je zde v tomto blogu.

Než zahájíme debatu o výhodách a nevýhodách těchto dvou, prozkoumejme historii Vue a Angular.

Úhlové

Úhlový je rámec JavaScriptu založený na TypeScript. Angular je vyvíjen a udržován společností Google a je přepsaným, nekompatibilním nástupcem AngularJS. Zatímco AngularJS byl původně uveden na trh v říjnu 2010 a Angular byl představen v září 2016 jako verze 2.

Existuje mnoho výhod použití Angular ve vývoji front-endu na webu -

  • Je to všechno MVC

Hlavní myšlenkou modelu Model View Controller nebo MVC je rozdělení aplikace na 3 hlavní logické komponenty viz. model, pohled a řadič, aby se izolovala aplikační logika od vrstvy uživatelského rozhraní.

  • Podpora TypeScript již po vybalení

TypeScript je nadmnožina JavaScriptu s návrhovou podporou pro zabezpečení typu a nástroje. Dostupnost typů způsobuje, že kód napsaný v TypeScript je méně náchylný k chybám při běhu.

  • Vlastněno společností Google

Podporováno technologickým gigantem Google. Poskytuje novou úhlovou verzi po každých šesti měsících.

  • Vstřikování závislostí

AngularJS přichází s integrovaným subsystémem závislosti závislostí, který zjednodušuje proces testování jednotky.

Vue

Vue je také rámec JavaScriptu, který poprvé vyšel v únoru 2014 bývalý zaměstnanec Google Evan You. Vue je nejrychleji rostoucí rámec JS, zejména bez podpory jakékoli velké společnosti. Vue zdědí většinu dobrých věcí od React a Angular, a proto někteří technici považují to za neoficiální dítě Angular and React.

Použití Vue ve vývoji front-endu webu má několik výhod -

  • Je to malá velikost

Velikost tohoto rámce je 18–21 kB a jeho stahování a používání uživateli netrvá dlouho. To neznamená, že jeho výkon je ohrožen - ve skutečnosti překonává všechny objemné rámce jako React.js, Angular.js a Ember.js.

  • Je to relativně snadné

Osobně jsem velkým fanouškem Vue. Je to velmi snadné se učit - ve skutečnosti jsem byl schopen se naučit a přizpůsobit Vue v úkolech každodenního vývoje za méně než dva týdny.

  • Dokumentace Vue je chvályhodná

Přestože není podporována organizacemi s více miliardami dolarů, jako je Google nebo FB, stále se dokázala vyvíjet ve velmi krátkém časovém období a zajistila, že aktualizace nejsou tak složité, aby nasákly, jako tomu bylo u některých ostatních dominantních názvů na trhu.

  • Nabízí velkou flexibilitu

Umožňuje svým uživatelům psát své šablony do souboru JavaScriptu, HTML a čistého souboru JavaScript pomocí virtuálních uzlů. Tato flexibilita také činí nenáročné porozumět vývojářům React, Angular nebo jiným vývojářům JS.

Srovnání

Zde jsou některé klíčové parametry, na základě kterých porovnáme rámce Angular a Vue-

  • Jak jsou tyto rámce zralé?
  • Kolik jsou kompatibilní s různými velikostmi aplikací?
  • A co křivka učení pro každý z těchto rámců?
  • Jak moc jsou tyto rámce pro vývojáře / vývoj příznivé?
  • Jaký výkon očekáváte od aplikace?
  • Jak můžete začít strukturovat svou aplikaci s vybraným rámcem?
  • Je pravděpodobné, že tento rámec splní vaši škálovatelnost projektu?

Připravit - pozor - teď!

1. Komunita a popularita

Rozhodně Angular je populárnější mezi velkými společnostmi. Má velkou komunitu a podporuje Google.

Vue také rychle roste a v posledních letech si od vývojářů získala hodně trakce.

Je to malá komunita a nemá žádnou velkou podporu společnosti

Když mluvíme o statistikách-

Na Githubu má Angular> 41 000 hvězd a 730 přispěvatelů a Vue má téměř 114 000 hvězd a pouze 193 přispěvatelů.

Na hvězdách Github Stars, History for Angular, React and Vue se opět zdá, že Vue má velmi dobré trendy. Podle bestof.js získává Angular v průměru 37 hvězd a Vue 135 hvězd denně.

Zdroj: Střední

2. Syntaxe a kódová délka

Při práci na obou rámcích jsem si všiml, že Angular používá složitější syntaxi, zatímco Vue je snadné se naučit kvůli jeho jednoduchosti z hlediska syntaxe. Čas, který jsem v Angular strávil jednoduchými věcmi, je víc. Někdy její složitost často vede k nejasnostem.

Vue je snadné se naučit kvůli své nekomplikované povaze syntaxe. Zde je syntaxe čistá a čistá. A z pozadí JavaScriptu je pro mě docela snadné naučit se Vue. Protože Angular používá TypeScript (použití dekoratérů a injektorů), měli bychom mít základní znalosti TypeScript nebo pracovat na konceptu OOPS.

3. Struktura

Úhel je strukturovanější a propracovanější. Nutí vývojáře dělat vše standardním způsobem. Hlavně velké podnikové projekty se spoléhají na Angular kvůli své předdefinované struktuře, která zajišťuje, že každý vývojář sleduje stejnou architekturu.

Vue je flexibilnější a umožňuje vývojáři strukturovat projekt tak, jak chcete. Umožňuje uživateli zapsat svou šablonu do souboru HTML nebo Javascript. Angular můžete použít, pokud je vaše osobní preference TypeScript a OOPS. Vue navíc poskytuje strojopis pro vývoj projektů, ale není v něm mnoho knihoven.

4. Škálovatelnost kódu

Když se chystáte na masivní kódovou základnu, Angular je dobrá, pokud jde o škálovatelnost kódu, protože díky plnohodnotnému rámci je vývojář vázán k vývoji kódu ve specifické struktuře kódu.

Na druhé straně Vue.js chybí seznam nejlepších praktik škálování. Neexistuje žádná konkrétní aplikační struktura aplikovaná na uživatele z Vue.js, která by následovala, což je velmi důležité, když budete mít velkou kódovou základnu.

5. Vestavěné knihovny

Protože je Vue nová, má méně specifické knihovny, takže musíte explicitně zahrnout většinu knihoven třetích stran.

Angular má tolik knihoven specifických pro určitý rámec a také většina knihoven je zahrnuta dříve v projektu Angular-CLI.

Například - Knihovna jako RxJS je zabudována v projektech Angular CLI, ale ve Vue musíte explicitně nainstalovat další knihovny včetně RxJS, aby fungovala.

Angular má také vestavěné knihovny specifické pro API, které vývojář nemusí explicitně instalovat. Vue nepřichází s knihovnou specifickou pro API a pro volání API musí používat knihovnu AXIOS explicitně.

6. Výkon

Díky konceptu Virtual-DOM je Vue výkonnější ve srovnání s Angular.

Na druhou stranu Angular používá k vykreslování dat hlídače.

Začněme s virtuální DOM. Předpokládejme, že máte dynamickou tabulku n řádků.

Nyní se v prvním řádku něco změní. Většina rámců dělá znovu sestavit a znovu vykreslit celý seznam. Je to nkrát více práce, než je nutné, protože musíme aktualizovat pouze první řádek.

Nenechme se podívat, co virtuální DOM udělá v této situaci.

Před jakoukoli aktualizací vytvoří kopii DOM a pracuje s touto kopií. Po aktualizaci virtuální DOM ji porovná se starší verzí, která byla zachycena před aktualizací, a najde prvky, které je třeba aktualizovat. Po kontrole rozdílu jsou v reálném DOM aktualizovány pouze ty části, které jsou změněny.

7. Mimo web

Úhlový přichází s iontovým a nativním skriptem pro vývoj mobilních aplikací. Vue je nejlepší volbou pro vývojáře, kteří mají nativní mobilní vývoj pomocí Alibaba Weex a Vue-Native, ale to vše je ve srovnání s Ionic docela nové.

Žádná z těchto mobilních struktur jim však neumožňuje dosáhnout výkonu React Native.

souhrn

Vue.js je velmi lehký a snadno naučitelný framework, který vám umožní vytvářet ohromující aplikace. Mezi vývojáři není tak slavná jako Angular (udržovaná společností Google), ale rozhodně vytváří hlavní vlny změn. Možná to nevíte, ale Laravelova komunita to také považovala za jeden ze svých preferovaných front-end rámců. Úhlová je velmi rozvinutý rámec a má hned několik nástrojů. Na základě níže uvedených klíčových bodů se můžete rozhodnout,

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

My v Systango máme skupinu expertních front-end a full-stack vývojářů, kteří jsou všichni zběhlí v navrhování všeho elegantního a ostrého. Používáme všechny nejmodernější technologie včetně React, Angular a Vue.js, abychom vytvořili zplnomocnění a bezproblémové online zážitky.

Diskutujte o svém dalším projektu - rádi bychom od vás slyšeli!

Tento článek byl původně publikován na Systango Technologies.