upCreative » mvc

HTML5 Mobile App: l’importanza del framework MVC

upcreative — Sat, 12 Apr 2014 10:57:42 +0000

Tutti gli sviluppatori e web designers hanno a che fare prima o poi con la manipolazione di elementi HTML DOM, momento in cui fanno conoscenza solitamente di jQuery, che con tutti i plugin disponibili offre una mano non indifferente.

Il problema sorge di solito quando non si tratta più di realizzare siti web, ma iniziamo ad affacciarsi al mondo delle web app, dove è facilissimo perdersi in una pila infinita di elementi DOM e callback javascript intrecciate e nidificate tra di loro.

Visto che il numero di dispositivi mobile sta crescendo a vista d’occhio e sempre più sistemi operativi stanno rivolgendosi verso la direzione delle single page applications, (hai notato che anche le applicazioni di Windows-8 sono single-page-app costruite in HTML5?), ma soprattutto perché esse costituiscono il metodo principale per lo sviluppo di HTML5 Mobile App ibride, è opportuno considerare l’approccio a Frameworks Javascript Moderni.

Tali frameworks ci possono assistere nel processo di strutturazione ed organizzazione dei nostri progetti, facendo in modo che essi risultino facilmente mantenibili e scalabili anche a lungo-termine.

#Javascript #HTML #mobileapp: l’importanza del #framework #MVC
Click To Tweet

HTML5 Mobile App: MVC, Di cosa si tratta?

Questi nuovi framework sono nati con il preciso scopo di fornire allo sviluppatore un modo efficace di organizzare il codice usando delle variazioni del design pattern MVC, ovvero quella logica di programmazione che prende in considerazione tre tipi di entità:

Modelli (models): rappresentano l’astrazione dei dati. Un modello notifica a tutti i componenti che stanno “osservando” il suo comportamento quale sia il suo stato attuale. Per fare un esempio più concreto, un modello definisce il tipo di dato in questione: può rappresentare una persona, una nota, un file, un articolo.
Viste (views): sono gli elementi che compongono l’interfaccia di un’applicazione. Generalmente (ma non necessariamente) ad ogni vista è associato un model (per esempio, nella parte di interfaccia che mostra un’ipotetica lista di articoli, ogni riga della lista è costituita da una view, quindi ad ogni view è associato il model dell’articolo). Il compito della view è quello di “osservare” il comportamento del model associato ed agire di conseguenza, ma senza interferire con esso.
Controller: è quella parte dell’ applicazione che gestisce gli input (ovvero le azioni dell’utente) e modifica i model di conseguenza. Quando un model viene modificato o cambia di stato per mezzo del controller, la view associata, che sta “osservando” quel model, opera gli opportuni cambiamenti. Quindi possiamo dire che il controller gestisce le view indirettamente.

Solitamente i models sono raggruppati in collections, ovvero “liste di models” che possono anch’essi essere associati ad una o più views, come succede per i models.

Ecco uno schema di come funziona la maggior parte dei frameworks MVC:

Per sapere di più sui javascript design patterns ti consiglio di leggere questo mio articolo:

Web Applications: scrivere codice ben strutturato con i Javascript Design Patterns

HTML5 Mobile App: perché usare un framework MVC

Un’applicazione Mobile realizzata in HTML5, CSS3 e Javascript rappresenta a tutti gli effetti una single-page-application.

Anche le app più semplici, che magari sono costituite da 3 o 4 schermate, il più delle volte hanno una user-interface molto complicata, a causa di tutte le richieste HTTP presenti, gli aggiornamenti del markup, le modifiche del DOM ecc. (senza contare che una schermata ne può avere di per sé altre al suo interno, come per esempio in una lista di elementi ).

Gli sviluppatori che scrivono “a naso” il loro codice, quindi senza utilizzare dei framework per la struttura logica dell’applicazione, inconsapevolmente creano delle view, dei model, e dei controller: l’unica differenza è che tutto ciò che fanno non è riusabile, ne tantomeno mantenibile.

In altre parole, finché il progetto rimane di piccole dimensioni riesce a “stare in piedi”, ma appena si complica anche solo di poco e diventa necessario aggiungere o modificare una parte dell’interfaccia, allora molto probabilmente cadrà in mille pezzi.

I Javascripts frameworks MVC, oltre a fornire robusti e stabili controlli come Models, Views e Controllers, forniscono anche una solida struttura, comprensiva di soluzioni testate negli anni da una gigantesca community di sviluppatori, che prima di noi hanno affrontato e risolto tutti gli stessi problemi logici e di programmazione in cui potremmo incappare nei nostri progetti.

Ciò può costituire un incredibile risparmio di tempo (se sei un web designer o sviluppatore sicuramente saprai cosa significa).

Non so se hai mai notato applicazioni come Asana, Trello, Todoist, Wunderlist, ma anche Twitter o gli stessi Gmail e Google Drive (la lista sarebbe infinita): si tratta di single page application che caricano tutte le risorse come script, stili e views all’inizio, per poi modificare l’interfaccia con i dati che hanno già ottenuto, senza mai ricaricare la pagina, ma lasciando tutto il “duro lavoro” della gestione dei dati (creazione, modifica, eliminazione) al server, attraverso opportune richieste HTTP asincrone (le chiamate ajax).

Quindi, ricapitolando, se stai progettando un’applicazione che, come appunto tutte le HTML5 mobile app Ibride (ma anche le web application desktop), si serve di un servizio dati API di back-end, e si deve solo preoccupare di gestire le varie parti dell’interfaccia senza ricaricare mai la pagina (Single Page Application), allora l’impiego di un Javascript Framework MVC è proprio quello che ti serve.

Tuttavia, se stai progettando una semplice app in cui la generazione del markup risiede perlopiù nel server, mentre lato-client sono sufficienti pochi comandi jQuery per modificare il DOM del documento (come generalmente accade in un normale sito web), allora forse non ha senso impostare il tuo prossimo progetto basandolo su di un framework MVC, situazione in cui tutte le sue funzionalità sarebbero superflue.

Ma noi stiamo parlando di HTML5 Mobile App giusto?

Il framework MVC è quello che fa al caso nostro.

La scelta giusta per #HTML #mobileapp – i #framework #MVC
Click To Tweet

La difficoltà nell’apprendere la programmazione MVC

A causa del vertiginoso progresso dei dispositivi client (in particolare di quelli mobili) che sta avvenendo in questi ultimi anni, il numero di sviluppatori javascript (quindi in particolare quelli che si occupano di interfacce front-end) è cresciuto a dismisura, e questo tipo di programmazione ha subìto come una “rinascita”.

Il tipo di linguaggio non è molto diverso da quello con il quale la maggior parte degli sviluppatori sono stati abituati a programmare in passato, sia per quanto riguarda la realizzazione di desktop software che di web application. Nel corso degli anni, infatti, gli sviluppatori sono stati abituati ad usare diversi tipi di linguaggi, come C++ o Java per i software client, o PHP, ASP, Python, ASP.NET ecc. per quelli web-based.

Linea temporale della nascita e dell’utilizzo nel corso degli anni dei linguaggi di programmazione più usati

Possiamo affermare che la logica dell’ MVC per strutturare un’applicazione deriva effettivamente dalle precedenti generazioni di linguaggi, sin dagli anni 70.

Tuttavia, per tutti coloro che in questi ultimi anni hanno iniziato la propria carriera di web designers con linguaggi come ASP o PHP, è ancora molto difficile iniziare a comprendere il funzionamento di un’applicazione Javascript MVC.

E’ normale.

E’ normale soprattutto per quelli che fanno un utilizzo massiccio di codice lato-server per la generazione dell’interfaccia, i quali si trovano molto confusi, in particolare per quanto riguarda i concetti di view e di generazione di markup lato-client.

Effettivamente quello di comprendere la logica MVC è uno scoglio abbastanza grosso da abbattere, ma una volta superato questo ostacolo il divertimento è assicurato:

velocità di scrittura
organizzazione tra le viste
riusabilità di una stessa vista da tutte le parti dell’applicazione
scalabilità del codice: l’applicazione è facilmente espandibile e riducibile senza alcun problema
estrema separazione del codice lato-client e codice lato-server – che costituisce un’altro elevato fattore di scalabilità e mantenibilità

sono solo alcuni dei vantaggi che offre l’MVC.

Sei mai stato a Mirabilandia?

Periodicamente mi piace andare con i miei amici a Mirabilandia, che si trova a Ravenna, a sole due ore di macchina da dove vivo (Città di Castello, Perugia); nonostante i vari impegni, cerco di andarci nel mezzo della settimana, quando c’è meno gente ed è possibile divertirsi con le varie giostre senza fare code troppo elevate.

La giostra che mi piace di più è il Katun (l’hai mai provato?).

Fonte della foto: Flickr

Il Katun è progettato in modo tale che appena la giostra parte c’è una salita non indifferente, che viene percorsa molto piano, in modo da alimentare la paura del visitatore, prima di partire a grande velocità.

E ci riesce eccome! Ogni volta che salgo per la prima volta nel Katun dopo molto tempo, l’ansia e la paura durante quella salita sono alle stelle, ma appena la giostra parte il divertimento è assicurato da una grandissima scarica di adrenalina, tanto che appena finito il giro, mi fiondo di nuovo a fare la fila per farne un’altro.

Posso dire che vado a Mirabilandia solo per salire sul Katun.

Imparare il framework MVC è un po come andare sul Katun, superata la salita iniziale, progettare interfacce web javascript e single page application diventa un vero e proprio divertimento, grazie alla semplicità e alla facilità con cui è possibile aggiornare le varie views in modo indipendente dagli altri componenti.

Programmare con #frameworks #MVC è come andare a Mirabilandia!
Click To Tweet

HTML5 Mobile App ed MVC: Conclusioni

Visto che stiamo parlando di HTML5 Mobile App sviluppate in HTML5, CSS3 e Javascript, e che applicazioni di questo tipo sono a tutti gli effetti single page application, ovvero quei tipi di progetti in cui la pagina non viene mai ricaricata e tutte le operazioni di creazione, modifica e cancellazione dei dati viene delegata al server tramite un servizio di restful API, invito enormemente tutti gli sviluppatori client a cominciare ad interessarsi all’MVC.

Siccome, analogamente a molti altri campi (come quello del web marketing), ci stiamo affacciando solo ora a questo aspetto della programmazione, mentre molti altri paesi lo stanno già facendo da tempo, e siccome il mondo delle client web application è in costante evoluzione, qualsiasi web designer e sviluppatore front-end dovrebbe secondo me considerare di inserire l’MVC nelle proprie skills, magari dedicando parte del proprio tempo a capirne il funzionamento.

E tu cosa ne pensi? Hai mai provato a sviluppare un tuo progetto Javascript con la logica dell’MVC? Scrivilo nei commenti!

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando la programmazione MVC insieme a molte altre tecniche, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

The post HTML5 Mobile App: l’importanza del framework MVC appeared first on upCreative.

I sistemi di javascript templating e le migliori librerie

upcreative — Thu, 24 Oct 2013 08:59:53 +0000

Numerose sono le librerie nate per supportare lo sviluppatore durante il processo di creazione di una web app javascript, ognuna relativa ad una determinata fase. Una categoria che ricopre grande importanza è senz’altro quella che riguarda il sistema di javascript templating.

Per la realizzazione di un’applicazione javascript infatti, vengono utilizzati nella maggior parte dei casi i template engines, che permettono di aggiornare facilmente il markup HTML dell’interfaccia invece di preoccuparsi di farlo in modo “manuale” usando librerie come jQuery.

Molteplici sono i benefici derivanti dall’utilizzo di questi sistemi, tra i quali possiamo sottolineare:

aumento delle performance di esecuzione
riduzione e pulizia del codice
velocità di sviluppo

Come funzionano i sistemi di templating?

La grande utilità di questi tipi di framework risiede nel fatto che la logica secondo la quale essi funzionano richiama a grandi linee quella dei template HTML generati usando linguaggi lato-server.

Nei markup HTML infatti, che sono dichiarati solitamente in file Javascript o all’interno del documento (sottoforma di tag script con un type attribute alternate) o in una variabile di tipo string, possono essere inserite delle variabili, dei cicli o delle condizioni secondo sintassi specifiche, e in alcuni casi può essere utilizzato direttamente anche codice javascript.

Il funzionamento è molto semplice: per prima cosa viene creato il markup, poi viene creata una compilazione tramite javascript, la quale è infine combinata con i dati che abbiamo a disposizione e per generare l’HTML da inserire in un punto specifico dell’interfaccia.

Di solito questo processo è gestito dai moduli delle View del progetto (nel caso di una architettura di tipo MVC), e viene richiamato ogni volta che il Model a cui quella view è collegata subisce delle modifiche.

Ecco l’esempio di una View che, all’evento di modifica del model associato, richiama l’aggiornamento del proprio markup tramite il sistema di templating (il codice è prelevato da una mia applicazione scritta utilizzando il framework MVC Backbone.js).

window.WeathericonsView = Backbone.View.extend({    	
    initialize:function () {
        //all'evento di cambiamento degli attributi del model,
        // viene richiamata la funzione 'render' della view
        this.listenTo(this.model, "change", this.render);		
    },    
    render:function () { 
        //this.template è la compilazione del template,
        //attribuita alla view da un javascript di utilità esterno

        //l'istruzione this.model.toJSON() converte i dati del model 
        //in formato json per poter essere processato dal sistema 
        //di templating
        this.$el.html(this.template(this.model.toJSON())); 
        return this;
    }

});

Nei progetti più complessi, ai fini di una buona strutturazione, è pratica molto comune creare un file .html separato per il template di ogni view (che vengono poi richiamati tramite tools javascript come require.js), in modo da distinguere ogni componente dall’altro.

I framework più conosciuti ed utilizzati

Nel mondo del web sono nati numerosi framework open-source per il templating client-side. La decisione su quale utilizzare è dettata da molti fattori, come per esempio l’architettura e la complessità del progetto, le performance di esecuzione del sistema o la sintassi utilizzata (ogni sistema utilizza la propria).

I vari tipi di template engines si suddividono in due categorie principali:

embedded javascript, che comprende i frameworks che permettono l’utilizzo di codice javascript all’interno dei propri template
logic less, che comprende quelli che non permettono l’utilizzo di javascript, ma che limitano l’uso di logiche come cicli e condizioni a sintassi personalizzate

Di seguito voglio proporti i sistemi di templating più utilizzati e performanti, e con cui personalmente mi sono trovato più a mio agio.

Underscore.js

E’ un sistema di templating proprio della libreria underscore.js, viene richiamato con il metodo _.template e appartiene alla categoria degli embedded javascript. E’ indicato per progetti con architettura più semplice, e visto che la maggior parte dei progetti javascript include solitamente la libreria underscore (per via delle innumerevoli funzioni di utilità che offre), questo sistema di template costituisce una risorsa molto utilizzata.

Handlebars.js

Se hai bisogno di realizzare qualcosa di più complesso e con maggiore flessibilità, allora Handlebars fa al caso tuo. Appartenente alla categoria Logic-less, grazie ai suoi numerosi costrutti logici (come loop e condizioni – rispettivamente #each e #if), alla presenza di funzioni di utilità globali ed alla possibilità di scrivere funzioni personalizzate, con Handlebars avrai a disposizione un tutto il necessario per la creazione di template molto complessi.

Mustache.js

Altro sistema logic-less molto utilizzato, nonché ottima soluzione di templating, costituisce la base del sopra citato handlebars.js, quindi si presenta molto più semplice e con qualche funzione di utilità in meno. Grazie alla sua sintassi pulita è facile da scrivere, rileggere e mantenere, anche se in alcuni casi troppo basilare. Inoltre il markup non viene pre compilato e quindi ha una velocità di rendering più lenta di Handlebars.

Dust.js

Sviluppato da LinkedIn, dust.js è un altro logic-less che offre una logica molto semplice ed intuitiva, per codice più pulito e compatto; presenta una buona collezione di funzioni di utilità, la possibilità di generare il markup in modo asincrono e quella di cerare template “assemblabili”.

Hogan.js

E’ sviluppato da Twitter, rappresenta una soluzione di templating logic-less molto semplice ed alquanto basilare. Costruito come handlebars.js sulla base di mustache, anch’esso prevede un processo di precompilazione che velocizza quello di rendering.

Embedded.js

Come afferma il suo nome, Embedded JS appartiene alla categoria degli embedded-javascript. Esso utilizza gli stessi tag di underscore e funzioni di utilità inspirate a Ruby on Rails. Con questo sistema ogni template deve essere salvato in un file separato, il cui nome viene poi passato alla funzione di rendering.

Jade templating

Altro logic-less, costituisce un sistema molto diverso dagli altri, per una caratteristica in particolare, la sintassi, che si basa in massima parte sull’impiego di indentazioni di riga e spazi.

Altri sistemi di templating engine:

The post I sistemi di javascript templating e le migliori librerie appeared first on upCreative.