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