I framework javascript MVC

Come scegliere il giusto framework javascript MVC? This site is optimized with the Yoast SEO plugin v3.4 - https://yoast.com/wordpress/plugins/seo/ / Yoast SEO plugin. analytics // node log heroku c9.io localhost end node log →<!-- ebay [if IE]> <![endif][if lt IE 9]> <![endif][if IE 9]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie9.css" /> <![endif][if IE 8]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie8.css" /> <![endif][if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie7.css" /> <![endif]

StartFragment

Come scegliere il giusto framework javascript MVC?

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

StartFragment

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.

StartFragment

I javascript framework MVC

Alla domanda: “ma quanti framework javascript ci sono in circolazione?”

StartFragment

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/
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/
React – http://facebook.github.io/react/
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.

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:

http://todomvc.com/

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.

StartFragment

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/

EndFragment

StartFragmentAngularJSEndFragment

StartFragment

Il primo è il framework di casa Google, probabilmente (ad oggi) il framework con l’appeal migliore tra i tre, di certo quello che presenta una curva di apprendimento più alta ma di sicuro il più richiesto 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

EndFragment

This site is optimized with the Yoast SEO plugin v3.4 - https://yoast.com/wordpress/plugins/seo/ / Yoast SEO plugin. analytics // node log heroku c9.io localhost end node log →<!-- ebay [if IE]> <![endif][if lt IE 9]> <![endif][if IE 9]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie9.css" /> <![endif][if IE 8]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie8.css" /> <![endif][if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="http://www.pensando.it/wp/wp-content/themes/woohoo/css/ie7.css" /> <![endif]

StartFragmentBackbone.jsEndFragment

StartFragment

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

StartFragmentEmber.jsEndFragment

StartFragment

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

http://jonathanmh.com/best-javascript-mvc-frameworks-2013-2014/

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é?