In questo articolo cercheremo di capire quali sono i principali framework javascript e soprattutto quali sono le risorse da consultare per meglio capire (e quindi scegliere) un framework javascript MVC (model-view-controller).
Non sapete cosa sia il design pattern MVC?
Allora vi consiglio di dare uno sguardo a questo mio articolo
nel quale parlo dell’anatomia di una webapp basata su mongodb, node.js e backbone.js come framework MVC
I contenuti dell'articolo
Prima di iniziare, perché proprio javascript?
Perché javascript presenta una serie di vantaggi non da poco che lo rendono decisamente interessante nel panorama dei linguaggi di programmazione attuali, quali:
- Full stack development: possibilità di utilizzare il medesimo linguaggio di programmazione per tutta la filiera applicativa: client (Es. backbone.js, Angular.js, jquery), server (node.js) e data base (Es. mongoDB)
- E’ Portabile: semplice portabilità di una webapp javascript su dispositivi mobili (smartphone/tablet/desktop) attraverso l’utilizzo di framework quali phonegap e cordova
- E’ Popolare: è uno dei linguaggi di programmazione più conosciuti e diffusi al mondo (se non il più popolare), questo lo rende molto “appetibile” per l’industria informatica del momento e fa si che attorno ad esso ci sia un continuo interesse da parte della community mondiale di sviluppatori.
- E’ Responsive: perfettamente integrato con HTML5, è parte integrante del web 2.0
- E’ Veloce: per sua natura javascript è un linguaggio veloce e performante, orientato agli eventi o anche event-driven, nativamente nella sua versione server (node.js) ma anche nella versione client se ben strutturato (es. jquery)
Questi sono solo alcuni dei vantaggi di javascript, ne potrei citare molti altri così come potrei citare anche alcuni difetti, primo fra tutti il fatto che non essendo compilato, se mal utilizzato, potrebbe davvero far danni e risultare poco sicuro.
Fatta questa breve premessa torniamo ai vari framework javascript in circolazione.
I javascript framework MVC
Alla domanda: “ma quanti framework javascript ci sono in circolazione?”
La risposta che potremmo dare è: “tanti, forse troppi!”
Questi sono solo alcuni dei principali:
- Backbone.js – http://backbonejs.org/
- AngularJS – https://angularjs.org/
- Ember.js – http://emberjs.com/
- KnockoutJS – http://knockoutjs.com/
- React – https://reactjs.org/
- Dojo – http://dojotoolkit.org/
- YUI – http://yuilibrary.com/
- Agility.js – http://agilityjs.com/
- Knockback.js – http://kmalakoff.github.io/knockback/
- CanJS – http://canjs.com/
- Maria – http://peter.michaux.ca/maria/
- Polymer – https://www.polymer-project.org/
- Mithril – http://lhorie.github.io/mithril/
- Ampersand – https://ampersandjs.com/
- Flight – https://flightjs.github.io/
- Vue.js – http://vuejs.org/
Come potete ben immagine la risposta su “quale scegliere” non è semplice, dipende da molti fattori che potremmo riassumere in questo modo:
- Scelta in funzione del Know How del team di sviluppo
- Scelta in funzione dell’affinità (predilezione) che un programmatore potrebbe avere nei confronti di un framework
- Scelta sulla base del più affermato sul mercato
- Scelta sulla base della documentazione presente online
- Scelta sulla base della robustezza e completezza del framework
Insomma potremmo scegliere il framework usando uno (o più) dei criteri appena citati, fatto sta che è importante scegliere e scegliere bene.
Capiamo meglio come funzionano
Se volete farvi un’idea di come ognuno dei framework appena descritti “lavora” su una medesima applicazione (ToDo app) allora non potete non consultare il seguente link:
Una raccolta di codice, documentazione ed esempi in relazione a numerosi framework javascript basati tutti sulla medesima applicazione, appunto un’ app che gestisce le cose “da fare” (ToDo)
Gli esempi sono raccolti per:
- framework in puro javascript
- framework che compilano in javascript
- framework beta in puro javascript
In tutti e tre i casi vengono ulteriormente suddivisi per framework:
- mvc
- realtime
- server side (node.js)
- applicazioni realizzate con implementazioni “non framework”
E’ quindi un utile strumento di comparazione ed analisi tra framework.
I framework più conosciuti
Detto ciò non posso non citare i principali ossia i più usati e conosciuti tra quelli elencati e sui quali, a mio avviso, è bene porre una particolare attenzione:
- AngularJS – https://angularjs.org/
- Backbone.js – http://backbonejs.org/
- Ember.js – http://emberjs.com/
- React.js – https://reactjs.org/
Questo il trend delle ricerce su google in relazione a questi tre framework
AngularJS
Il primo è il framework di casa Google, probabilmente (ad oggi) ancora il framework con l’appeal migliore tra i quattro, di certo quello che presenta una curva di apprendimento più alta ma di sicuro il più richiesto, insieme a react.js, ad oggi sul mercato ed anche il più completo e documentato.
Non ha dipendenze con altre librerie ed è concesso con licenza MIT, questi alcuni riferimenti:
Documentazione ufficiale Google
https://docs.angularjs.org/guide
Tre ottimi tutorial sulle best practice Angular
http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/
http://www.artandlogic.com/blog/2013/05/angularjs-best-practices-ive-been-doing-it-wrong-part-2-of-3/
http://www.artandlogic.com/blog/2013/05/angularjs-best-practices-ive-been-doing-it-wrong-part-3-of-3/
Altro interessante tutorial su come costruire una webapp partendo da un template standard
http://code.tutsplus.com/tutorials/building-a-web-app-from-scratch-in-angularjs–net-32944
React.js
React.js è una libreria javascript sviluppata dai creatori di facebook che consente di creare Single Page Application (SPAs) in modo semplice ed intuitivo.
Ad oggi è molto probabilmente, insieme ad Angular, il framework javascript più utilizzato e conosciuto al mondo.
Ogni singola componente react è una classe javascript che estende la classe Component fornita da react. Ogni componente rappresenta uno “snippet” o “widget” ossia un pezzo di codice HTML indipendente ed auto consistente che implementa una specifica funzionalità applicativa lato client. La scrittura del codice si basa sulla sintassi JSX appositamente creata per agevolare l'interazione tra javascript ed html.
Trovate tutta la documentazione al link: https://reactjs.org/
Backbone.js
Il framework, dei quattro, che conosco meglio e del quale posso quindi parlare con cognizione di causa.
Il molti non lo considerano un vero e proprio framework ma più un’ottimo strumento per modellare e strutturare il codice.
Questo è (in parte) vero anche se, a mio avviso, è proprio questa caratteristica a rendere backbone una scelta interessante proprio perché lascia più spazio al programmatore e meno al framework.
Questo a me piace, ma le mie sono solo opinioni ed “affinità” personali.
Fatto è che Backbone, a differenza di Angular, da solo non serve a molto, lo si deve abbinare obbligatoriamente a underscore.js e jquery, inoltre è consigliato abbinarvi altre piccole librerie per “customizzarlo” e renderlo effettivamente un buon prodotto.
Come detto dipende da underscore.js anche se è consigliato includere jquery per il supporto di alcune funzionalità, è concesso con licenza MIT e questi sono alcuni riferimenti:
Documentazione
http://backbonejs.org/#introduction
Alcuni tutorial
http://backbonetutorials.com
Un mio articolo
Ember.js
Dei quattro è il framework che conosco meno, formalmente conosciuto come Sproutcore 2.0 nasce per rendere il più semplice possibile la costruzione di webapp in javascript.
Relativamente giovane, lo si può approcciare nel caso in cui non si conosca nessun framework e non si abbia il tempo per imparare Angular.js.
Dipende solo da jquery e Handlebars per il templating, è concesso con licenza MIT e questi sono alcuni riferimenti:
Documentazione ufficiale
http://emberjs.com/guides/
Riferimenti ad alcuni tutorial
http://emberjs.com/community/#footer
Conclusioni
Come abbiamo visto la scelta di un javascript framework MVC non è semplice per una serie di fattori tra cui la numerosità delle opzioni a disposizione, le caratteristiche del framework stesso, le peculiarità del team di sviluppo e molto altro ancora.
E tu quale framework javascript utilizzi? sapresti consigliarne uno? e perché?
2 commenti
Manca React 🙂
Ciao Luca
Hai ragione, devo aggiornare l’articolo!