Contenuto
- 01. Angolare
- 02. Reagisci
- 03. Vue
- Come si confronta la sintassi dei framework?
- Popolarità e mercato
- Sviluppo di app per dispositivi mobili
- Altri quadri da tenere d'occhio nel 2020
- Conclusione
Nel 2020, siamo benedetti con una serie di framework e librerie che ci aiutano con lo sviluppo web. Ma non c'era sempre così tanta varietà. Nel 2005, un nuovo linguaggio di scripting chiamato Mocha è stato creato da un ragazzo di nome Brendan Eich. Mesi dopo essere stato rinominato in LiveScript, il nome è stato cambiato di nuovo in JavaScript. Da allora, JavaScript ha fatto molta strada.
Nel 2010 abbiamo visto l'introduzione di Backbone e Angular come i primi framework JavaScript e, entro il 2016, il 92% di tutti i siti web utilizzava JavaScript. In questo articolo, daremo uno sguardo a tre dei principali framework JavaScript (Angular, React e Vue) e il loro stato verso il prossimo decennio. Vuoi creare il tuo sito? Prova questo elenco di costruttori di siti web.
Per alcune risorse brillanti, controlla il nostro elenco dei migliori strumenti di web design, la nostra carrellata di servizi di web hosting e anche questo elenco di eccellenti software di test utente.
01. Angolare
AngularJS è stato rilasciato nel 2010 ma nel 2016 è stato completamente riscritto e rilasciato come Angular 2. Angular è un framework web completo sviluppato da Google, utilizzato da Wix, Upwork, The Guardian, HBO e altri.
Professionisti:
- Supporto eccezionale per TypeScript
- MVVM consente agli sviluppatori di separare il lavoro sulla stessa sezione dell'app utilizzando lo stesso set di dati
- Ottima documentazione
Contro:
- Ha un po 'una curva di apprendimento
- La migrazione da una vecchia versione può essere difficile.
- Gli aggiornamenti vengono introdotti abbastanza regolarmente, il che significa che gli sviluppatori devono adattarsi a loro
Qual è il prossimo?
In Angular 9, Ivy è il compilatore predefinito. È stato creato per risolvere molti dei problemi relativi alle prestazioni e alle dimensioni dei file. Dovrebbe rendere le applicazioni più piccole, più veloci e più semplici.
Quando confronti le versioni precedenti di Angular con React e Vue, il file
le dimensioni finali del bundle erano molto più grandi quando si utilizzava Angular. Ivy rende anche possibile l'idratazione progressiva, che è qualcosa che il team di Angular ha mostrato all'I / O 2019. Progressive Hydration utilizza Ivy per caricare progressivamente sul server e sul client. Ad esempio, una volta che un utente inizia a interagire con una pagina, il codice dei componenti insieme a qualsiasi runtime viene recuperato pezzo per pezzo.
Ivy sembra il grande obiettivo per il futuro di Angular e la speranza è di renderlo disponibile per tutte le app. Ci sarà un'opzione di opt-out nella versione 9, fino ad Angular 10.
02. Reagisci
React è stato inizialmente rilasciato nel 2013 da Facebook e viene utilizzato per la creazione di interfacce web interattive. Viene utilizzato da Netflix, Dropbox, PayPal e Uber per citarne alcuni.
Professionisti:
- React utilizza il DOM virtuale, che ha un impatto positivo sulle prestazioni
- JSX è facile da scrivere
- Gli aggiornamenti non compromettono la stabilità
Contro:
- Una delle principali battute d'arresto è la necessità di librerie di terze parti per creare app più complesse
- Gli sviluppatori sono lasciati all'oscuro del modo migliore per svilupparsi
Qual è il prossimo?
Alla React Conf 2019, il team di React ha toccato una serie di cose su cui ha lavorato. Il primo è l'idratazione selettiva, che è dove React metterà in pausa tutto ciò su cui sta lavorando per dare la priorità ai componenti con cui l'utente sta interagendo. Man mano che l'utente interagisce con una particolare sezione, quell'area sarà idratata. Il team ha anche lavorato su Suspense, che è il sistema di React per orchestrare il caricamento di codice, dati e immagini. Ciò consente ai componenti di attendere qualcosa prima di eseguire il rendering.
Sia l'idratazione selettiva che la suspense sono rese possibili dalla modalità simultanea, che consente alle app di essere più reattive dando a React la possibilità di inserire grandi blocchi di lavoro con priorità inferiore per concentrarsi su qualcosa che ha una priorità più alta, come rispondere all'input dell'utente. Il team ha anche menzionato l'accessibilità come un'altra area che stavano esaminando, concentrandosi su due argomenti particolari: la gestione del focus e delle interfacce di input.
03. Vue
Vue è stato sviluppato nel 2014 da Evan You, un ex dipendente di Google. È utilizzato da Xiaomi, Alibaba e GitLab. Vue è riuscita a guadagnare popolarità e supporto da parte degli sviluppatori in un breve lasso di tempo e senza il sostegno di un marchio importante.
Professionisti:
- Di dimensioni molto leggere
- Adatto ai principianti - facile da imparare
- Grande comunità
Contro:
- Non supportato da una grande azienda, come React with Facebook e Angular with Google
- Nessuna struttura reale
Qual è il prossimo?
Vue si è prefissata l'obiettivo di essere più veloce, più piccola, più manutenibile e di rendere più facile per gli sviluppatori scegliere come target il nativo (se hai problemi di manutenzione, considera un servizio di web hosting). La prossima versione (3.0) è prevista per il primo trimestre del 2020, che include una riscrittura DOM virtuale per prestazioni migliori insieme a un supporto TypeScript migliorato. C'è anche l'aggiunta dell'API di composizione, che fornisce agli sviluppatori un nuovo modo per creare componenti e organizzarli per funzionalità anziché per operazione.
Coloro che sviluppano Vue sono stati anche impegnati a lavorare su Suspense, che sospende il rendering dei componenti e rende un componente di fallback fino a quando non viene soddisfatta una condizione.
Una delle grandi cose con gli aggiornamenti di Vue è che supportano la compatibilità con le versioni precedenti. Non vogliono che tu rompa i tuoi vecchi progetti Vue. Lo abbiamo visto nella migrazione da 1.0 a 2.0, dove il 90% dell'API era lo stesso.
Come si confronta la sintassi dei framework?
Tutti e tre i framework hanno subito modifiche dal loro rilascio, ma una cosa fondamentale da capire è la sintassi e come differisce. Diamo un'occhiata a come si confronta la sintassi quando si tratta di associazione di eventi semplice:
Vue: Il v-on viene utilizzata per allegare listener di eventi che invocano metodi su istanze di Vue. Le direttive hanno il prefisso v- per indicare che sono attributi speciali forniti da Vue e applicare un comportamento reattivo speciale al DOM renderizzato. I gestori di eventi possono essere forniti inline o come nome del metodo.
template> button v-on: click = "clickHandler"> Click me / button> / template> script> export default {name: "HelloWorld", metodi: {clickHandler: function () {console.log ("I was clicked! "); }}}; / script>
Reagire: React inserisce markup e logica in JS e JSX, un'estensione della sintassi per JavaScript. Con JSX, la funzione viene passata come gestore di eventi. La gestione degli eventi con gli elementi React è molto simile alla gestione degli eventi sugli elementi DOM. Ma ci sono alcune differenze sintattiche; per esempio, gli eventi React sono denominati usando camelCase piuttosto che minuscolo.
funzione Button () {funzione clickHandler (e) {console.log ("Sono stato cliccato"); } pulsante di ritorno onClick = {clickHandler}> Cliccami! / button>; }
Angolare: La sintassi del binding di eventi consiste in un nome di evento di destinazione tra parentesi a sinistra di un segno di uguale e un'istruzione modello tra virgolette a destra. In alternativa, puoi utilizzare il file sopra- prefisso, noto come forma canonica.
@Component ({selector: "app-click-me", template: `button (click) =" onClickMe () "> Click me! / Button>`}) export class ClickMeComponent {onClickMe () {console.log (" Mi hai cliccato! ”); }}
Popolarità e mercato
Cominciamo esaminando un quadro generale dei tre framework per quanto riguarda il resto del Web esaminando le statistiche di W3Techs. Angular è attualmente utilizzato dallo 0,4% di tutti i siti web, con una quota di mercato della libreria JavaScript dello 0,5%. React è utilizzato dallo 0,3% di tutti i siti web e da una quota di mercato della libreria JavaScript dello 0,4% e Vue ha lo 0,3% per entrambi. Questo sembra abbastanza uniforme e ti aspetteresti di vedere i numeri aumentare.
Tendenze di Google: Negli ultimi 12 mesi, React è il più popolare in termini di ricerca, seguito da vicino da Angular. Vue.js è abbastanza indietro; tuttavia, una cosa da ricordare è che Vue è ancora giovane rispetto alle altre due.
Ricerche di lavoro: Al momento in cui scrivo, React e Angular sono abbastanza simili in termini di annunci di lavoro su Indeed con Vue molto indietro. Su LinkedIn, tuttavia, sembra esserci una maggiore richiesta di sviluppatori Vue.
Overflow dello stack: Se guardi i risultati del sondaggio per sviluppatori Stack Overflow per il 2019, React e Vue.js sono entrambi i framework web più amati e ricercati. Angular si siede in nona posizione per il più amato ma il terzo più ricercato.
GitHub: Vue ha il maggior numero di stelle con 153k ma ha il minor numero di contributori (283). React, d'altra parte, ha 140.000 stelle e 1.341 collaboratori. Angular ha solo 59.6k stelle ma ha il maggior numero di contributori su tre con 1.579.
Tendenze NPM: L'immagine sopra mostra le statistiche degli ultimi 12 mesi, dove puoi vedere che React ha un numero maggiore di download al mese rispetto ad Angular e Vue.
Sviluppo di app per dispositivi mobili
Uno degli obiettivi principali per i tre grandi è l'implementazione mobile. React ha React Native, che è diventata una scelta popolare per la creazione di app iOS e Android non solo per gli utenti React ma anche per la più ampia comunità di sviluppo di app. Gli sviluppatori angolari possono utilizzare NativeScript per app native o Ionic per app mobili ibride, mentre gli sviluppatori Vue possono scegliere tra NativeScript o Vue Native. A causa della popolarità delle applicazioni mobili, questa rimane un'area di investimento chiave.
Altri quadri da tenere d'occhio nel 2020
Se vuoi provare qualcosa di nuovo nel 2020, dai un'occhiata a questi framework JavaScript.
Ember: Un framework open source per la creazione di applicazioni Web che funziona in base al pattern MVVM. È utilizzato da diverse grandi aziende come Microsoft, Netflix e LinkedIn.
Meteora: Una piattaforma JavaScript full-stack per lo sviluppo di applicazioni web e mobili moderne. È facile da imparare e ha una community molto solidale.
Conclusione
Tutti e tre i quadri sono in continuo miglioramento, il che è un segnale incoraggiante. Ognuno ha la propria prospettiva e la soluzione preferita su quale utilizzare, ma dipende dalle dimensioni del progetto e ciò ti fa sentire più a tuo agio.
L'aspetto più importante è il continuo supporto delle loro comunità, quindi se hai intenzione di iniziare un nuovo progetto e non hai mai utilizzato nessuno dei tre prima, allora credo che tu sia in buone mani con tutti loro. Se non hai ancora avuto la possibilità di imparare nessuno dei tre schemi, allora ti suggerisco di fare il tuo proposito per il nuovo anno di iniziare a imparare. Il futuro ruoterà attorno a questi tre.
Questo contenuto è originariamente apparso su net magazine.
