Come scegliere il miglior framework front-end

Il mondo JavaScript è un ambiente ricco con dozzine di strumenti, librerie e framework. Ma con molte opzioni arriva molta confusione. È davvero un'arma a doppio taglio.

Anche se hai molto spazio per la creatività e la sperimentazione, a volte non sei sicuro di quale libreria o framework scegliere.

Il framework front-end che scegli può creare o distruggere il tuo progetto a lungo termine.

In questo articolo, esamineremo alcuni dei framework JavaScript più popolari e come se la cavano l'uno contro l'altro. Esamineremo cinque diverse prospettive di questi framework, che generalmente facilitano il processo di decisione sul tuo prossimo framework JavaScript.

Sia che tu stia scegliendo da uno di questi popolari framework JavaScript, o da qualcosa di più esoterico, dovresti prendere in considerazione ciascuno di questi aspetti.

Disponibilità di risorse per l'apprendimento

Questo è ovvio ma spesso trascurato. Sebbene la fantasiosa home page di alcuni framework possa attirare la tua attenzione, hai comunque bisogno di alcuni corsi, libri, tutorial e articoli aggiuntivi oltre alla documentazione noiosa e secca per aiutarti a iniziare.

Creare un framework fantastico è una cosa e comunicare le idee fondamentali alla base è diverso. In effetti, ci sono molti sviluppatori professionisti là fuori specializzati nel coaching. Una risorsa di apprendimento ben realizzata taglierà drasticamente la tua curva di apprendimento.

Cerca le risorse di autori affidabili con cui hai precedenti esperienze: alla fine varrà la pena. Se fai fatica a trovare qualcosa di utile, fai attenzione: il framework che stai cercando di imparare potrebbe essere nuovo o non ancora ben adottato dalla comunità.

Anche se ho detto che la documentazione da sola non è sufficiente, ci sono delle eccezioni. EmberJS, ad esempio, ha un'ottima documentazione. Le funzionalità principali e i casi d'uso sono ben descritti con esempi generici qua e là. Sfortunatamente, oltre alla documentazione, ci restano poche risorse, libri, videocorsi o altro materiale.

D'altra parte, c'è un'abbondanza di risorse per Angular e React. Quasi tutti i siti web didattici orientati al front-end avranno un articolo o due su di essi, forse anche un video corso o un libro completo.

Vue raggiunge una via di mezzo: ha una buona documentazione e ci sono alcuni bei corsi tra cui scegliere.

Aurelia, ad esempio, ha quasi zero risorse; l'unica speranza per te è la documentazione e la fortuna.

Preferisco avere delle scelte.

Anche se leggi un ottimo libro o corso, c'è la possibilità che impari qualcosa di nuovo esponendoti a risorse diverse. Se hai familiarità con l'argomento, spesso puoi sfogliare e cercare possibili aree che non sono ancora del tutto chiare.

Sfortunatamente, questa strategia non funzionerà se sei limitato con le tue opzioni, il che ci porta al punto successivo.

Popolarità

Potresti essere orgoglioso di imparare qualcosa di esotico, ma se lo guardi da una prospettiva di business, non è la stessa cosa. La tua azienda o cliente probabilmente preferisce utilizzare un set di strumenti testato in battaglia.

Ci sono diverse ragioni per questo. Se un framework non è così popolare, significa che ci sono alcuni sviluppatori specializzati in esso. Cosa succede se abbandoni il progetto o trovi un nuovo lavoro? Il tuo datore di lavoro finisce per essere bloccato nella ricerca di uno sviluppatore che conosca il framework che hai utilizzato.

Questo processo potrebbe diventare un vero onere per un'azienda. La stessa cosa vale anche se ti attieni al progetto e cresce. Ora il datore di lavoro ha bisogno di più sviluppatori per accelerare lo sviluppo.

Ci sono altri motivi personali per cui potresti optare per un framework popolare e ampiamente utilizzato. Cosa succede se ti ritrovi bloccato con qualche problema e non c'è davvero una comunità a cui puoi chiedere aiuto? Dato che sei da solo con la documentazione, è probabile che perderai molto tempo.

Oltre a ciò, vuoi pensare a future opportunità più interessanti nella tua carriera. Se sei specializzato in qualcosa di popolare e diventi davvero bravo, ci saranno molti progetti là fuori per te.

I leader ovvi qui sono Angular e React.

La maggior parte degli annunci di lavoro relativi al front-end là fuori richiedono l'uno o l'altro. Sono supportati rispettivamente da Google e Facebook, e quindi i datori di lavoro si sentono "al sicuro" riguardo alla loro scelta.

A volte, la scelta del framework per la tua azienda o cliente non dipende da te; forse è stato fatto da un precedente dipendente o da qualche altra persona del team. È probabile che sarà Angular o React. Ora ci sono altre opzioni là fuori come Ember e Vue. Ma devi cercare deliberatamente le aziende che li utilizzano.

Puoi determinare la popolarità di un framework osservando rapidamente il rendimento del progetto su GitHub e in altri luoghi. Ecco alcune statistiche raccolte al momento della stesura di questo articolo:

Sebbene queste librerie siano esistite abbastanza a lungo da dimostrarsi come opzioni popolari, se stai provando qualcosa di veramente nuovo, statistiche simili per loro potrebbero aiutarti a fare la scelta.

Imparare solo Angular o React ti porterà solo così lontano nella tua carriera. Certo, avrai molte opportunità, ma c'è un motivo per cui esistono altri framework là fuori. Cerca di conoscerli nel tuo tempo libero e, di tanto in tanto, fai degli esperimenti. Anche se non li usi mai in progetti reali, otterrai preziose informazioni che ti aiuteranno nel tuo lavoro di sviluppo quotidiano.

Caratteristiche principali

Entriamo un po' sul tecnico ora.

All'inizio, vuoi dare una breve panoramica delle caratteristiche principali del framework per avere un'aspettativa adeguata quando inizierai a scrivere codice. A tal fine, scansiona la documentazione. Devi avere un'idea di cosa tratta questo framework in generale. È solo un livello di visualizzazione, a tutti gli effetti o qualcosa nel mezzo?

Se hai una ricca esperienza precedente con altri framework, questo processo è facile e veloce. Cerca i seguenti argomenti nella documentazione: modelli, gestione dello stato, comunicazione HTTP, elaborazione e convalida dei moduli e routing. Queste sono cose quotidiane che fai come sviluppatore. Non tutti questi possono essere presentati nel framework di base, o potrebbe esserci un approccio diverso a un problema particolare.

Tocchiamo brevemente le opzioni popolari.

Inizieremo con React e Vue. Non sono realmente strutture; rappresentano solo il livello di visualizzazione della tua applicazione. Significa che tutte le altre parti - comunicazione HTTP, convalida del modulo, ecc. - dipendono da te.

Come ho detto prima, potrebbe essere un'arma a doppio taglio. Alla fine, finirai per costruire il tuo framework personalizzato. Entrambi hanno il loro ecosistema di biblioteche per fornire soluzioni ai problemi più comuni, ma la struttura complessiva varierà da progetto a progetto.

Il JSX di React mi ha sempre fatto rabbrividire. Ho dovuto abituarmi. Tuttavia, il modello di Vue è davvero carino, soprattutto se vieni da Angular.

D'altra parte, Ember ha quasi tutto. Abbastanza sorprendentemente, il core di Ember non fornisce un'elaborazione avanzata dei moduli. Ha solo alcuni aiutanti di input e il gioco è fatto. È molto supponente e ha persino un proprio livello di dati. Tutto deve essere fatto "alla maniera Ember".

Se hai esperienza in altri framework o JavaScript in generale, potresti sentirti frustrato perché Ember utilizza il proprio modello a oggetti. Le classi ES2015 standard non sono ampiamente utilizzate, come afferma la documentazione. Potresti ritrovarti ad assegnare il valore direttamente a una proprietà e Ember a lamentarsene.

Un'altra cosa significativamente diversa da altri framework è Ember Data. È un livello dati per le applicazioni Ember. Puoi pensarci come una sorta di ORM per il front-end. Crei modelli e mappa le relazioni tra di loro.

Ora, se il tuo server utilizza l'API JSON (è una specifica per l'implementazione di API JSON), sei a posto con Ember, ma sfortunatamente la maggior parte dei server non lo fa. Quindi devi scrivere adattatori e serializzatori personalizzati. Tuttavia, se fai le cose nel modo di Ember, potrebbe essere davvero produttivo. Ha solo una curva di apprendimento ripida.

Angular 2 è un framework ricco di funzionalità. Viene fornito con molti moduli come Ember, quindi hai un sacco di strumenti a tua disposizione fuori dagli schemi. Tuttavia, poiché Angular è pensato per applicazioni di grandi dimensioni, promuove TypeScript, che potrebbe innescare una certa resistenza prima di provarlo.

Un'altra cosa degna di nota è l'uso massiccio di osservabili dalla libreria Rx, che è davvero bello. Puoi rappresentare quasi tutto come osservabile e applicare operazioni di alto livello come mappa, filtro, ecc. Se hai usato Lodash o Underscore, Rx è più o meno lo stesso ma con steroidi.

Ecco un riepilogo delle caratteristiche principali dei quattro framework di cui stiamo parlando in questo articolo:

Tutte quelle caratteristiche che abbiamo brevemente esaminato sono inutili se è necessario bruciare la candela su entrambe le estremità per usarle in modo efficace, che è il punto successivo.

Usabilità

Se a questo punto hai ancora entusiasmo per il framework scelto, il passo successivo è sporcarti le mani.

Forse il quadro è adatto a te a causa del tuo background. Forse è un po' diverso e ti sfida in qualche modo. Non lo sai ancora e nessuna quantità di leggere o guardare tutorial ti aiuterà fino a quando non lo proverai tu stesso.

Il modo migliore per avere un'idea di un framework è usarlo in qualche mini progetto. Questo ti dà l'opportunità di risolvere i problemi quotidiani sopra menzionati con un determinato framework.

Mentre lavori a un progetto, prenditi il ​​tuo tempo e rifletti sul fatto che sei produttivo o meno. Quanto è facile ottenere il risultato desiderato? Devi cercare librerie esterne? Forse hai bisogno di alcuni plugin dalla community. Esiste una struttura o linee guida convenzionali nel contesto del quadro? Forse esiste una CLI per accelerare il processo di sviluppo. A questo punto, stai raccogliendo un'esperienza di base in modo da poter pensare a come sarebbe se utilizzassi questo framework per i progetti imminenti o addirittura esegui la transizione di quelli esistenti.

Ember è considerato un framework molto produttivo, almeno per i suoi utenti principali. Viene fornito con una CLI, che aiuta davvero. Puoi generare percorsi, controller, componenti e modelli con le proprie suite di test. Fare tutto ciò manualmente è un compito noioso. È anche possibile generare un nuovo progetto. Creerà la struttura di cartelle di base, installerà i pacchetti necessari, costruirà strumenti, ambiente di test, ecc. Se non hai mai usato una CLI a tal punto, sarai molto contento. Ma, come ho detto prima, Ember è molto supponente; nonostante tutta quella bontà, potresti trovarti frustrato mentre cerchi di portare a termine compiti comuni.

Ora per React e Vue, hanno una sorta di CLI, create-react-app e vue-cli. Ma oltre a generare un progetto iniziale con alcune opzioni, non offrono molto rispetto a Ember o Angular. È comprensibile in quanto entrambi rappresentano un livello di visualizzazione. Se ti piacciono i flussi di lavoro personalizzati, la sperimentazione o le diverse strutture da progetto a progetto, allora sei a posto. Per alcuni sviluppatori, la flessibilità è la chiave che deriva intrinsecamente dall'utilizzo di React o Vue.

Angular 4 viene fornito con una CLI come fa Ember. Puoi generare componenti, direttive, servizi, ecc. Genera anche la struttura iniziale per un'applicazione, quindi devi solo preoccuparti del prodotto. L'ambiente di test è davvero carino poiché, con ogni parte di app generata, la suite di test vive vicino ad essa (letteralmente). Oltre a ciò, TypeScript potrebbe fornire un reale aumento della produttività. Ecco perché:

Quante volte ti sei imbattuto nel codice con righe come questa...

 function doSomething(someData) { // do something }

...e mi sono chiesto cosa someData sono alcuni Dati, quali proprietà dovrebbero avere, quali funzioni dovrebbe fornire e qual è il loro comportamento? Con TypeScript, definisci il tipo e ti aspetti i dati appropriati. Può andare oltre se usi un IDE con supporto TypeScript. Puoi esplorare diverse parti dell'app in un attimo.

Non abbiamo toccato gli IDE ma, per la maggior parte dei framework popolari, ci sono alcuni plugin che rendono lo sviluppo davvero semplice. WebStorm, ad esempio, viene fornito con il supporto integrato per Angular, React e Vue.

Facilità di integrazione (con altre librerie)

Ultimo ma non meno importante, questo potrebbe essere considerato parte dell'usabilità, ma è così importante che merita una sezione a parte.

Non importa quanto sia ricco di funzionalità il framework selezionato, è probabile che dovrai affrontare problemi in cui sono necessari strumenti aggiuntivi. Ci sono grandi librerie là fuori che si concentrano su un problema, che si tratti di manipolazione del DOM, elaborazione dei dati, formattazione del tempo, modifica del testo avanzato, ecc. Se provi a integrarne una e trascorri ore su di essa ogni volta, forse non è la scelta ottimale .

Testarlo è molto semplice. Puoi rapidamente inventare uno scenario immaginario in cui hai bisogno di una determinata libreria. Guarda i tuoi progetti passati; quali strumenti hai utilizzato e in quali scenari? È probabile che ti imbatterai di nuovo nelle stesse situazioni e vuoi essere preparato per questo, o almeno avere un'aspettativa.

Non tutte le librerie là fuori supportano TypeScript. Poiché Angular lo utilizza pesantemente, parte della bontà di TypeScript potrebbe scomparire durante l'utilizzo di tale libreria. Certo, puoi trovare una soluzione alternativa, ma è un po' più una seccatura. A causa della popolarità di Angular, potresti integrare le istruzioni nella pagina della libreria stessa.

Per Vue e React, sei responsabile di quasi tutto e l'utilizzo di altre librerie non fa eccezione. Se utilizzi Webpack o uno strumento di compilazione simile, puoi fare riferimento direttamente alle librerie installate tramite NPM. Ho trovato un po' una seccatura per Vue usare i plugin della community, specialmente quando contengono anche la logica dell'interfaccia utente.

Ember ha EmberObserver, che è un sito Web di plugin della comunità. Ognuno di loro ha un punteggio su una scala da zero a dieci. È davvero un ottimo posto per cercare qualcosa di cui hai bisogno. Se digiti il ​​nome delle tue librerie preferite, come Lodash, Rx o Ramda, troverai i relativi plugin da semplici wrapper a riscritture complete. Naturalmente, ci sono repository Awesome React e Awesome Vue che raccolgono risorse correlate, comprese le librerie, ma ho trovato EmberObserver particolarmente utile.

Impegnarsi in un framework JavaScript

La scelta del framework JavaScript giusto è uno dei passaggi più importanti per il successo del tuo progetto web. Sia che tu stia lavorando a un piccolo progetto o a uno grande, che tu stia lavorando da solo o in gruppo, ognuno di questi dettagli gioca un ruolo cruciale nel determinare quale framework è il migliore per il tuo progetto (e meno di quale potresti preferire ).

Per quanto riguarda le funzionalità principali e l'usabilità, ho elencato i punti che influenzeranno la produttività degli sviluppatori in vari gradi. L'usabilità è particolarmente complicata perché dipende fortemente dalla tua esperienza e dal tuo background, nonché dall'azienda o dall'organizzazione in cui lavori.

Nel tempo, i framework di cui abbiamo discusso in questo articolo potrebbero evolversi, la loro popolarità potrebbe cambiare e i progetti per i quali sono adatti potrebbero cambiare, ma questo articolo dovrebbe darti un'idea generale di dove ciascuno di questi framework potrebbe funzionare meglio.