Kdy použít Vue Over React

Vysoce zaujatý článek založený na mé zkušenosti jako přední webový vývojář za poslední čtyři roky.

Ve své současné práci používám React profesionálně, ale pro všechny osobní projekty si vybírám Vue. Je to můj preferovaný rámec. Vue jsem používal v předchozích (veřejně obchodovaných) společnostech a neuvěřitelně dobře se škáloval.

Každý zkušený vývojář vám řekne, že software je jen o kompromisech a házet kolem objektivních prohlášení jako „rámec x je lepší než rámec y“ jsou obecně nesmyslné. Podle jakých metrik? Podle čího názoru? Z tohoto důvodu porovnám Vue a React ve třech hlavních problémech, které si často konkurují kompromisy.

1. Výkon

2. Škálovatelnost

3. Trh práce

Výkon

Při diskuzích o rámcích nebo jazycích chtějí lidé obvykle začít s výkonem. Každý, kdo píše software, buduje další společnost FAANG a každá nanosekunda výkonu musí být extrahována z našeho kódu.

Porovnám oba rámce na dvou složkách výkonu, konkrétně na křemíkovém čase a uhlíkovém čase. Křemíkový čas odkazuje na nezpracovaný výkon provádění – jak rychle může běžet v prohlížeči. Čas uhlíku označuje, jak rychle mohou vývojáři vytvářet produkty v kódu.

Srovnání křemíku v čase

React využívá JSX, což dává vývojářům hodně síly k vytváření libovolně složité logiky. Můžeme využít Turingovu úplnou sílu JavaScriptu a zacházet s naším pohledem jako s daty. Něco jako Svelte využívá pro označení šablony, které poskytují vrstvě zobrazení pevnou strukturu.

React i Vue používají virtuální DOM (VDOM), který, i když je prakticky dostatečně rychlý, je ze své podstaty drahý a téměř čistě režijní. Svelte kompiluje kód šablony do nezpracovaného JS a přímo manipuluje s DOM, což znamená, že nemá výkonovou režii na údržbu VDOM.

Na Vue miluji to, že trochu jistí své sázky. Nejběžnějším způsobem použití Vue je použití šablon v jednosouborových komponentách. To umožnilo týmu Vue udělat několik velmi chytrých věcí v nadcházející verzi Vue 3 s předběžnými (AOT) optimalizacemi.

Strukturovaná povaha šablon znamená, že kompilátor může vědět věci o vašem kódu a provádět optimalizace. Hlavní optimalizací, kterou Vue zavádí, je odstranění všech statických dat z rozdílu VDOM. Výkon VDOM je přímo ovlivněn počtem uzlů, které musí sledovat. Odfiltrováním statických dat z tohoto procesu porovnání VDOM můžeme snížit počet sledovaných uzlů. Díky tomu kód běží mnohem rychleji, protože nemusí porovnávat rekurzivní strom libovolných uzlů v každém vykreslovacím cyklu.

I když se zdá, že Vue ve většině případů používá šablony, kompilátor tyto šablony ve skutečnosti přemění na funkce vykreslování pro vás pod pokličkou. To znamená, že kdykoli se vám šablona Vue dostane do cesty, můžete se přímo rozbalit a napsat funkce vykreslování přesně jako v Reactu. To znamená, že získáte veškerou flexibilitu funkcí vykreslování a JSX, kterou získáte v Reactu, s některými výkonnostními výhodami, které získáte od šablonovaného rámce, jako je Svelte. Je zřejmé, že pokud napíšete aplikaci Vue se 100% vykreslovacími funkcemi, ztratíte všechny optimalizace šablony.

Srovnávací testy kódu jsou podle mého názoru trochu ztráta času, ale některé ukazují Vue 2 přibližně 2,5x rychleji než výchozí React a Vue 3 je benchmarking 3-5x rychlejší než Vue 2. V praxi používaný rámec JS bude tak malou součástí vaší aplikace, že tyto benchmarky téměř postrádají smysl. Pokud však vytváříte šablony, které budou využívat optimalizace AoT od Vue 3 ze šablon, neexistuje způsob, jak bude stejná aplikace rychleji napsána v Reactu.

Vítěz:Vue

Výkon v době uhlíku

Senior vývojář vás bude stát kolem 150 $/h v závislosti na tom, kde na světě se nacházíte. Dokonce i vývojáři nižší až střední úrovně vydělávají dost dobrý plat, který chcete zahrnout do času a nákladů na vývoj ve svém technickém zásobníku. To je důvod, proč jsou jazyky jako PHP, Python, Node, Ruby atd. tak oblíbené a nepíšeme vše jen v C.

U frontendových aplikací jsme omezeni prohlížečem, zdroji zařízení a latencí sítě, takže křemíkový výkon je stále přispívajícím faktorem – ale uhlíkový výkon by měl být také v popředí mysli každého CTO.

Podle mého názoru byla jediným největším faktorem, který přispěl k úspěchu Vue, jeho přístupná dokumentace, zdroje a snadné učení. Naučil jsem se React a Vue současně a s Vue bylo znatelně jednodušší začít. Pokud znáte HTML, CSS a holé základy JS, můžete vytvořit aplikaci s Vue. Strávil jsem půl dne s návrhářským týmem a nechal jsem je poslat změny do produkčních frontendů ve Vue. To uvolňuje mnoho času vývojářskému týmu a umožňuje návrhářům implementovat A/B testy a aktualizace návrhu, aniž by byli blokováni nedostatkem softwaru.

Jedna z věcí, které na Vue miluji, je vrstvený design jeho volitelných nástrojů. Můžete začít stažením Vue přes CDN. To znamená, že s ním můžete hrát, aniž byste museli procházet složitými kroky sestavení (webpack/Babel config, npm atd.). Poté můžete přejít do Vue CLI a vytvářet základní aplikace. Pokud pak potřebujete řešení správy stavu, existuje oficiálně podporované a zdokumentované řešení ve společnosti Vuex. Podobně je Vue Router oficiálně schváleným a podporovaným řešením směrovače pro Vue.

Na druhou stranu React zavádí paradox volby, který může nováčkům ztížit situaci.

React je malorozsahová, jednoúčelová knihovna, která zavádí model komponent, který přijímá rekvizity a vrací strom VDOM. To poskytuje velkou flexibilitu a komunita React vybudovala na této jednoduché knihovně mnoho složitých systémů.

Existuje velký ekosystém s mnoha a mnoha možnostmi řešení úkolů. Ty jsou spravovány nezávisle uživateli. Tento model poskytuje lidem spoustu příležitostí, jak stavět věci na Reactu a vytvářet oblíbené knihovny a nástroje.

Také to velmi ztěžuje hledání a učení. Zasekli jste se při výběru nejlepší možnosti pro správu stavu nebo směrování nebo konfiguraci nové aplikace. Podle mých zkušeností to také ztěžuje najímání vývojářů React. Když existuje více způsobů, jak dělat věci, začlenění nových členů do projektu React má větší odpor než přihlášení do projektu Vue.

Vítěz:Vue

Škálovatelnost

Většiny mých myšlenek o škálovatelnosti těchto rámců jsem se dotkl v sekci výkonu. Škálovatelnost je často neodmyslitelně spojena s výkonem, takže to není překvapivé.

Obecně přemýšlím o škálovatelnosti ve smyslu:

Škálování počtu zobrazení/součástí/pracovních postupů v aplikaci

Pokud jde o škálování počtu komponent, jsem opravdu velkým fanouškem komponenty s jedním souborem (SFC). Logické seskupení komponenty mi dává velký smysl. Mnoho lidí s tím nesouhlasí a je to spíše věc názoru než objektivního prohlášení.

Důvod, proč miluji SFC, je ten, že poskytují skvělý způsob, jak vynutit oddělení obav (SoC).* *Někteří lidé tvrdí, že smíchání HTML, CSS a JavaScript dělá opak než oddělování obav. Změnil jsem způsob, jakým o tomto principu přemýšlím na frontendu, především díky svému obsedantnímu přijetí Tailwind CSS pro stylování mých komponent.

Adam Wathan napsal skvělý článek o pojmu SoC a o tom, jak se vztahuje na HTML a CSS. Podobně přemýšlím o svých frontendových komponentách. Podle mého názoru je součástí to, jak vypadá (HTML/CSS) a jak to funguje. Oddělení označení od JS mi připadá libovolné. Pokud považujete svá zobrazení za data, pak (podle mě) dává smysl je seskupit s vašimi daty.

Nenechte mě ani začít s JSX a CSS-in-JS. HTML a CSS nejsou mrtvé. Jsou neuvěřitelně mocnými stavebními kameny webu. Použijte je!

Výhody oficiálně podporovaných řešení běžných problémů jsou také užitečné ve velkém měřítku. Pokud máte potíže se škálováním aplikace Vue, je pravděpodobné, že jakákoli jiná aplikace Vue ve velkém měřítku použila stejnou architekturu a vy budete moci najít radu a pomoc. Nemusíte se bát, že by lidé říkali:„Stačí použít hooks/MobX/Redux/Redux-Saga.“

Škálování počtu vývojářů v týmu

Již jsem se zmínil, že jsem již dříve viděl designérský tým, který byl zmocněn prosadit změny do výroby s několikahodinovou pomocí. To je šílené zvýšení produktivity jakékoli aplikace pro spotřebitele.

Obecný konsenzus, že Vue je snazší se naučit, také znamená, že můžete vyškolit juniorské vývojáře k bodu čistého přínosu pro tým mnohem rychleji. Můžete také zapojit vývojáře Reactu (za předpokladu, že zná HTML a CSS) s malým úsilím.

Opět platí, že díky konzistentním řešením běžných problémů je kontrola kódu a uvažování o rozsáhlé kódové základně mnohem jednodušší pro všechny v týmu.

Klíčovou věcí u obou je zachování rychlosti vývoje při zachování výkonné aplikace, která splňuje potřeby vašich uživatelů. Vue zde dosahuje dokonalé rovnováhy, pokud jde o mě.

Vítěz:Vue

Trh práce

Dobře, takže jsem vás přesvědčil, že Vue je ve všech myslitelných ohledech lepší než React. Ale to nemá smysl, pokud nemůžete dostat zaplaceno (nebo najít vývojáře, které si najmete).

React má mnohem vyšší podíl na trhu práce (alespoň v Austrálii a Spojených státech). Pokud se podíváte na většinu pracovních míst, počet nabídek React inzerovaných ve srovnání s Vue je významný (téměř 8x tolik nabídek React v době psaní tohoto článku na základě 10 sekund hledání pracovních míst).

I když se zdá, že React v této metrice vítězí, odmítám, aby React získával body na hrací ploše, takže uvedu následující (vodotěsný, nenapadnutelný) argument.

Na trhu práce existují příležitosti pro React i Vue. Pro společnosti využívající Vue nebo React je obtížné najmout a podle mých zkušeností je pro oba nedostatek dovedností. Jako někdo, kdo hledá práci, můžete dosáhnout ovládnutí (nebo vnímaného ovládnutí) Vue mnohem rychleji než s Reactem. To znamená, že byste měli získat zrychlenou cestu k vyšším platům. Budete mít také menší konkurenci při pohovorech, protože React je stále nejoblíbenější volbou pro mnoho vývojářů, kteří jsou v současnosti obětí klamu utopených nákladů.

Jako společnost nebo manažer náboru, který se obává soutěže o talenty na současném trhu, Vue nabízí příležitost vybudovat více produktů na zdroj (výhody Vue z hlediska uhlíkového času) a rozvíjet svůj vlastní talent (rychlejší křivka učení). Výběr Vue pro projekty na zelené louce nebo nový startup může být tím nejlepším rozhodnutím, jaké jste kdy udělali, pokud jde o nábor.

Jak si více společností uvědomuje výhody Vue, věřím, že bude i nadále polykat podíl na trhu – a v budoucnu může dokonce předběhnout React jako rámec výběru.

Vítěz:Remíza

Závěr a závěrečné poznámky

Toto byl článek o Vue a proč si myslím, že je lepší než React. Myslím, že React je naprosto rozumný nástroj pro vytváření frontendů a netvrdím, že je špatný. Jen věřím, že Vue dosáhlo lepší rovnováhy v designu frameworku.

Vybral bych React over Vue v následujících scénářích:

• Chcete pracovat někde, kde se používá React – např. Facebook

• Máte tým zkušených vývojářů React

• Je jednodušší najmout si React ve vaší oblasti

Upřímně si nemyslím, že existuje jediný technický důvod, proč bych si vybral React před Vue pro druh aplikací, které stavím nebo na kterých pracuji. To neznamená, že žádný neexistuje, ale zatím jsem na něj prostě nenarazil.

Svelte a Elm jsou neuvěřitelně zajímavé možnosti, které pozorně sleduji, ale nejsem si v tuto chvíli jistý jejich životaschopností pro rozsáhlé podnikové aplikace.

Pokud se chcete naučit Vue, vřele doporučuji tento bezplatný kurz od úžasné Jeffrey Way.