JavaScript si v posledních letech získal obrovskou popularitu, jeho komunita se rychle rozrůstá a vývojáři neustále vytvářejí nové nástroje a knihovny pro tento jazyk.
Vzhledem k tomu, že existuje mnoho možností pro téměř cokoliv, co chcete v JavaScriptu dělat, může být rozhodování o tom, který nástroj, framework nebo knihovnu použít pro konkrétní úkol, obtížné. Zejména pro začátečníky může být těžké rozhodnout se, jakou knihovnu nebo framework se učit jako první.
Tento článek se zaměřuje na objasnění výhod používání několika populárních JavaScriptových front-end frameworků a knihoven, s cílem poskytnout jasnější pohled a usnadnit rozhodování při jejich výběru.
React
React je JavaScriptová knihovna, nikoli framework, určená pro vytváření uživatelských rozhraní.
Je to open-source projekt, za kterým stojí Facebook a rozsáhlá komunita vývojářů. React byl původně vytvořen Jordanem Walke jako interní nástroj na Facebooku. Později byl v roce 2013 uvolněn jako open-source a rychle si získal velkou popularitu.
Mezi jeho klíčové vlastnosti patří:
- Poskytuje reaktivní, flexibilní a znovupoužitelné komponenty.
- Využívá virtuální DOM.
- Je mimořádně rychlý.
- Je založený na komponentách.
- Používá jednosměrné datové vazby.
- Umožňuje znovupoužitelnost kódu.
- Má rozsáhlý a aktivní ekosystém.
- Poskytuje pohodlnou správu stavu.
Instalace a Použití
React lze v front-endu používat dvěma hlavními způsoby:
Přes CDN:
Můžete si z oficiální stránky zkopírovat odkazy na skripty a zahrnout je do hlavičky vašeho HTML souboru. Důležité je vybírat správné odkazy podle toho, zda pracujete ve vývojovém nebo produkčním prostředí.
Například, pro vývojové prostředí:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
A pro produkční prostředí:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
S použitím Node.js:
Za předpokladu, že máte nainstalované NodeJS, můžete React nainstalovat pomocí následujícího příkazu:
sudo npm i -g create-react-app –save-dev
Po dokončení instalace vytvořte nový projekt pomocí příkazu:
create-react-app my-first-react-application
Tento příkaz nainstaluje všechny potřebné knihovny pro správné fungování Reactu, včetně vývojového serveru, Webpacku a Babelu.
Přejděte do složky my-first-react-application a spusťte příkaz:
npm start
Tento příkaz spustí vývojový server na portu 3000. Pokud pak přistoupíte na IP adresu serveru s portem 3000, měli byste vidět výchozí React aplikaci.
React je stále oblíbenější a je vyžadován mnoha velkými společnostmi. Pokud se chcete učit React, doporučuji tento kompletní kurz.
Vue.js
Vue.js je progresivní JavaScript framework pro vytváření interaktivních uživatelských rozhraní a jednostránkových aplikací. Jedná se o framework typu model-view, jehož základní knihovna se zaměřuje na prezentační vrstvu. Vue je populární pro vytváření SPA aplikací. Na rozdíl od Reactu, Vue používá klasické HTML, nikoli JSX.
Vue.js je open-source projekt, který vytvořil Evan You a poprvé byl zveřejněn v únoru 2014. Mezi jeho vlastnosti patří:
- Nabízí komponenty s reaktivním a skládacím zobrazením.
- Využívá virtuální DOM.
- Zaměřuje se na základní knihovnu (správu směrování a stavu).
- Zabývá se stylováním pomocí CSS bez nutnosti používat CSS-in-JS.
- Používá jednosměrné vazby v rámci komponent.
- Podporuje rozšiřující pluginy.
- Umožňuje znovupoužitelnost kódu.
Instalace a Použití
Vue.js můžete v front-endu používat přes CDN nebo s pomocí Node.js.
Pro použití CDN přidejte následující skript do sekce head vaší HTML stránky:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Tento skript je vhodný pro vývojové účely, protože obsahuje důležité konzolové zprávy. Pro produkci však použijte následující:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Pro použití s Node.js jej nainstalujete pomocí npm:
npm install vue
Důrazně doporučuji prostudovat si oficiální dokumentaci Vue.js pro více informací, nebo zvážit tento kurz.
Angular
Angular je strukturální framework JavaScriptu pro vytváření dynamických webových stránek. Umožňuje použití HTML jako šablonovacího jazyka a umožňuje použití HTML syntaxe pro jasné a stručné vyjádření komponent aplikace. Je to open-source projekt spravovaný společností Google a dalšími přispěvateli.
Instalace
Ujistěte se, že máte nainstalovanou nejnovější verzi Node.js. První krok je instalace Angular CLI:
npm install -g @angular/cli
Po instalaci můžete vytvořit nový projekt pomocí příkazu:
ng new my-first-angular-app
Postupujte podle pokynů na obrazovce. Tím se vygenerují potřebné soubory a složky a pomocí modulu npm se stáhnou knihovny třetích stran, nutné pro správné fungování Angularu.
Pro spuštění nově vytvořené aplikace spusťte následující příkaz ze složky aplikace:
ng server
To automaticky spustí server na portu 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Závěr
Volba, který z těchto frameworků/knihoven se naučit, je spíše otázkou osobní preference než absolutního „co je lepší“.
Všechny výše uvedené frameworky a knihovny jsou skvělé. Zde je stručné shrnutí:
- Angular byste se měli učit, pokud chcete kompletní framework s vlastními řešeními, který vám ušetří starosti s externími závislostmi.
- React je ideální, pokud chcete vytvářet rychlé PWA a SPA a nevadí vám použití JSX.
- React má největší a nejaktivnější komunitu a nabízí nejvíce pracovních příležitostí.
- React je poměrně jednoduchý na začátek.
- React je vysoce flexibilní a zachází s každým prvkem uživatelského rozhraní jako s komponentou.
- Vue má podobné výhody jako React, ale bez JSX.
- Trh práce pro Vue neustále roste.
Následující graf ze služby Google Trends ukazuje srovnání popularity těchto tří možností:
Pokud máte zájem o vývoj front-endu, můžete si prohlédnout tento kurz na Udemy.