3 Nejlepší JavaScript Framework/Knihovna pro vývoj frontendu
JavaScript si v průběhu let získal stále větší oblibu, komunita rychle roste a vývojáři denně neustále vyvíjejí a vytvářejí nástroje pro tento jazyk.
Díky tomu je při rozhodování o tom, jaký nástroj/rámec/knihovnu použít pro konkrétní úkol, zdrcující, protože vždy existuje více možností pro doslova cokoliv, co chcete v JavaScriptu dělat. Zpočátku je stále obtížné rozhodnout se, jakou knihovnu nebo rámec se učit.
Tento článek se zaměřuje na demystifikaci výhod používání několika JavaScriptových front-end frameworků/knihoven a nakonec o nich poskytuje jasnější obrázek. Účelem je usnadnit rozhodovací proces při výběru.
Table of Contents
Reagovat
Reagovat není framework, ale JavaScriptová knihovna pro vytváření uživatelských rozhraní.
Je open-source a spravuje ho Facebook a komunita jednotlivých vývojářů. React původně napsal Jordan Walke jako interní nástroj na Facebooku. Později to byly otevřené zdroje a byly uvolněny pro širokou veřejnost v roce 2013 a poté si získaly širokou škálu popularity.
Některé z funkcí zahrnují následující.
- Poskytuje reaktivní, přizpůsobitelné a opakovaně použitelné komponenty
- Využívá virtuální DOM
- Extrémně rychlý
- Na bázi komponent
- Jednosměrná datová vazba
- Znovupoužitelnost kódu
- Má za sebou živý, prosperující ekosystém
- Pohodlná manipulace se státní správou
Instalace/Použití
React lze na frontendu použít dvěma různými způsoby.
Přes CDN
Můžete odkazovat na jejich oficiální stránka získáte odkaz na skripty, který můžete zahrnout do značky záhlaví ve svém označení HTML. Odkazy vybírejte podle účelu.
Pokud například používáte ve vývojovém prostředí, pak:
<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 k výrobě
<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>
Pomocí Node.JS
Předpokládám, že už máte nainstalovaný NodeJS. Chcete-li nainstalovat React, jednoduše zadejte následující příkaz.
sudo npm i -g create-react-app –save-dev
Po dokončení instalace zadejte následující příkaz
create-react-app my-first-react-application
Výše uvedený příkaz nainstaluje všechny potřebné knihovny potřebné k tomu, aby React fungoval správně, což zahrnuje vývojový server, webpack a babel.
Přejděte do složky my-first-react-application a spusťte následující příkaz
npm start
Výše uvedené spustí vývojový server na portu 3000. A když přistupujete k IP serveru s portem 3000, měli byste vidět něco jako níže.
React si získává na popularitě a na vyžádání u řady velkých organizací. Pokud máte zájem se učit, pak bych doporučil vzít si toto 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 model-view framework se základní knihovnou se zaměřením na vrstvu pohledu. Vue je populární pro svou schopnost pohánět jednostránkové aplikace. Na rozdíl od Reactu používá Vue raw HTML a ne JSX.
Vue.js je open-source a původně byl vytvořen Evan You a zveřejněno v únoru 2014. Níže jsou uvedeny některé funkce.
- Poskytuje komponenty reaktivního a skládacího pohledu.
- Využívá virtuální DOM
- Udržuje zaměření na základní knihovnu (tj. Směrování a správu stavu)
- Scoping v CSS je řešen bez CSS-In-Js
- Jednosměrná vazba v rámci komponent.
- Podpora nezbytných doplňků
- Znovupoužitelnost kódu
Instalace/Použití
Vue.js můžete použít na front-endu buď přes CDN, nebo s Node.js
Chcete-li použít způsob CDN, můžete do sekce záhlaví stránky HTML přidat následující skript.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Výše uvedený skript je vhodný pro vývojové účely, protože obsahuje důležitou konzolovou zprávu. Pro výrobu byste však měli používat níže uvedený.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
A pro použití s Nodejs jej můžete nainstalovat pomocí příkazu npm.
npm install vue
Důrazně vám doporučuji, abyste si přečetli oficiální Vue JS dokumentace dozvědět se více nebo zvážit přijetí tohoto cesta.
Hranatý
Hranatý je strukturální rámec JavaScriptu pro dynamické stránky. Umožňuje použití HTML jako jazyka šablon a umožňuje použití syntaxe HTML k jasnému a stručnému vyjádření komponent aplikace. Jedná se o open-source projekt spravovaný společností Google a dalšími přispěvateli.
Instalace
Ujistěte se, že máte nainstalovaný nejnovější Nodejs. První věc, kterou budeme muset nainstalovat, je nástroj Angular CLI.
npm install -g @angular/cli
Po instalaci můžeme pomocí následujícího příkazu vytvořit nový projekt.
ng new my-first-angular-app
Postupujte podle pokynů na obrazovce. Tím se vygenerují některé soubory a složky a použije se modul npm ke stažení knihoven třetích stran potřebných pro správné fungování Angular.
Chcete-li spustit nově vytvořenou aplikaci, spusťte následující příkaz ze složky aplikací.
ng server
To by mělo automaticky spustit 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
Takže to, co se rozhodnete učit, je spíše vaše osobní preference než věc „co je lepší“.
Všechny výše uvedené rámce/knihovny jsou skvělé. Zde je krátká rekapitulace;
- Angular byste se měli naučit, pokud chcete Framework, na který se chcete spolehnout, aniž byste se museli zabývat externími závislostmi.
- Měli byste se naučit React, pokud chcete vytvořit rychlou, PWA, jednostránkovou aplikaci a jste spokojeni s JSX.
- React má nejživější komunitu a více pracovních příležitostí díky své velké komunitě.
- React je poměrně snadné začít.
- React je vysoce přizpůsobitelný a zachází s každým kusem uživatelského rozhraní jako s komponentou.
- Vue má stejné výhody jako React, ale bez JSX.
- Trh práce pro Vue neustále roste.
Zde je graf ve službě Google Trends, který ukazuje srovnání míry oblíbenosti tří z nich.
Pokud vás zajímá vývoj front-endu, můžete se podívat na toto Kurz Udemy.
