3 Nejlepší JavaScript Framework/Knihovna pro vývoj frontendu

autor:
Tweet
Share
Share
Pin

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.

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.

  Jak opravit nefunkční IME japonské klávesnice (úplný průvodce)

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
  Úvod do SAFe pro začátečníky

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

  10 nejlepších originálních stand-up komedií Netflix (červen 2020)

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.