JavaScript ha guadagnato popolarità nel corso degli anni, la comunità sta crescendo rapidamente e gli sviluppatori sviluppano e costruiscono continuamente strumenti per la lingua ogni giorno.
Questo rende travolgente quando si tratta di decidere quale strumento/framework/libreria utilizzare per un’attività particolare perché ci sono sempre più opzioni letteralmente per qualsiasi cosa tu voglia fare in JavaScript. All’inizio, è ancora difficile decidere quale libreria o framework imparare.
Questo articolo si concentra sulla demistificazione del vantaggio dell’utilizzo di diversi framework/librerie di front-end JavaScript e, in definitiva, ne fornisce un quadro più chiaro. Ha lo scopo di rendere più facile il processo decisionale per selezionarne uno.
Sommario:
Reagire
Reagire non è un framework ma una libreria JavaScript per la creazione di interfacce utente.
È open source e gestito da Facebook e da una comunità di singoli sviluppatori. React è stato inizialmente scritto da Jordan Walke come strumento interno a Facebook. Successivamente è stato open source e rilasciato al pubblico nel 2013, e da allora ha guadagnato una vasta gamma di popolarità.
Alcune delle caratteristiche includono quanto segue.
- Fornisce componenti reattivi, personalizzabili e riutilizzabili
- Utilizza un DOM virtuale
- Estremamente veloce
- Basato su componenti
- Associazione dati unidirezionale
- Riutilizzabilità del codice
- Ha alle spalle un ecosistema vivace e fiorente
- Comoda gestione della gestione dello stato
Installazione/Utilizzo
React può essere utilizzato sul frontend in due modi diversi.
Su CDN
Puoi fare riferimento al loro sito ufficiale per ottenere un collegamento agli script, che puoi includere nel tag di intestazione nel markup HTML. Scegli i link in base allo scopo.
Ad esempio, se si utilizza in un ambiente di sviluppo, allora:
<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>
E, per la produzione
<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>
Utilizzando Node.JS
Presumo che tu abbia già installato NodeJS. Per installare React, digita semplicemente il seguente comando.
sudo npm i -g create-react-app –save-dev
Al termine dell’installazione, digitare il comando seguente
create-react-app my-first-react-application
Il comando precedente installerà tutte le librerie necessarie per React per funzionare in modo appropriato, che include un server di sviluppo, un webpack e babel.
Passare alla cartella my-first-react-application ed eseguire il comando seguente
inizio npm
Quanto sopra avvierà un server di sviluppo sulla porta 3000. E, quando accedi all’IP del tuo server con la porta 3000, dovresti vedere qualcosa come di seguito.
React sta guadagnando popolarità e su richiesta da numerose grandi organizzazioni. Se sei interessato a imparare, allora consiglierei di prendere questo corso completo.
Vue.js
Vue.js è un framework JavaScript progressivo per la creazione di interfacce utente interattive e applicazioni a pagina singola. È un framework di visualizzazione del modello con la libreria principale, incentrato sul livello di visualizzazione. Vue è popolare, per la sua capacità di alimentare applicazioni a pagina singola. A differenza di React, Vue utilizza HTML grezzo e non JSX.
Vue.js è un open source e inizialmente è stato creato da Evan Tu e rilasciato pubblicamente nel febbraio 2014. Di seguito sono riportate alcune delle caratteristiche.
- Fornisce componenti di visualizzazione reattivi e componibili.
- Utilizza un DOM virtuale
- Mantiene l’attenzione sulla libreria principale (ad es. Routing e gestione dello stato)
- L’ambito in CSS viene gestito senza CSS-In-Js
- Legatura unidirezionale all’interno dei componenti.
- Supporto per componenti aggiuntivi essenziali
- Riutilizzabilità del codice
Installazione/Utilizzo
Puoi utilizzare Vue.js sul front-end tramite CDN o con Node.js
Per utilizzare il modo CDN, puoi aggiungere il seguente script alla sezione dell’intestazione della pagina HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Lo script di cui sopra è adatto per scopi di sviluppo in quanto include un importante messaggio della console. Tuttavia, per la produzione, dovresti utilizzare quello di seguito.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
E, per usarlo con Nodejs, puoi installarlo usando il comando npm.
npm install vue
Ti consiglio vivamente di leggere la Vue JS ufficiale documentazione per saperne di più o prendere in considerazione di prendere questo sentiero.
Angolare
Angolare è un framework JavaScript strutturale per pagine dinamiche. Consente l’uso dell’HTML come linguaggio modello e consente l’uso della sintassi HTML per esprimere i componenti delle applicazioni in modo chiaro e conciso. È un progetto open source gestito da Google e altri contributori.
Installazione
Assicurati di avere installato l’ultimo Nodejs. La prima cosa che dovremo installare è lo strumento Angular CLI.
npm install -g @angular/cli
Una volta installato, possiamo creare un nuovo progetto con il seguente comando.
ng new my-first-angular-app
Segui le istruzioni sullo schermo. Questo genera alcuni dei file e delle cartelle e utilizza il modulo npm per scaricare le librerie di terze parti necessarie per il corretto funzionamento di Angular.
Per avviare l’applicazione appena creata, esegui il comando seguente dalla cartella delle app.
ng server
Questo dovrebbe avviare automaticamente il server sulla porta 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.
Conclusione
Quindi, ciò che scegli di imparare è più una preferenza personale che “quale è una cosa migliore”.
Tutti i framework/librerie sopra elencati sono fantastici. Ecco un breve riassunto;
- Dovresti imparare Angular se vuoi un Framework su cui vuoi fare affidamento senza dover affrontare dipendenze esterne.
- Dovresti imparare React se vuoi costruire velocemente, PWA, applicazioni a pagina singola e ti senti a tuo agio con JSX.
- React ha la comunità più vivace e più opportunità di lavoro grazie alla sua vasta comunità.
- Reagire è relativamente facile per iniziare.
- React è altamente personalizzabile e tratta ogni parte dell’interfaccia utente come un componente.
- Vue ha gli stessi vantaggi di React ma senza JSX.
- Il mercato del lavoro per Vue è in costante aumento.
Ecco un grafico su Google Trends che mostra un confronto del tasso di popolarità di 3 di loro.
Se lo sviluppo front-end è il tuo interesse, allora puoi dare un’occhiata a questo Corso Udemy.