Obsah
- 01. Úhlové
- 02. Reagovat
- 03. Vue
- Jak se porovnává syntaxe rámců?
- Popularita a trh
- Vývoj mobilních aplikací
- Další rámce, na které je třeba dávat pozor v roce 2020
- Závěr
V roce 2020 jsme požehnáni řadou rámců a knihoven, které nám pomohou s vývojem webu. Ale nebylo vždy tolik rozmanitosti. V roce 2005 vytvořil nový skriptovací jazyk zvaný Mocha muž jménem Brendan Eich. Měsíce po přejmenování na LiveScript byl název znovu změněn na JavaScript. Od té doby prošel JavaScript dlouhou cestou.
V roce 2010 jsme jako první rámce JavaScriptu viděli zavedení Backbone a Angular a do roku 2016 používalo JavaScript 92 procent všech webů. V tomto článku se podíváme na tři hlavní rámce JavaScriptu (Angular, React a Vue) a jejich stav směřující do příštího desetiletí. Chcete vytvořit vlastní web? Vyzkoušejte tento seznam tvůrců webových stránek.
Pokud jde o skvělé zdroje, podívejte se na náš seznam nejlepších nástrojů pro webový design, naši nabídku webhostingových služeb a také tento seznam vynikajícího softwaru pro testování uživatelů.
01. Úhlové
AngularJS byl vydán v roce 2010, ale do roku 2016 byl kompletně přepsán a vydán jako Angular 2. Angular je plnohodnotný webový rámec vyvinutý společností Google, který používají Wix, Upwork, The Guardian, HBO a další.
Profesionálové:
- Výjimečná podpora pro TypeScript
- MVVM umožňuje vývojářům oddělit práci na stejné sekci aplikace pomocí stejné sady dat
- Vynikající dokumentace
Nevýhody:
- Má trochu křivku učení
- Migrace ze staré verze může být obtížná.
- Aktualizace se zavádějí poměrně pravidelně, což znamená, že se jim vývojáři musí přizpůsobit
Co bude dál?
V Angular 9 je Ivy výchozí kompilátor. Bylo zavedeno k řešení mnoha problémů týkajících se výkonu a velikosti souborů. Mělo by to dělat aplikace menší, rychlejší a jednodušší.
Když porovnáte předchozí verze Angular s React a Vue,
konečné velikosti svazků byly při použití Angular mnohem větší. Ivy také umožňuje Progressive Hydration, což je něco, co tým Angular předvedl na I / O 2019. Progressive Hydration používá Ivy k postupnému načítání na server a klienta. Například jakmile uživatel začne komunikovat se stránkou, bude se po částech načítat kód komponent spolu s jakýmkoli běhovým modulem.
Ivy se zdá být pro Angular velkým zaměřením a doufáme, že bude k dispozici pro všechny aplikace. Ve verzi 9 bude možnost odhlášení, až po Angular 10.
02. Reagovat
React byl původně vydán v roce 2013 společností Facebook a používá se k vytváření interaktivních webových rozhraní. Používá ho například Netflix, Dropbox, PayPal a Uber.
Profesionálové:
- React používá virtuální DOM, což má pozitivní dopad na výkon
- JSX se snadno píše
- Aktualizace neohrožují stabilitu
Nevýhody:
- Jednou z hlavních překážek je potřeba knihoven třetích stran k vytváření složitějších aplikací
- Vývojáři zůstávají ve tmě ohledně nejlepšího způsobu rozvoje
Co bude dál?
Na React Conf 2019 se tým React dotkl mnoha věcí, na kterých pracovali. První je Selective Hydration, kde React pozastaví vše, na čem pracuje, aby upřednostnil komponenty, se kterými uživatel interaguje. Když uživatel jde do interakce s konkrétní částí, bude tato oblast hydratována. Tým také pracoval na Suspense, což je systém společnosti React pro orchestraci načítání kódu, dat a obrázků. To umožňuje komponentám čekat na něco, než se vykreslí.
Selective Hydration i Suspense umožňuje Concurrent Mode, který umožňuje aplikacím lépe reagovat tím, že dává React možnost vstoupit do velkých bloků prací s nižší prioritou, aby se mohl soustředit na něco, co má vyšší prioritu, jako je reakce na vstup uživatele. Tým také zmínil přístupnost jako další oblast, na kterou se dívali, zaměřením na dvě konkrétní témata - správu zaměření a vstupní rozhraní.
03. Vue
Vue vyvinul v roce 2014 bývalý zaměstnanec společnosti Google Evan You. Používají jej společnosti Xiaomi, Alibaba a GitLab. Vue se podařilo získat popularitu a podporu vývojářů v krátkém čase a bez podpory významné značky.
Profesionálové:
- Velmi lehký
- Přátelský pro začátečníky - snadno se učí
- Skvělá komunita
Nevýhody:
- Není podporováno velkou společností, jako React with Facebook and Angular with Google
- Žádná skutečná struktura
Co bude dál?
Vue si stanovila za cíl být rychlejší, menší, udržovatelnější a usnadnit vývojářům cílit na nativní reklamy (pokud máte potíže s údržbou, zvažte webhostingovou službu). Příští vydání (3.0) má vyjít v Q1 2020, který zahrnuje virtuální přepis DOM pro lepší výkon spolu s vylepšenou podporou TypeScript. K dispozici je také přidání rozhraní Composition API, které poskytuje vývojářům nový způsob vytváření komponent a jejich uspořádání podle funkcí namísto provozu.
Ti, kteří vyvíjejí Vue, byli také zaneprázdněni prací na Suspense, která pozastaví vykreslování vaší komponenty a vykresluje záložní komponentu, dokud není splněna podmínka.
Jednou z velkých věcí s aktualizacemi Vue je, že udržují zpětnou kompatibilitu. Nechtějí, abyste prolomili své staré projekty Vue. Viděli jsme to při migraci z 1,0 na 2,0, kde 90 procent API bylo stejné.
Jak se porovnává syntaxe rámců?
Všechny tři rámce prošly od jejich vydání změnami, ale jedna věc, kterou je důležité pochopit, je syntaxe a to, jak se liší. Pojďme se podívat na to, jak se porovnává syntaxe, pokud jde o jednoduchou vazbu událostí:
Vue: The v-on Direktiva se používá k připojení posluchačů událostí, které vyvolávají metody v instancích Vue. Směrnice mají předponu proti- za účelem označení, že se jedná o speciální atributy poskytované společností Vue, a použití zvláštního reaktivního chování na vykreslený DOM. Obslužné rutiny událostí lze zadat buď inline, nebo jako název metody.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, methods: {clickHandler: function () {console.log (“I was clicked! “); }}}; / skript>
Reagovat: React vloží značku a logiku do JS a JSX, rozšíření syntaxe k JavaScriptu. U JSX je funkce předána jako obslužná rutina události. Zpracování událostí pomocí prvků React je velmi podobné zpracování událostí u prvků DOM. Ale existují určité syntaktické rozdíly; například události React jsou pojmenovány pomocí camelCase, spíše než malými písmeny.
function Button () {function clickHandler (e) {console.log („I was clicked“); } návratové tlačítko onClick = {clickHandler}> Klikněte na mě! / tlačítko>; }
Úhlové: Syntaxe vazby události se skládá z názvu cílové události v závorkách vlevo od znaménka rovná se a citovaného příkazu šablony vpravo. Případně můžete použít na- předpona, známá jako kanonická forma.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`})) export class ClickMeComponent {onClickMe () {console.log (“ Klikli jste na mě! “); }}
Popularita a trh
Začněme tím, že se podíváme na celkový obraz tří rámců, pokud jde o zbytek webu, zkoumáním statistik z W3Techs. Angular v současné době používá 0,4 procenta všech webových stránek, přičemž podíl na trhu knihoven JavaScript činí 0,5 procenta. React používá 0,3% všech webů a 0,4% podíl na trhu knihoven JavaScript a Vue má 0,3% pro oba. To se zdá být docela rovnoměrné a očekávali byste, že počty vzrostou.
Trendy Google: Za posledních 12 měsíců je React nejoblíbenější z hlediska vyhledávání, těsně následovaný Angular. Vue.js je docela pozadu; je však třeba si pamatovat, že Vue je ve srovnání s ostatními dvěma stále mladá.
Hledání zaměstnání: V době psaní tohoto článku jsou React a Angular velmi úzce spjaty, pokud jde o výpisy pracovních míst, na Indeed s Vue daleko za sebou. Na LinkedIn se však zdá, že existuje větší poptávka po vývojářích Vue.
Přetečení zásobníku: Pokud se podíváte na výsledky průzkumu Stack Overflow Developer Survey pro rok 2019, React a Vue.js jsou nejoblíbenější a nejžádanější webové rámce. Úhlová sedí na deváté pozici pro nejoblíbenější, ale třetí nejhledanější.
GitHub: Vue má největší počet hvězdiček s 153 tis., Ale má nejnižší počet přispěvatelů (283). React na druhé straně má 140 tisíc hvězd a 1341 přispěvatelů. Angular má pouze 59,6 tis. Hvězd, ale má nejvyšší počet přispěvatelů ze tří s 1579.
Trendy NPM: Obrázek výše ukazuje statistiky za posledních 12 měsíců, kde můžete vidět, že React má vyšší počet stažení za měsíc ve srovnání s Angular a Vue.
Vývoj mobilních aplikací
Jedno hlavní zaměření pro velké tři je mobilní nasazení. React má React Native, který se stal populární volbou pro vytváření aplikací pro iOS a Android nejen pro uživatele React, ale také pro širší komunitu vývojářů aplikací. Úhloví vývojáři mohou používat NativeScript pro nativní aplikace nebo Ionic pro hybridní mobilní aplikace, zatímco vývojáři Vue mají na výběr NativeScript nebo Vue Native. Vzhledem k popularitě mobilních aplikací to zůstává klíčovou oblastí investic.
Další rámce, na které je třeba dávat pozor v roce 2020
Pokud chcete v roce 2020 vyzkoušet něco nového, podívejte se na tyto rámce JavaScriptu.
Žhavý: Rámec open-source pro vytváření webových aplikací, který funguje na základě vzoru MVVM. Používá jej několik velkých společností, jako je Microsoft, Netflix a LinkedIn.
Meteor: Full-stack JavaScript platforma pro vývoj moderních webových a mobilních aplikací. Je snadné se učit a má velmi podpůrnou komunitu.
Závěr
Všechny tři rámce se neustále zlepšují, což je povzbudivým znamením. Každý má svou vlastní perspektivu a upřednostňované řešení, které by měl použít, ale skutečně to závisí na velikosti projektu a díky kterému se budete cítit pohodlněji.
Nejdůležitějším aspektem je trvalá podpora jejich komunit, takže pokud plánujete zahájit nový projekt a nikdy předtím jste žádný ze tří nepoužívali, pak věřím, že jste se všemi v bezpečí. Pokud jste dosud neměli šanci naučit se žádný ze tří rámců, navrhuji, abyste si jako novoroční předsevzetí začali učit. Budoucnost se bude točit kolem těchto tří.
Tento obsah se původně objevil v internetovém časopise.
