Obsah
- 01. Uhlové
- 02. Reagovať
- 03. Vue
- Ako porovnáva syntax rámcov?
- Popularita a trh
- Vývoj mobilných aplikácií
- Ďalšie rámce, na ktoré si treba dať pozor v roku 2020
- Záver
V roku 2020 máme veľa rámcov a knižníc, ktoré nám pomáhajú pri vývoji webových aplikácií. Ale nie vždy tam bolo toľko rozmanitosti. V roku 2005 vytvoril nový skriptovací jazyk s názvom Mocha chlapík menom Brendan Eich. Mesiace po premenovaní na LiveScript sa názov opäť zmenil na JavaScript. Od tej doby prešiel JavaScript dlhou cestou.
V roku 2010 sme ako prvé rámce JavaScriptu videli zavedenie Backbone a Angular a do roku 2016 používalo Javascript 92 percent všetkých webových stránok. V tomto článku sa pozrieme na tri hlavné rámce JavaScriptu (Angular, React a Vue) a ich stav smerujúci do budúceho desaťročia. Chcete si vytvoriť svoj vlastný web? Vyskúšajte tento zoznam tvorcov webových stránok.
Ak sa chcete dozvedieť viac skvelých zdrojov, pozrite si náš zoznam špičkových nástrojov pre návrh webových aplikácií, našu ponuku webhostingových služieb a tiež zoznam vynikajúceho softvéru na testovanie používateľov.
01. Uhlové
AngularJS bol vydaný v roku 2010, ale do roku 2016 bol úplne prepísaný a vydaný ako Angular 2. Angular je plnohodnotný webový rámec vyvinutý spoločnosťou Google, ktorý používajú programy Wix, Upwork, The Guardian, HBO a ďalšie.
Klady:
- Výnimočná podpora pre TypeScript
- MVVM umožňuje vývojárom oddeliť prácu na tej istej sekcii aplikácie pomocou rovnakej množiny údajov
- Vynikajúca dokumentácia
Zápory:
- Má trochu krivku učenia
- Migrácia zo starej verzie môže byť zložitá.
- Aktualizácie sa zavádzajú pomerne pravidelne, čo znamená, že sa im vývojári musia prispôsobiť
Čo bude ďalej?
V Angular 9 je Ivy predvoleným kompilátorom. Bolo zavedené s cieľom vyriešiť množstvo problémov týkajúcich sa výkonu a veľkosti súborov. Mal by aplikácie zmenšiť, zrýchliť a zjednodušiť.
Keď porovnáte predchádzajúce verzie Angular s React a Vue,
konečné veľkosti zväzkov boli pri použití Angular oveľa väčšie. Ivy tiež umožňuje Progressive Hydration, čo je tím, ktorý Angular team predviedol na I / O 2019. Progressive Hydration využíva Ivy na postupné načítanie na server a klienta. Napríklad keď používateľ začne komunikovať so stránkou, bude sa po častiach načítavať kód komponentov spolu s akýmkoľvek runtime.
Ivy sa javí pre Angular ako veľké zameranie do budúcnosti a dúfame, že bude k dispozícii pre všetky aplikácie. Vo verzii 9 bude k dispozícii možnosť deaktivácie až po Angular 10.
02. Reagovať
React bol pôvodne vydaný v roku 2013 spoločnosťou Facebook a používa sa na vytváranie interaktívnych webových rozhraní. Používa ho napríklad Netflix, Dropbox, PayPal a Uber.
Klady:
- React používa virtuálny DOM, čo má pozitívny vplyv na výkon
- JSX sa ľahko píše
- Aktualizácie neohrozujú stabilitu
Zápory:
- Jednou z hlavných prekážok je potreba knižníc tretích strán na vytváranie zložitejších aplikácií
- Vývojári sú ponechaní v tme, pokiaľ ide o najlepší spôsob rozvoja
Čo bude ďalej?
Na React Conf 2019 sa tím React dotkol mnohých vecí, na ktorých pracovali. Prvou je selektívna hydratácia, kde React pozastaví čokoľvek, na čom pracuje, aby určil priority komponentov, s ktorými používateľ interaguje. Keď používateľ bude interagovať s konkrétnou časťou, bude táto oblasť hydratovaná. Tím pracoval aj na Suspense, čo je systém spoločnosti React na orchestráciu načítania kódu, údajov a obrázkov. Toto umožňuje komponentom čakať na niečo, kým sa vykreslia.
Selective Hydration aj Suspense umožňuje Concurrent Mode, ktorý umožňuje aplikáciám pohotovejšie tým, že Reactu umožňuje vstupovať do veľkých blokov prác s nižšou prioritou, aby sa mohli sústrediť na niečo, čo má vyššiu prioritu, napríklad na reakciu na vstup používateľa. Tím tiež spomenul dostupnosť ako ďalšiu oblasť, na ktorú sa zamerali, zameraním na dve konkrétne témy - riadenie zamerania a vstupné rozhrania.
03. Vue
Program Vue vyvinul v roku 2014 bývalý zamestnanec spoločnosti Google Evan You. Používajú ho spoločnosti Xiaomi, Alibaba a GitLab. Spoločnosti Vue sa podarilo získať popularitu a podporu vývojárov v krátkom čase a bez podpory významnej značky.
Klady:
- Veľmi ľahká veľkosť
- Priateľský k začiatočníkovi - ľahko sa naučí
- Skvelá komunita
Zápory:
- Nepodporuje ich veľká spoločnosť, napríklad React with Facebook and Angular with Google
- Žiadna skutočná štruktúra
Čo bude ďalej?
Spoločnosť Vue si dala za cieľ byť rýchlejšia, menšia, udržiavateľnejšia a uľahčiť vývojárom zacielenie na natívne reklamy (ak máte problémy s údržbou, zvážte webhostingovú službu). Ďalšie vydanie (3.0) má vyjsť v Q1 2020, ktoré obsahuje virtuálne prepísanie DOM pre lepší výkon spolu s vylepšenou podporou TypeScript. K dispozícii je tiež pridanie Composition API, ktoré poskytuje vývojárom nový spôsob vytvárania komponentov a ich usporiadania podľa funkcií namiesto prevádzky.
Tí, ktorí vyvíjajú Vue, boli tiež zaneprázdnení prácou na Suspense, ktorá pozastaví vykreslenie vašej komponenty a vykreslí záložnú komponentu, kým nebude splnená podmienka.
Jednou z veľkých vecí, ktoré obsahujú aktualizácie Vue, je ich spätná kompatibilita. Nechcú, aby ste prelomili svoje staré projekty Vue. Videli sme to pri migrácii z 1,0 na 2,0, kde 90 percent API bolo rovnakých.
Ako porovnáva syntax rámcov?
Všetky tri rámce prešli od svojho vydania zmenami, ale jedna vec, ktorá je dôležitá na pochopenie, je syntax a to, ako sa líši. Pozrime sa, ako porovnáva syntax, pokiaľ ide o jednoduché viazanie udalostí:
Vue: The v-on Direktíva sa používa na pripojenie poslucháčov udalostí, ktorí vyvolávajú metódy v inštanciách Vue. Pred smernicami je predpona v- aby sme označili, že ide o špeciálne atribúty poskytované programom Vue, a na vykreslený DOM použiť špeciálne reaktívne správanie. Obslužné rutiny udalostí môžu byť poskytnuté buď vložené, alebo ako názov metódy.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, methods: {clickHandler: function () {console.log (“I was clicked! “); }}}; / skript>
Reagovať: React vloží značky a logiku do JS a JSX, čo je rozšírenie syntaxe k JavaScriptu. Pri JSX sa funkcia odovzdáva ako obslužná rutina udalosti. Spracovanie udalostí pomocou prvkov React je veľmi podobné spracovaniu udalostí na prvkoch DOM. Ale existuje niekoľko syntaktických rozdielov; napríklad udalosti React sú pomenované pomocou camelCase a nie malými písmenami.
function Button () {function clickHandler (e) {console.log (“I was clicked”); } návratové tlačidlo onClick = {clickHandler}> kliknite na mňa! / tlačidlo>; }
Uhlové: Syntax väzby udalosti pozostáva z názvu cieľovej udalosti v zátvorkách naľavo od znamienka rovná sa a z vyhlásenia citovanej šablóny vpravo. Prípadne môžete použiť na- predpona, známa ako kanonická forma.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`})) export class ClickMeComponent {onClickMe () {console.log (“ Klikli ste na mňa! “); }}
Popularita a trh
Začnime pohľadom na celkový obraz troch rámcov týkajúcich sa zvyšku webu preskúmaním štatistík z W3Techs. Angular v súčasnosti používa 0,4% všetkých webov, pričom trhový podiel knižnice JavaScriptu predstavuje 0,5%. React používa 0,3% všetkých webových stránok a 0,4% trhový podiel v knižnici JavaScriptu a Vue má 0,3% za oba. Zdá sa to celkom rovnomerné a dalo by sa očakávať, že čísla stúpnu.
Trendy Google: Za posledných 12 mesiacov je React najpopulárnejším z hľadiska hľadaných výrazov, za ktorým nasleduje Angular. Vue.js je dosť pozadu; jednu vec si však treba pamätať, že Vue je v porovnaní s ostatnými dvoma stále mladá.
Hľadanie práce: V čase písania tohto článku sú React a Angular z hľadiska zoznamov pracovných pozícií dosť úzko prepojené. Skutočne, že spoločnosť Vue bola veľmi ďaleko za sebou. Na LinkedIn sa však zdá, že je väčší dopyt po vývojároch Vue.
Prepad zásobníka: Ak sa pozriete na výsledky prieskumu Stack Overflow Developer Survey pre rok 2019, React a Vue.js sú najobľúbenejšie a najžiadanejšie webové rámce. Úhlová sedí na deviatej pozícii pre najobľúbenejších, ale tretia najhľadanejšia.
GitHub: Vue má najväčší počet hviezdičiek s 153 tis., Ale má najmenší počet prispievateľov (283). React má na druhej strane 140 000 hviezd a 1 341 prispievateľov. Angular má iba 59,6 000 hviezd, ale má najvyšší počet prispievateľov z troch s 1 579.
Trendy NPM: Obrázok vyššie zobrazuje štatistiky za posledných 12 mesiacov, kde môžete vidieť, že React má vyšší počet stiahnutí za mesiac v porovnaní s Angular a Vue.
Vývoj mobilných aplikácií
Jedným z hlavných cieľov veľkej trojky je nasadenie mobilných zariadení. React má React Native, ktorý sa stal populárnou voľbou pre vytváranie aplikácií pre iOS a Android nielen pre používateľov React, ale aj pre širšiu komunitu vývojárov aplikácií. Úhloví vývojári môžu používať natívny skript pre natívne aplikácie alebo Ionic pre hybridné mobilné aplikácie, zatiaľ čo vývojári Vue majú na výber natívny skript alebo natívny skript Vue. Z dôvodu popularity mobilných aplikácií zostáva táto oblasť kľúčovou oblasťou investícií.
Ďalšie rámce, na ktoré si treba dať pozor v roku 2020
Ak chcete vyskúšať niečo nové v roku 2020, pozrite si tieto rámce JavaScriptu.
Žhaviaca sviečka: Open-source framework pre vytváranie webových aplikácií, ktorý funguje na základe vzoru MVVM. Používa ho niekoľko veľkých spoločností ako Microsoft, Netflix a LinkedIn.
Meteor: Plnohodnotná platforma JavaScript na vývoj moderných webových a mobilných aplikácií. Je ľahké sa naučiť a má veľmi podporujúcu komunitu.
Záver
Všetky tri rámce sa neustále zlepšujú, čo je povzbudivým znamením. Každý má svoju vlastnú perspektívu a preferované riešenie, ktoré by mal použiť, ale skutočne záleží na veľkosti projektu a vďaka čomu sa budete cítiť pohodlnejšie.
Najdôležitejším aspektom je trvalá podpora ich komunít, takže ak plánujete zahájiť nový projekt a nikdy predtým ste nevyužili žiadny z troch, potom verím, že ste so všetkými v bezpečných rukách. Ak ste ešte nemali možnosť naučiť sa žiadny z troch rámcov, potom vám navrhujem, aby ste sa ako nové novoročné predsavzatie začali učiť. Budúcnosť sa bude točiť okolo týchto troch.
Tento obsah sa pôvodne objavil v časopise net.
