Sencha Touch 2: Sviluppare applicazioni mobile multipiattaforma

Published in

Forgiatore di materia virtuale

6 min readApr 14, 2014

il “Club degli Sviluppatori” ha ormai raggiunto la tenera età di 1 anno. Per chi non conosce il club, siamo un gruppo di persone di Bari che si pongono l’obiettivo di creare una rete di professionisti nel campo dello sviluppo del software.

I principi su cui si fonda questo gruppo sono semplici e di forte ispirazione ai principi dell’ Extreme Programming:
1. Confronto
2. scambio di Conoscenze
3. Coraggio
4. Chiarezza

Per tenere attivo il gruppo, ogni mese, un membro propone un talk da tenere al prossimo incontro. In caso ci sono più proposte, parte il sondaggio e si vota all’interno del gruppo di linkedin.

Questa volta è toccato a me e ho preparato un talk su Sencha Touch: un framework per lo sviluppo di applicazioni mobile multipiattaforma ad alte prestazioni. In questo articolo vi farà un riassunto degli argomenti che ho trattato e vi allegherò in vari punti le slide.

Il talk si è diviso principalmente in 4 parti.

“HTML5 is not ready” — Mark Zuckberg

Il team di Facebook per un certo periodo ha cercato di sviluppare l’applicazione mobile basandola principalmente su html5. Zuckberg, non soddisfatto delle sue prestazioni, ha deciso però di cambiare strada e di sviluppare l’applicazione nativamente. Il nostro amico mark dice per l’appunto che secondo la sua esperienza l’Html5 non è pronta ad affrontare lo sviluppo di applicazioni mobile. Chiaramente una app capace di sfruttare in maniera diretta l’hardware degli smartphone avrà performance nettamente superiori rispetto a un’app sviluppata in html5. Il punto però non è avere un dispositivo più potente possibile e/o accedere direttamente al suo hardware per sfruttare al meglio le sue perfomance ma sviluppare app che siano ottimizzate a dovere. Al team di facebook gli sarà sfuggito questo particolare: quando si sviluppano applicazioni mobile in html5, non è come sviluppare applicazioni web. Questo perchè bisogna fare molta attenzione ad ottimizzare e gestire al meglio il dom, lo scambio di richieste http e tanti altri minuscoli particolari.

Quello che ho cercato di fare durante la prima parte del talk è di smontare l’affermazione di Mark Zuckerberg ponendo la stessa domanda che il team di Sencha si è posta:

“ Siamo sicuri che il problema risiede nella tecnologia e non dell’artigiano ?” — Sencha

Chiaramente quelli di Sencha hanno cercato di rispondere al loro stesso dubbio…. in che modo !? Sviluppando un componente principale di facebook in html5, il news feed. Nasce così FASTBOOK:

L’obiettivo di fastbook è stato quello di confrontare il news feed di facebook nativo con un clone realizzato in html5.

In questo articolo trovate tutti i dettagli e le considerazioni che il team di sencha ha fatto per sviluppare l’app mantendo alte le perfomance.

Dopo che avete visto il video starete sicuramente pensando….”cavolo con Sencha Touch posso sviluppare applicazioni ad altissime perfomance !!! “ ! Il punto non è il framework che state utilizzando…ma come lo utilizzate ! Infatti il framework sicuramente fa la sua parte…ma se non utilizzato correttamente avrete sempre e comunque un’applicazione a basse prestazioni.

Ho focalizzato la seconda parte del talk proprio su questo punto : saper gestire il DOM in maniera corretta.

Manipolare il DOM

Cosa è questo DOM ? in sostanza rappresenta la struttura della pagina HTML che in termini informatici altro non è che un albero con all’interno i vari nodi.

[caption id=”attachment_1304" align=”aligncenter” width=”550"]

DOM — Struttura di una pagina html[/caption]

Il segreto (che tanto segreto non è ) è manipolare correttamente il dom e cercare di mantenerlo il più piccolo possibile in ogni momento dell’esecuzione nella nostra applicazione. Durante il talk ho fatto vedere alcuni esempi molto semplici su come ottimizzare al meglio la gestione del dom. Ad esempio ho parlato dell’uso corretto di come delegare gli eventi, su come mantenere il dom a dimensioni contenute o ancora su come manipolare il dom. Sulle slide trovate tutti gli esempi. Per maggiori approfondimenti potete anche leggere questo articolo .

Ho parlato anche dei Web Workers, uno standard html5 (forse poco conosciuto) che vi permette di eseguire script javascript su thread separati, sfruttando così le future cpu multicore e non bloccando l’interfaccia sulla quale l’utente potrà continuare a interagire. In sostanza l’idea è di dividere un grosso compito in compiti più piccoli e farli eseguire in maniera parallela su uno o più workers (divide et impera). Quindi riassumendo, un worker altro non è che uno script javascript che gira su un thread separato. In questo esempio calcoliamo i numeri primi fino a 150.000 stampando l’output a video. Tornando a fastbook, i Web Workers sono stati utilizzati per manipolare le richieste e codificare/decodificare messaggi json. I web workers chiaramente potete utilizzarli anche con jquery ad esempio. Questo per farvi capire che le ottimizzazioni possono essere fatte con qualsiasi framework o libreria che state utilizzando

SENCHA TOUCH: PANORAMICA

Fatto queste premesse sul dom, ho parlato di Sencha Touch e di alcuni suoi vantaggi:

temi css nativi (ios, android, windows phone, etc.) alla vostra applicazione
a disposizione una serie di widgets da far invidia a jquery mobile. Un’applicazione che raccoglie tutti i widget che sencha touch offre la trovate a questo link: http://docs.sencha.com/touch/2.3.0/#!/example/kitchen-sink
l’uso dei model, degli store e dei proxy che vi permettono di sincronizzare i vostri dati all’interno dell’app sfruttando dei web service che abbiamo scritto in modalità RESTFUL e quindi senza dover scrivere una linea di codice per gestire tutta la sincronizzazione.
supporto a sistemi di cache.
supporto a Cordova, in modo così da poter sfruttare alcuni componenti hardware che il dispositivo mobile offre (fotocamera, gps, notifiche locali, etc.).
integrazione a Sencha CMD, un tool a linea di comando che vi permette di creare il workspace della vostra applicazione in sencha touch, minificare e unire il codice finale in unico file con all’interno solo le classi del framework che effettivamente andrete a utilizzare, fare il building finale dei vari progetti nei relativi workspace (ad esempio con una linea di comando potete creare il progetto in xcode, o per eclipse)
supporto per Android, iOs, Window Phone, Blackberry, etc.
Supporto pattern MVC

Per una lista completa delle features offerte vi invito a visitare questo link

Un altro vantaggio di Sencha Touch è il fatto di prendere due piccioni con una fava: se sapete usare sencha touch, riuscirete a prendere un’immediata dimestichezza anche con Sencha Ext JS, un altro framework offerto da Sencha per lo sviluppo di Applicazioni Web Single Page APP.

Sencha Touch inoltre è accompagnato anche da un’ottimo ide di sviluppo che si chiama SENCHA ARCHITECT. Un breve video panoramico di Sencha Architect lo vedete qui

SESSIONE LIVE : SVILUPPARE UN’APP CON SENCHA TOUCH

Infine, la quarta parte del talk ho fatto una sessione live sviluppando un’applicazione To Do List. Anche qui nelle slide trovate tutte le varie fasi, che ho eseguito durante la sessione.

CONCLUSIONI

A differenza di jQuery Mobile che si presenza come una semplice libreria, Sencha Touch è un vero e proprio framework per sviluppare progetti di medio/alto livello. Il suo ide di sviluppo Sencha Architect è sicuramente una mano dal cielo per aiutare a sviluppare e mantenere meglio il vostro codice pulito e ordinato. Se volete iniziare a sviluppare progetti abbastanza complessi Sencha Touch combinato a Sencha Architect sicuramente è il framework che fa per voi. La sua curva di apprendimento è abbastanza ripida, sopratutto per chi non ha dimestichezza con javascript e il paradigma a programmazione ad oggetti. Per questo invito ad approfondire meglio javascript, che non è così banale come può sembrare. Ha tante di quelle insidie che sicuramente potreste mettervi le mani nei capelli, se i capelli vi sono rimasti :). Vi ricordo inoltre che Sencha Touch non fa nulla di magico e sta sempre a voi gestire al meglio il dom per ottimizzare le vostre applicazioni. Questo discorso vale con qualsiasi framework/libreria javascript utilizzerete.