A 3 legjobb JavaScript-keretrendszer/-könyvtár az előtér-fejlesztéshez

A JavaScript az évek során egyre nagyobb népszerűségre tett szert, a közösség gyorsan növekszik, a fejlesztők pedig folyamatosan fejlesztik és naponta készítenek eszközöket a nyelvhez.

Ez rendkívül nehézzé teszi annak eldöntését, hogy egy adott feladathoz milyen eszközt/keretet/könyvtárat használjunk, mivel mindig több lehetőség áll rendelkezésre a JavaScriptben szó szerint bármire, amit el szeretne végezni. Eleinte még mindig nehéz eldönteni, hogy melyik könyvtárat vagy keretrendszert tanuljuk meg.

Ez a cikk számos JavaScript előtér-keretrendszer/könyvtár használatának előnyeinek tisztázására összpontosít, és végső soron világosabb képet ad róluk. Célja, hogy megkönnyítse a kiválasztási folyamatot.

Reagál

Reagál nem keretrendszer, hanem JavaScript-könyvtár felhasználói felületek építésére.

Nyílt forráskódú, és a Facebook és az egyes fejlesztők közössége tartja karban. A Reactot eredetileg írta Jordan Walke belső eszközként a Facebooknál. Később nyílt forráskódúvá vált, és 2013-ban adták ki a nagyközönségnek, és azóta széles körű népszerűségre tett szert.

Néhány funkció a következőket tartalmazza.

  • Reaktív, testreszabható és újrafelhasználható alkatrészeket biztosít
  • Virtuális DOM-ot használ
  • Rendkívül gyors
  • Komponens alapú
  • Egyirányú adatkötés
  • A kód újrafelhasználhatósága
  • Élénk, virágzó ökoszisztéma van mögötte
  • Kényelmes államkezelési kezelés

Telepítés/Használat

A React kétféle módon használható a frontenden.

CDN-en keresztül

Lehet hivatkozni rájuk hivatalos oldal egy szkriptek hivatkozásának megszerzéséhez, amelyet a HTML-jelölés fejlécében helyezhet el. Válassza ki a hivatkozásokat a cél alapján.

Például, ha fejlesztői környezetben használja, akkor:

<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>

És a gyártáshoz

<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>

Node.JS használatával

  Hogyan frissítsünk Ubuntu 21.04-re

Feltételezem, hogy már telepítve van a NodeJS. A React telepítéséhez egyszerűen írja be a következő parancsot.

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

A telepítés befejezése után írja be a következő parancsot

create-react-app my-first-react-application

A fenti parancs telepíti az összes szükséges könyvtárat, amely a React megfelelő működéséhez szükséges, beleértve a fejlesztőkiszolgálót, a webcsomagot és a babelt.

Keresse meg a my-first-react-application mappát, és futtassa a következő parancsot

npm start

A fentiek elindítanak egy fejlesztői kiszolgálót a 3000-es porton. És amikor eléri a szerver IP-címét a 3000-es porton, akkor valami ilyesmit kell látnia az alábbiakban.

A React egyre népszerűbb, és egyre több nagy szervezet igényli. Ha érdekel a tanulás, akkor ezt javaslom teljes tanfolyam.

Vue.js

Vue.js egy progresszív JavaScript keretrendszer interaktív felhasználói felületek és egyoldalas alkalmazások létrehozásához. Ez egy modellnézeti keretrendszer a központi könyvtárral, amely a nézeti rétegre összpontosít. A Vue népszerű, mert képes egyoldalas alkalmazásokat működtetni. A Reacttal ellentétben a Vue nyers HTML-t használ, nem pedig JSX-et.

A Vue.js nyílt forráskódú, és eredetileg hozta létre Evan Te és 2014 februárjában jelent meg nyilvánosan. Íme néhány szolgáltatás.

  • Reaktív és összeállítható nézetkomponenseket biztosít.
  • Virtuális DOM-ot használ
  • Továbbra is a központi könyvtárra (azaz az útválasztásra és az állapotkezelésre) összpontosít
  • A CSS-ben a hatókör CSS-In-J nélkül történik
  • Egyirányú kötés az alkatrészeken belül.
  • Az alapvető kiegészítők támogatása
  • A kód újrafelhasználhatósága

Telepítés/Használat

Használhatja a Vue.js-t a kezelőfelületen a CDN-en vagy a Node.js-en keresztül

A CDN mód használatához hozzáadhatja a következő szkriptet a HTML-oldal fejlécéhez.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

A fenti szkript fejlesztési célokra alkalmas, mivel fontos konzolüzenetet tartalmaz. A gyártáshoz azonban az alábbit kell használnia.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

És a Nodejs használatához telepítheti az npm paranccsal.

npm install vue

Erősen javaslom, hogy olvassa el a hivatalos Vue JS-t dokumentáció hogy többet megtudjon, vagy fontolja meg ennek a lehetőségét pálya.

  A képernyő felébresztése fontos értesítésekre Androidon

Szögletes

Szögletes egy strukturális JavaScript keretrendszer dinamikus oldalakhoz. Lehetővé teszi a HTML használatát sablonnyelvként, és lehetővé teszi a HTML szintaxis használatát az alkalmazások összetevőinek világos és tömör kifejezésére. Ez egy nyílt forráskódú projekt, amelyet a Google és más közreműködők tartanak fenn.

Telepítés

Győződjön meg arról, hogy a legújabb Nodejs telepítve van. Az első dolog, amit telepítenünk kell, az Angular CLI eszköz.

npm install -g @angular/cli

Telepítés után a következő paranccsal új projektet hozhatunk létre.

ng new my-first-angular-app

Kövesse a képernyőn megjelenő utasításokat. Ez létrehoz néhány fájlt és mappát, és az npm modult használja az Angular megfelelő működéséhez szükséges, harmadik féltől származó könyvtárak letöltéséhez.

Az újonnan létrehozott alkalmazás elindításához futtassa a következő parancsot az alkalmazások mappából.

ng server

Ennek automatikusan el kell indulnia a kiszolgálónak a 4200-as porton.

[[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.

Következtetés

  Hogyan lehet testreszabni az olvasópanelt az Outlookban

Tehát, hogy mit választasz, az inkább személyes preferencia, mint „melyik a jobb” dolog.

A fent felsorolt ​​összes keretrendszer/könyvtár nagyszerű. Íme egy rövid összefoglaló;

  • Meg kell tanulnia az Angular-t, ha olyan keretrendszert szeretne, amelyre támaszkodni szeretne anélkül, hogy külső függőségekkel kellene megküzdenie.
  • Meg kell tanulnia a Reactot, ha gyors, PWA, egyoldalas alkalmazást szeretne építeni, és kényelmesen érzi magát a JSX-ben.
  • A React rendelkezik a legélénkebb közösséggel, és a nagy közösségnek köszönhetően több munkalehetőséggel rendelkezik.
  • A Reactet viszonylag könnyű elkezdeni.
  • A React nagymértékben testreszabható, és a felhasználói felület minden egyes részét alkotóelemként kezeli.
  • A Vue ugyanazokkal az előnyökkel rendelkezik, mint a React, de JSX nélkül.
  • A Vue munkaerőpiaca folyamatosan növekszik.

Íme a Google Trends diagramja, amely a három népszerűségi arányának összehasonlítását mutatja.

Ha érdekli a front-end fejlesztés, akkor ezt megnézheti Udemy tanfolyam.