13 strumenti di programmazione essenziali per il Web mobile

Quando si tratta di programmazione per dispositivi mobili, la scelta diventa rapidamente un dilemma. Ti rivolgi al redditizio mercato degli iPhone a scapito della marea crescente di Android? Diventi nativo o scrivi codice sul Web mobile? E mentre un singolo stack di codice che funziona in modo ottimale su una gamma sempre più ampia di piattaforme, fattori di forma e dispositivi sarebbe il sogno, la realtà è una prova frammentata in cui le attività rudimentali possono spesso essere una sfida.

Ma con le sfide e le opportunità arrivano menti curiose. E il gran numero di sviluppatori che dedicano la loro attenzione alla creazione di strumenti e biblioteche mobili stanno rapidamente stabilendo un ecosistema vivace per aiutare gli sviluppatori mobili, specialmente quelli che hanno scelto di rivolgersi al Web mobile.

[Anche su .com: scopri 4 modi per creare app Web per smartphone senza passare dall'App Store di Apple. | Tieniti aggiornato sulle informazioni chiave sullo sviluppo di applicazioni con il blog Fatal Exception e la newsletter Developer World. | Tieniti informato su notizie e approfondimenti sui dispositivi mobili con il blog Mobile Edge e la newsletter Mobilize. ]

Per un certo periodo, questo set è stato limitato. Ma la promessa dell'HTML5 ha aperto gli occhi a molti sviluppatori sulla miriade di vantaggi del Web mobile rispetto al tentativo di installare software nativo sul dispositivo.

Innanzitutto, i siti Web sono aperti. Non è necessario giocare a "mamma posso" con il team di approvazione dell'App Store quando il prodotto viene lanciato o aggiornato.

In secondo luogo, gli sviluppatori possono raccogliere il 100% delle entrate delle loro app mobili. Certo, devi trovare un modo per raccogliere i soldi da solo, il che non è sempre semplice. Ma il taglio del 30 percento che Apple prende dagli acquisti di app è una tariffa elevata per quella che è in gran parte una riga in un database e una grande burocrazia.

Terzo, HTML5 sta diventando più robusto e ricco di funzionalità. L'ultima versione ti consente di memorizzare i dati sul client e di fare la maggior parte delle cose che un'app nativa può fare. In altre parole, la sandbox del browser ha quasi tutte le stesse funzionalità della sandbox del codice nativo. E sì, le app del codice nativo sono conservate nel loro angolo sigillato del sistema operativo.

In quarto luogo, le app HTML5 non sono vincolate al dispositivo. Mentre gran parte dell'hype continua a orbitare attorno all'iPhone di Apple, le app HTML5 sono relativamente facili da spostare su altre piattaforme. Non è semplice come premere un pulsante, ma è molto più semplice che tradurre la tua app da Objective C a Java.

Ci sono ovviamente dei limiti. Le app Web possono cadere preda di problemi di connettività. Sono spesso un po 'più lenti e molti sviluppatori di app native amano sottolineare i ritardi di millisecondi che possono o meno essere evidenti. Gli sviluppatori di giochi vorranno pensarci due volte prima di affidarsi a codice intelligente e super reattivo in JavaScript.

Il limite più grande potrebbe essere nello sviluppo stesso. Sebbene gli strumenti di Apple siano abbastanza buoni per il peering nelle app native, è più difficile scavare a fondo nella struttura del codice in esecuzione sul tuo browser mobile. Tutto questo interesse per lo sviluppo mobile e il Web mobile ha generato una serie di librerie e strumenti per facilitare il processo di creazione di applicazioni con essi. Ecco un elenco di progetti accattivanti con il potenziale per rendere più conveniente la creazione del Web mobile.

Strumento di programmazione Web mobile: ChocolateChip-UI

Scarica ChocolateChip-UI

Lo spazio sul piccolo schermo dei dispositivi mobili attribuisce grande importanza al design dell'interfaccia efficace. Inserisci Robert Biggs, uno sviluppatore Web nel nord della California che ha creato ChocolateChip-UI, un framework per creare un'interfaccia mobile utile in HTML.

Tecnicamente, il codice sottostante creato dallo sviluppatore è WAML (Web Application Markup Language), un linguaggio di markup basato su HTML5. La maggior parte del lavoro facile viene svolto con tag WAML come o . Il JavaScript del framework funziona attraverso il WAML e lo trasforma in puro HMTL5 per lo smartphone.

Questa combinazione è leggera come una piuma. Puoi mescolare il tuo HTML, CSS e JavaScript nel WAML e naviga perfettamente nel processo di traduzione dell'interfaccia utente di ChocolateChip.

Anche se questo approccio non è perfetto, posso capire perché Biggs ha scelto questa strada. Mi sono perso nelle chiusure JavaScript di molti strumenti di sviluppo mobile prima e non è carino.

La raccolta di widget WAML di ChocolateChip-UI è abbastanza completa, che appaiono tutti come le interfacce utente standard di iPhone. Include anche extra come elenchi di eliminazione per consentire agli utenti di eliminare elementi da un elenco con pochi gesti del dito.

Strumento di programmazione Web mobile: Mobl

Scarica Mobl

JavaScript ha molti spigoli che continuano a irritare gli sviluppatori Web. Il team Mobl ha deciso di smussare questi bordi mentre costruiva un framework per la creazione di applicazioni mobili che funzionano nei browser WebKit. Invece di scrivere le tue istruzioni in HTML, JavaScript e CSS, le scrivi in ​​Mobl e il compilatore Mobl le trasforma in HTML, JavaScript e CSS per il browser mobile.

L'approccio ha consentito al team Mobl di risolvere alcuni dei problemi più complicati di JavaScript, come il modo in cui le funzioni vengono passate ad altre funzioni per l'esecuzione ritardata. Tenere traccia di tutte le parentesi nidificate necessarie per eseguire questa operazione in JavaScript può diventare rapidamente sconvolgente, aumentando la probabilità di errore.

Mobl elimina questa complessità utilizzando una sintassi più dichiarativa. Se vuoi mettere in pausa 1.000 millisecondi, scrivi:

sleep(1000); doNext();

Mobl lo compila in JavaScript con una setTimeoutfunzione e una callbackfunzione che verranno eseguite doNext(). Come sviluppatore, non devi pensare alla callbacksintassi oa come racchiudere tutto in un'altra funzione. Tutto quello che devi fare è scrivere un elenco di cose che vuoi che accadano.

Ci sono dozzine di modi in cui il team Mobl ti aiuta a scrivere queste istruzioni senza dover prestare attenzione a tutta la punteggiatura in JavaScript. Il risultato finale è una bella raccolta degli idiomi standard delle app mobili. Vuoi un elenco a scorrimento? Basta racchiudere il tuo elenco di elementi con la parola chiave del gruppo.

Gli sviluppatori a cui non piacerà questo approccio saranno quelli già a proprio agio con Objective-C o JavaScript. Dopo tutto, perché imparare ancora un'altra lingua con una sintassi leggermente diversa quando questa sintassi leggermente diversa verrà solo trasformata in qualcosa che già capiscono? Inoltre, gli amanti delle lingue potrebbero trovare una serie di buone idee nuove per far valere il viaggio.

Strumento di programmazione Web mobile: jQuery Mobile

Scarica jQuery Mobile

Quando le persone dietro il framework jQuery hanno deciso di affrontare le piattaforme mobili e creare un semplice toolkit dell'interfaccia utente per smartphone, era chiaro che avrebbe attirato l'attenzione e la sperimentazione diffusa. Il risultato è un progetto che è ben supportato da molti dei principali produttori di hardware ed è destinato ad avere un relativo successo sui dispositivi mobili.

La parte più semplice di jQuery Mobile è il suo layout incentrato sull'HTML. Le pagine sono costruite in DIV e altri componenti HTML standard come

  • tag. Di conseguenza, jQuery Mobile è facile da integrare con siti Web dinamici e CMS perché utilizzarlo è spesso solo questione di aggiungere un nuovo tema o skin. Esistono, ad esempio, diversi temi e moduli Drupal costruiti attorno a jQuery Mobile.

    La stretta integrazione con jQuery significa che molti ma non tutti i plug-in per desktop funzioneranno anche con siti Web mobili. Ci sono anche alcuni plug-in mobili creati per estendere il framework mobile. Il tocco leggero del framework e del fertile ecosistema costruito attorno a jQuery Mobile significa che probabilmente vedremo solo crescere il suo potere.

    Strumento di programmazione Web mobile: The-M-Project

    Scarica The-M-Project

    Se la raccolta di metodi e stili di jQuery Mobile non è abbastanza sofisticata, The-M-Project offre una raccolta di widget che vengono compilati in oggetti jQuery Mobile. Gestisce molti dei dettagli di design essenziali, come posizionare un'icona nel punto giusto, in modo da poter invece concentrarsi sul quadro più grande.

    Il codice è strutturato con il pattern Model-View-Controller. Gran parte del lavoro consiste nella creazione di una grande struttura JSON che definisce le diverse pagine e i widget che si trovano all'interno di tali pagine. Il layout è gestito da The-M-Project.

    Il comportamento dell'app viene definito creando funzioni associate a vari hook di eventi per ciascuna pagina. The-M-Project si occupa di garantire che gli eventi raggiungano la loro posizione.

    Non vale la pena che il processo di compilazione e distribuzione sia integrato con Node.js. Il codice per costruire la tua fantastica creazione funziona anche in Node.js; il test viene eseguito utilizzando lo stesso server. Quando funziona, puoi trasferire la combinazione di codice e libreria su qualsiasi server Web, oppure puoi integrarla ulteriormente con Node.js.

    Strumento di programmazione Web mobile: Touchqode

    Scarica Touchqode

    Sei seduto in un caffè a Parigi, in cima al Monte Everest o in qualsiasi altro luogo senza il tuo laptop o desktop. Un'idea ti colpisce. Lo scarabocchi su un pezzo di carta e ci torni più tardi? No, se hai Touchqode in esecuzione sul tuo telefono Android. (Una versione per iPhone sarà presto disponibile.)

    Questo piccolo ambiente di sviluppo racchiude un numero sorprendentemente elevato di funzionalità in un piccolo schermo. Il codice è evidenziato, gli script possono essere eseguiti localmente e puoi sincronizzare il tuo nuovo codice tramite FTP. Se il capo chiama quando sei in viaggio, dovresti avere pochi problemi a riparare qualcosa che richiede solo poche sequenze di tasti. Non riesco a immaginare di scrivere programmi lunghi con il mio telefono Android, ma dato che gli autori hanno composto interi romanzi sui loro cellulari, potrebbe essere troppo presto per presumere che gli utenti utilizzeranno Touchqode solo per creare poche righe di codice occasionale.

    Ad ogni modo, Touchqode è buono in un pizzico.

    Strumento di programmazione Web mobile: LimeJS

    Scarica LimeJS

    Uno dei motivi per cui i giochi Flash sono così avvincenti è il fertile ecosistema di scrittori di biblioteche che possono vendere il loro lavoro agli sviluppatori Flash. DigitalFruit ha creato LimeJS per offrire un supporto simile agli sviluppatori che desiderano utilizzare gli oggetti WebGL che fanno parte di HTML5.

    I primi risultati di LimeJS sono efficaci nei browser WebKit. Il codice è tecnicamente JavaScript, ma la struttura sembra simile al buon C vecchio stile, con chiamate alla libreria OpenGL. Dovrebbe essere possibile eseguire automaticamente la compilazione incrociata di alcuni OpenGL in questa libreria, sebbene ciò richiederà probabilmente una regolazione manuale.

    Le offerte di LimeJS sono alcune funzionalità utili per semplificare lo sviluppo del gioco. Ci sono scene piene di livelli e un regista che attiverà gli eventi secondo un programma flessibile. Ci sono animazioni e transizioni che spostano gli sprite attraverso le pagine. Tutte le funzionalità risulteranno familiari alle persone che hanno già scritto giochi casual.

    L'ambiente di sviluppo include diversi tocchi moderni. La costruzione di base è gestita in Python e il pacchetto finale può essere raggruppato insieme al compilatore di chiusura di Google in modo che venga scaricato più velocemente.

    LimeJS sarà interessante per chiunque abbia trascorso del tempo a sviluppare giochi per framework OpenGL in altri ambienti. Sebbene la sintassi finale sia JavaScript, non si basa sulle idee più complesse che rendono JavaScript scoraggiante per alcuni, almeno fino a quando il compilatore di chiusura non fa il suo lavoro.

    Strumento di programmazione Web mobile: Jdrop

    Altro su Jdrop

    A prima vista, Jdrop sembra essere un grande mucchio di JSON che potrebbe essere scambiato per un database NoSQL aperto. In pratica, questa risorsa Web è ottimizzata per aiutare gli sviluppatori mobili a eseguire il marshalling dei dati sulle prestazioni tra i piccoli schermi e il desktop, dove possono essere analizzati meglio.

    Per facilitare la difficoltà di estrarre il feedback sulle prestazioni dai dispositivi mobili, Jdrop offre Mobile Perf, un bookmarklet che aggrega un set di bookmarklet sulle prestazioni, tra cui Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess e Zoompf. Tramite Mobile Perf, puoi eseguire il debug della tua app su un telefono e archiviare automaticamente i dati risultanti nel cloud Jdrop per un'analisi successiva dal desktop, fornendo un modo interessante per eseguire il debug delle prestazioni mobili reali e per esaminare l'origine HTML dei tuoi siti mobili preferiti.

    Strumento di programmazione Web mobile: XUI, Zepto

    Scarica XUI

    Scarica Zepto

    La maggior parte dei framework descritti qui esistono per svolgere il lavoro pesante trasformando una descrizione dell'applicazione, spesso scritta nella propria lingua, in qualcosa che sembra abbastanza buono sulla pagina. XUI e Zepto sono molto diversi. Iniziano con l'idea che HTML e CSS sono già abbastanza bravi a visualizzare la maggior parte delle cose che si potrebbero voler mostrare e offrono solo aiuto per creare e modificare il DOM.

    Queste librerie non disporranno i tuoi widget né creeranno widget di alcun tipo. Ottieni ciò che offre l'HTML, quindi controlli il suo aspetto con CSS. La libreria è lì per aiutarti a manipolare il DOM offrendo funzionalità come la possibilità di trovare elementi, allegare classi e destreggiarsi tra eventi.

    Il guadagno è in termini di dimensioni. La versione attuale di Zepto pesa circa 2.300 byte, circa un decimo delle dimensioni di jQuery. XUI è solo un po 'più grande. Il confronto con jQuery è appropriato perché entrambi prendono in prestito gran parte della sintassi senza offrire nessuna delle funzionalità che richiedono un codice più sofisticato e pesante. XUI, ad esempio, estrae il codice che sarebbe necessario per essere compatibile con BlackBerry o IE Mobile. Se li vuoi, puoi ottenere una libreria più grossa.