3 najlepší rámec JavaScriptu / knižnica pre frontendový vývoj

JavaScript si v priebehu rokov získal čoraz väčšiu obľubu, komunita sa rýchlo rozrastá a vývojári neustále vyvíjajú a stavajú nástroje pre jazyk každý deň..


To znemožňuje rozhodovanie o tom, aký nástroj / rámec / knižnica použiť na konkrétnu úlohu, pretože v jazyku JavaScript vždy existuje viac možností pre doslova čokoľvek, čo chcete urobiť. Spočiatku je stále náročné rozhodnúť sa, ktorú knižnicu alebo štruktúru sa naučiť.

Tento článok sa zameriava na demystifikáciu výhody použitia niekoľkých front-end rámcov / knižníc JavaScript a nakoniec poskytuje jasnejší obraz o nich. Zámerom je uľahčiť rozhodovací proces pri výbere jedného.

reagovať

reagovať nie je rámec, ale knižnica JavaScript na vytváranie používateľských rozhraní.

Je otvorený a udržiavaný Facebookom a komunitou jednotlivých vývojárov. React pôvodne napísal Jordan Walke ako interný nástroj na Facebooku. Neskôr boli otvorené zdroje a sprístupnené širokej verejnosti v roku 2013 a odvtedy získali širokú škálu popularity.

Niektoré z funkcií zahŕňajú nasledujúce.

  • Poskytuje reaktívne, prispôsobiteľné a opakovane použiteľné komponenty
  • Využíva virtuálny DOM
  • Mimoriadne rýchly
  • Component-based
  • Jednosmerná väzba údajov
  • Opätovné použitie kódu
  • Má za sebou živý a prosperujúci ekosystém
  • Manipulácia s riadením štátu

Inštalácia / Použitie

Reagovať je možné na frontend použiť dvoma rôznymi spôsobmi.

  • Cez CDN
  • Pomocou Node.JS

Cez CDN

Môžete ich odkázať oficiálne stránky získate odkaz na skripty, ktorý môžete zahrnúť do značky hlavičky vo svojom značení HTML. Vyberte odkazy podľa účelu.

Napríklad, ak sa používa vo vývojovom prostredí, potom:

A na výrobu

Pomocou Node.JS

Predpokladám, že už máte nainštalovaný NodeJS. Ak chcete nainštalovať React, jednoducho zadajte nasledujúci príkaz.

sudo npm i -g create-rea-app – save-dev

Po dokončení inštalácie zadajte nasledujúci príkaz

create-reag-app my-first-rea-application

Vyššie uvedený príkaz nainštaluje všetky potrebné knižnice, ktoré sú potrebné na správne fungovanie nástroja React, čo zahŕňa vývojový server, webpack a babel..

Prejdite do priečinka s prvou reakciou aplikácie a spustite nasledujúci príkaz

npm začiatok

Vyššie uvedené spustí vývojový server na porte 3000. A keď potom pristupujete na svoju IP adresu servera s portom 3000, mali by ste vidieť niečo ako nižšie.

React získava na popularite a na požiadanie mnohých veľkých organizácií. Ak sa chcete učiť, odporúčam vám to zobrať dokončiť kurz.

Vue.js

Vue.js je progresívny rámec JavaScript na vytváranie interaktívnych používateľských rozhraní a jednostránkových aplikácií. Je to model-pohľadový rámec s jadrom knižnice, zameraný na vrstvu pohľadu. Vue je populárny, pretože umožňuje napájať jednostránkové aplikácie. Na rozdiel od React, Vue používa surové HTML a nie JSX.

Vue.js je open-source a pôvodne ho vytvoril Evan vy a zverejnené vo februári 2014. Nasledujú niektoré z funkcií.

  • Poskytuje reaktívne a skladateľné komponenty zobrazenia.
  • Využíva virtuálny DOM
  • Udržiava zameranie na základnú knižnicu (napr. Smerovanie a správa štátu)
  • Rozsahovanie v CSS sa spracúva bez CSS-In-Js
  •  Jednosmerné viazanie v rámci komponentov.
  • Podpora nevyhnutných doplnkov
  • Opätovné použitie kódu

Inštalácia / Použitie

Vue.js môžete používať na klientskom rozhraní buď cez CDN alebo s Node.js

Ak chcete použiť CDN spôsobom, do sekcie hlavičky HTML stránky môžete pridať nasledujúci skript.

Vyššie uvedený skript je vhodný na vývojové účely, pretože obsahuje dôležitú správu konzoly. Na výrobu by ste však mali používať nižšie uvedenú.

A do používať s Nodejsom, môžete ho nainštalovať pomocou príkazu npm.

npm install vue

Dôrazne vám odporúčame prečítať si oficiálnu Vue JS dokumentácia dozvedieť sa viac alebo zvážiť prijatie cesta.

hranatý

hranatý je štrukturálny rámec JavaScript pre dynamické stránky. Umožňuje použitie HTML ako šablónového jazyka a umožňuje použitie syntaxe HTML na jasné a stručné vyjadrenie komponentov aplikácií. Ide o projekt s otvoreným zdrojom, ktorý spravuje spoločnosť Google a ďalší prispievatelia.

inštalácia

Uistite sa, že máte nainštalované najnovšie Nodejs. Prvá vec, ktorú musíme nainštalovať, je nástroj Angular CLI.

npm install -g @ angular / cli

Po inštalácii môžeme vytvoriť nový projekt s nasledujúcim príkazom.

ng nová moja prvá-uhlová aplikácia

Postupujte podľa pokynov na obrazovke. Týmto sa vygenerujú niektoré súbory a priečinky a pomocou modulu npm sa stiahnu knižnice tretích strán potrebné na správne fungovanie programu Angular..

Novo vytvorenú aplikáciu spustíte spustením nasledujúceho príkazu z priečinka aplikácií.

ng server

To by malo automaticky spustiť server na porte 4200.

[[Email protected] my-first-angular-app] # ng slúži
10% budovanie 3/3 modulov 0 aktívnychℹ 「wds」: Projekt beží na adrese http: // localhost: 4200 / webpack-dev-server /
ℹ 「wds」: výstup z webpacku sa podáva z /
「「 wds 」: 404 s sa vráti na //index.html

chunk {main} main.js, main.js.map (main) 47,8 kB [počiatočné] [poskytnuté]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [počiatočné] [poskytnuté]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6,15 kB [vstup] [vykreslené]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3,81 MB [počiatočné] [poskytnuté]
Dátum: 2019-12-28T12: 08: 20,138Z – Haš: 5d4b93c7bf9e61979c4d – Čas: 12864 ms
** Server Angular Live Development počúva na serveri localhost: 4200, otvorte prehliadač na adrese http: // localhost: 4200 / **
ℹ 「wdm」: Kompilované úspešne.

záver

To, čo sa rozhodnete naučiť, je teda viac osobná preferencia ako „čo je lepšia“.

Všetky vyššie uvedené rámce / knižnice sú vynikajúce. Tu je krátka rekapitulácia;

  • Mali by ste sa naučiť Angular, ak chcete Framework, na ktorý sa chcete spoľahnúť bez toho, aby ste sa museli zaoberať vonkajšími závislosťami.
  • Mali by ste sa naučiť React, ak chcete stavať rýchlo, PWA, jednostránkové aplikácie a ste v okolí JSX pohodlní.
  • React má najživšiu komunitu a viac pracovných príležitostí vďaka svojej veľkej komunite.
  • Začať s reakciou je relatívne ľahké.
  • React je vysoko prispôsobiteľný a zaobchádza s každou časťou používateľského rozhrania ako s komponentom.
  • Vue má rovnaké výhody ako React, ale bez JSX.
  • Trh práce pre spoločnosť Vue neustále rastie.

Tu je graf v službe Google Trends, ktorý ukazuje porovnanie miery popularity 3 z nich.

Ak máte záujem o vývoj front-end, môžete si to pozrieť Kurz Udemy.

Tagy:

  • Open Source

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map