Sviluppo di applicazioni Web mobili: quando, perché e come

Ci sono 6,8 miliardi di persone sul pianeta, 5,1 miliardi delle quali possiedono un cellulare. E oggi, una percentuale sempre crescente di questi dispositivi sono smartphone. Secondo un recente studio del Pew Research Center, il numero di utenti che accedono a Internet dai propri smartphone è più che raddoppiato negli ultimi 5 anni, così come il numero di utenti che scaricano e utilizzano app mobili. Di coloro che utilizzano Internet o la posta elettronica sul telefono, più di un terzo si collega online principalmente tramite i propri dispositivi palmari.

In effetti, il mobile computing sta diventando sempre più onnipresente... ed è fantastico.

Tranne, ovviamente, quando non lo è.

Come utente di un dispositivo mobile, poche cose sono così frustranti e difficili da navigare come un'app Web mobile mal progettata o persino un'app nativa.

E come sviluppatore di app mobili, poche cose possono essere così intensamente irritanti come cercare di supportare la più ampia gamma possibile di client mobili, ognuno dei quali ha la propria serie frustrante di idiosincrasie. Sia che tu scelga di sviluppare un'app Web mobile, nativa o ibrida, la ricerca per supportare più browser mobili, dispositivi più esotici e fare i conti con varie piattaforme può essere davvero un'esperienza straziante.

Naturalmente, oggi non tutti gli sviluppatori devono preoccuparsi di supportare i client mobili. Ma la natura sempre più onnipresente dei dispositivi mobili e delle applicazioni suggerisce fortemente che coloro che non hanno bisogno di supportare i client mobili oggi, molto probabilmente avranno bisogno di farlo in un futuro non troppo lontano. Quindi, se non stai già pensando allo sviluppo di app mobili, probabilmente dovresti esserlo.

App Web mobile e app nativa rispetto a app ibrida

Come è vero con la maggior parte delle selezioni tecnologiche, non esiste una risposta valida per tutti quando si tratta del tipo di app mobile da sviluppare. Esistono numerose best practice per le app Web da considerare, non tutte tecniche. chi è il tuo pubblico di riferimento? È più probabile che preferiscano un Web mobile o un'app nativa? Qual è la differenza tra app native e ibride? Di quali risorse di sviluppo disponi e con quali tecnologie mobili sono più familiari? Qual è il modello di licenza e vendita che stai immaginando per il tuo prodotto?

In generale (sebbene ci siano sempre delle eccezioni), il percorso dell'app mobile web è più veloce ed economico rispetto al percorso dell'app mobile nativa, soprattutto quando l'obiettivo è supportare un'ampia gamma di dispositivi. Al contrario, potrebbero esserci funzionalità native del dispositivo mobile (come il sensore di movimento e così via) che sono essenziali per la tua app, ma che sono accessibili solo tramite un'app nativa (il che renderebbe quindi la scelta dell'app web mobile non antipasto per te).

E al di là della domanda tra le vecchie app Web e le app native, un'app mobile ibrida potrebbe essere la risposta giusta per te, a seconda delle tue esigenze e dei vincoli di risorse. Le app ibride, come le app native, vengono eseguite sul dispositivo stesso (anziché all'interno di un browser), ma sono scritte con tecnologie Web (HTML5, CSS e JavaScript) e in genere sono supportate da un framework di app ibride. Più specificamente, le app ibride vengono eseguite all'interno di un contenitore nativo e sfruttano il motore del browser del dispositivo (ma non il browser) per eseguire il rendering dell'HTML ed elaborare il JavaScript in locale. Un livello di astrazione da Web a nativo consente l'accesso alle funzionalità del dispositivo che non sono accessibili nelle applicazioni Web mobili, come l'accelerometro, la fotocamera e l'archiviazione locale.

Ma qualunque scelta tu faccia, che si tratti di un'app web mobile, un'app nativa o ibrida, fai attenzione a ricercare e confermare adeguatamente le tue ipotesi. Ad esempio, ai fini di questo tutorial sullo sviluppo di app Web mobili, potresti aver deciso di sviluppare un'app mobile nativa per l'e-commerce per vendere i tuoi prodotti. Ma, secondo Hubspot, il 73% degli utenti di smartphone afferma di utilizzare il web mobile più delle app native per fare la spesa... Quindi, in questo caso, potresti aver scommesso sul cavallo sbagliato.

E poi, naturalmente, ci sono le considerazioni pratiche su tempo e budget. Come dice uno dei miei detti preferiti, "più veloce, migliore, più economico... scegline due qualsiasi" . Sebbene i vincoli di time-to-market e di costo siano di fondamentale importanza nello sviluppo di applicazioni Web, è fondamentale non scendere a compromessi troppo pesanti sulla qualità nel processo. È abbastanza difficile recuperare la fiducia di un utente che ha avuto una brutta prima esperienza.

In effetti, le app web mobili, native e ibride sono tutte bestie radicalmente diverse, ognuna con il proprio insieme unico di vantaggi e sfide. Questo tutorial sullo sviluppo del Web mobile si concentra specificamente sulle metodologie e sugli strumenti da utilizzare e sulle insidie ​​da evitare nello sviluppo di applicazioni Web mobili altamente funzionali, intuitive e facili da usare.

Lo sviluppo di app Web mobili richiede una pianificazione dettagliata

Identificare i requisiti tuoi (o dei tuoi clienti) è una delle migliori pratiche più essenziali nello sviluppo di app, mobili o altro. Ricerca attentamente le funzionalità mirate per determinare se sono realizzabili nella tua app Web mobile. È piuttosto frustrante e altamente improduttivo rendersi conto che una o più delle funzioni client essenziali non sono supportate, quando hai già investito tempo e risorse per progettare l'interfaccia basata sul Web e l'infrastruttura di supporto.

Un altro trucco comune per i neofiti degli sviluppatori di app Web mobili è presumere che il codice basato sul Web per un browser desktop funzionerà "così com'è" in un browser mobile. Non. Ci sono sicuramente delle differenze e, se non ne sei consapevole, possono sicuramente morderti. La funzionalità di riproduzione automatica del tag HTML5 <video> , ad esempio, non funziona sui browser mobili. Allo stesso modo, le proprietà di transition e opacity CSS non sono supportate (o almeno non sono supportate in modo coerente) nella maggior parte dei browser mobili al giorno d'oggi. Avrai anche problemi con alcuni metodi API web su una piattaforma mobile, come l'API di streaming musicale SoundCloud che richiede Adobe Flash che non è supportato sulla maggior parte dei dispositivi mobili.

Un fattore particolarmente complicato nello sviluppo di applicazioni Web mobili è che la durata dei dispositivi mobili tende ad essere molto più breve di quella dei display desktop (la durata media di un telefono cellulare negli Stati Uniti è di circa 21 mesi). Queste durate di vita più brevi dei dispositivi, accompagnate dal rilascio costante di nuovi dispositivi mobili e tecnologie, producono un panorama in continua evoluzione di dispositivi mirati. Sebbene lavorare in un browser allevi in ​​qualche modo questo problema proteggendoti da una serie di problemi specifici del dispositivo, dovrai comunque progettare una visualizzazione basata su browser che supporti molte risoluzioni dello schermo diverse (oltre a regolare in modo appropriato gli orientamenti orizzontale e verticale ).

È necessario considerare anche il supporto dei display Retina di Apple (display a cristalli liquidi che hanno una densità di pixel sufficientemente alta da impedire all'occhio umano di discernere i singoli pixel a una distanza di visualizzazione tipica). Diversi prodotti Apple, inclusi iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini e iPad Air, offrono display Retina. Per un'app Web mobile in particolare, è importante essere consapevoli del fatto che un display Retina rende le immagini a bassa risoluzione (che in genere vengono fornite ai dispositivi mobili) sembrano sfocate e possono verificarsi pixel. La migliore soluzione di sviluppo di app in questi casi consiste nel far riconoscere al server che la richiesta proviene da un dispositivo Retina e quindi fornire al client un'immagine alternativa a risoluzione più elevata.

Se desideri utilizzare alcuni dei fantastici contenuti HTML5, ricorda di verificare in anticipo che la funzionalità che stai cercando sia supportata nel panorama dei dispositivi che probabilmente i tuoi clienti utilizzeranno. Ad esempio, in iOS 6 e versioni successive, non è presente il supporto per la funzionalità getUserMedia del navigatore poiché la fotocamera è accessibile solo tramite app native. Due grandi risorse per verificare cosa è supportato su dispositivi e browser specifici sono caniuse.com e html5test.com.

Le media query CSS3 possono anche aiutarti a fornire contenuti personalizzati per ciascun dispositivo. Ecco alcuni esempi di codice per acquisire diverse caratteristiche del dispositivo, come densità di pixel, risoluzione dello schermo e orientamento:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Ottimizzazione delle prestazioni dell'applicazione Web mobile

"OMG, questa cosa è tremendamente lenta!" In qualità di sviluppatore di app Web mobili, queste sono probabilmente le ultime parole che vorresti sentire da uno dei tuoi utenti. È quindi necessario riflettere attentamente su come ridurre e ottimizzare ogni trasferimento di byte e server per ridurre il tempo di attesa dell'utente. Non è realistico aspettarsi che i trasferimenti avvengano sempre su una rete Wi-Fi e dovresti sapere che il 60% degli utenti del Web mobile afferma di aspettarsi che un sito venga caricato sul proprio telefono cellulare in 3 secondi o meno (fonte). Allo stesso modo, Google ha scoperto che, per ogni cinque secondi in più di tempo di caricamento, il traffico è diminuito del 20% (e vale anche la pena notare che i motori di ricerca considerano i tempi di caricamento come parte del calcolo del punteggio di qualità della pagina).

Come parte di questo tutorial sullo sviluppo di app Web mobili, ecco alcuni suggerimenti che possono aiutarti a ottimizzare le prestazioni delle tue applicazioni Web mobili e ridurre al minimo la latenza:

• Ottimizzazione dell'immagine. Il tempo di caricamento dell'immagine è noto per essere uno dei maggiori problemi di prestazioni che influiscono sul caricamento della pagina sui dispositivi mobili. L'uso di ottimizzatori di immagini online, come smushit.com, può essere utile per risolvere questo problema.
• Compressione del codice. La compressione dei file JavaScript e CSS, a seconda della quantità di codice di cui disponi, può potenzialmente avere un impatto significativo sulle prestazioni.
• Query al database.
  • Alcuni browser per dispositivi mobili non accettano tanti cookie quanto i browser desktop, il che può comportare la necessità di eseguire più query del solito. La memorizzazione nella cache lato server è quindi particolarmente cruciale quando si supportano i client di app Web mobili.
  • Ricorda di utilizzare i filtri appropriati per impedire l'iniezione di query SQL che potrebbero altrimenti compromettere la sicurezza del tuo sito e server.
• Reti di distribuzione dei contenuti (CDN). Se hai intenzione di fornire molti video, immagini, file audio o altri tipi di media, l'uso di una CDN è altamente raccomandato. Alcuni dei CDN commerciali più comuni includono Amazon S3, Microsoft Windows Azure e MaxCDN. I vantaggi dell'utilizzo di una CDN sono numerosi e includono:
  • Prestazioni di download migliorate. Sfruttare le risorse di una CDN consente di distribuire il carico, risparmiare larghezza di banda e aumentare le prestazioni. Le migliori CDN offrono una maggiore disponibilità, una minore latenza di rete e una minore perdita di pacchetti. Inoltre, molte CDN forniscono una selezione distribuita a livello globale di data center, consentendo il download da un server più vicino alla posizione dell'utente (con conseguente minor numero di salti di rete e download più rapidi).
  • Più download simultanei. I browser in genere limitano il numero di connessioni simultanee a un singolo dominio, dopodiché i download aggiuntivi vengono bloccati fino al completamento di uno dei download precedenti. Spesso puoi vedere questo limite in azione quando scarichi molti file di grandi dimensioni dallo stesso sito. Ogni CDN aggiuntivo (su un dominio diverso) consente ulteriori download simultanei.
  • Analisi avanzata. Molte CDN commerciali forniscono rapporti sull'utilizzo che possono integrare l'analisi del tuo sito Web e che possono offrire una migliore quantificazione delle visualizzazioni e dei download di video. GTmetrix, ad esempio, dispone di un eccellente strumento di reporting del sito Web per monitorare e ottimizzare le fonti caricate sul tuo sito.

Strumenti per lo sviluppo di app Web mobili

"Gli strumenti giusti per il lavoro giusto" è un vecchio adagio che si applica tanto allo sviluppo del software quanto a qualsiasi altro dominio. Questo tutorial fornisce un'introduzione ad alcuni degli strumenti più popolari e ampiamente utilizzati per lo sviluppo di app Web mobili, ma tieni presente che potrebbero esserci altri strumenti "giusti" per sviluppare la tua applicazione Web mobile, a seconda di le vostre esigenze e le risorse disponibili.

Scegliere il giusto framework per app Web mobili JavaScript

Poiché lo sviluppo di app Web mobili tende a creare molte delle stesse sfide comuni, come la compatibilità tra browser e HTML e CSS incoerenti nei browser mobili, sono stati sviluppati framework (basati su HTML5 e CSS3) specificamente progettati per affrontare questi problemi e per funzionare nel modo più impeccabile possibile su un'ampia gamma di smartphone e tablet. La maggior parte di questi framework di app Web mobili è leggera, il che aiuta a facilitare la navigazione Web mobile veloce senza compromettere l'aspetto del tuo sito.

Ampliando la nostra visione oltre il panorama mobile, se esiste un unico framework JavaScript popolare degno di nota, è jQuery. Se hai familiarità con la versione desktop, ti consiglio di provare jQuery Mobile per la tua app web mobile. Ha una libreria di widget che converte il markup semantico in un formato adatto ai gesti, semplificando le operazioni sui touch-screen. L'ultima versione consiste in una base di codice davvero leggera che racchiude un pugno con molti elementi grafici che possono davvero migliorare la tua interfaccia utente.

Anche un'altra alternativa, Sencha Touch, sta guadagnando rapidamente quote di mercato. Offre prestazioni complessive eccellenti e aiuta a produrre un'interfaccia utente Web mobile che sembra in gran parte simile a quella nativa. La sua libreria di widget con funzionalità complete si basa sulla libreria JavaScript ExtJS di Sencha.

Ecco alcune differenze chiave da considerare quando si confronta jQuery Mobile e Sencha Touch:

• Guardare e sentire. In generale, l'aspetto grafico di un'app Sencha Touch è più nitido e superiore a quello di un'app mobile jQuery, ma è importante ricordare che tali reazioni tendono ad essere altamente soggettive.
• Estensibilità. jQuery Mobile offre molte estensioni di terze parti ed è intrinsecamente progettato per essere altamente estensibile, mentre Sencha Touch è attualmente molto più di un framework "chiuso".
• Supporto del dispositivo. jQuery Mobile attualmente prende di mira una sezione trasversale di dispositivi più ampia rispetto a Sencha Touch.
• HTML "vs." JavaScript. jQuery è in gran parte incentrato sull'HTML (cioè estende e manipola l'HTML esistente in JavaScript), mentre la codifica Sencha Touch è interamente basata su JavaScript. (Questo è un esempio, per inciso, del set di competenze del tuo team di sviluppo che è importante considerare quando si effettuano le selezioni della tecnologia.)
• Dipendenze esterne. jQuery mobile richiede jQuery e jQuery UI per la manipolazione DOM, mentre Sencha Touch non ha dipendenze esterne.
• Curva di apprendimento. La maggior parte degli sviluppatori ritiene che il tempo di accelerazione con jQuery sia inferiore a quello di Sencha Touch, forse alimentato dalla grande percentuale di sviluppatori Web che hanno già familiarità con le librerie jQuery standard.

Framework reattivi e applicazioni Web mobili

Un numero crescente di framework reattivi ha iniziato a spuntare negli ultimi anni, con due dei più popolari attualmente Bootstrap e Foundation. In breve, i framework reattivi semplificano e ottimizzano la progettazione e l'implementazione dell'interfaccia utente reattiva basata sul Web, incapsulando i layout e i paradigmi dell'interfaccia utente più comuni in un framework riutilizzabile e ottimizzato per le prestazioni. Principalmente basati su CSS e JavaScript, molti di questi framework sono open source, scaricabili gratuitamente e facilmente personalizzabili. A meno che tu non abbia un insieme di requisiti molto particolare, è probabile che l'uso di uno di questi framework riduca il livello di sforzo per progettare e implementare la tua applicazione web mobile.

Esaminando le due opzioni principali, Bootstrap e Foundation, alcune delle differenze chiave da considerare includono:

• Piattaforme mirate. Sebbene Bootstrap supporti dispositivi mobili, tablet e desktop, è principalmente orientato all'uso desktop. Foundation, d'altra parte, è progettato per schermi di tutte le dimensioni e tipi.
• Compatibilità del browser. Bootstrap è compatibile con IE7 o versioni successive, mentre Foundation è compatibile solo con IE9 o versioni successive.
• Diversità di layout e componenti. Bootstrap ha una raccolta significativamente più ampia di elementi dell'interfaccia utente rispetto a quella offerta da Foundation.
• Ridimensionamento automatico. Con Foundation, la griglia si restringe e si allunga in base all'altezza e alla larghezza del browser corrente, mentre Bootstrap supporta solo un insieme predefinito di dimensioni della griglia basate su un insieme standard di dimensioni dello schermo.

Debug e test di app Web mobili

Il debug di app Web mobili può essere complicato e alquanto frustrante, soprattutto se è necessario cercare diversi dispositivi su cui testare o installare SDK per un'emulazione (tipicamente imperfetta) delle piattaforme client mirate.

In questo contesto, un chiaro vantaggio dello sviluppo Web mobile (rispetto allo sviluppo di app native) è che puoi utilizzare strumenti di sviluppo standard basati su browser per eseguire il debug della tua applicazione. In base alla mia preferenza personale per il debug remoto, quello che consiglio in questo tutorial sullo sviluppo di app è Chrome con i suoi DevTools. Altre opzioni standard includono Firefox con Firebug o gli strumenti Dragonfly di Opera.

Alcuni dei motivi per cui preferisco Chrome con i suoi DevTools includono:

• Emulatore mobile in DevTools di Chrome. Questo è forse da solo un motivo sufficiente per selezionare Chrome per il debug di app Web mobili. Le caratteristiche principali includono l'emulazione di eventi touch, lo spoofing dell'agente utente, la limitazione della larghezza di banda della rete, le modifiche alla geolocalizzazione, le modifiche all'orientamento del dispositivo e l'emulazione del tipo di supporto CSS.
• Editore interattivo. Possibilità di modificare JavaScript o CSS al volo.
• Debug JavaScript superiore. Consente punti di interruzione DOM e offre la possibilità di profilare il tempo di esecuzione del codice JavaScript.
• Visualizzatori JSON e XML integrati. Evita la necessità di plug-in per controllare le risposte del server.
• Supporto per il protocollo Android Debug Bridge (ADB) direttamente su USB. Facilita la creazione di istanze di una sessione di debug remota. (Ecco un buon tutorial di Google su come avviare il debug da remoto in Chrome.)
• Ispezione dinamica delle risorse. Consente di ispezionare le origini dati locali dell'app, inclusi i database IndexedDB o Web SQL, l'archiviazione locale e di sessione, i cookie e le risorse della cache dell'applicazione. Puoi anche ispezionare rapidamente le risorse visive della tua applicazione, inclusi immagini, caratteri e fogli di stile.

Per testare il layout e la compatibilità di navigazione incrociata della tua app Web, puoi anche utilizzare alcuni utili strumenti online, come BrowserStack. Basta inserire l'URL della tua applicazione, selezionare il browser, la versione e il sistema operativo e otterrai la vista emulata (e la velocità di caricamento) del tuo sito in quell'ambiente. Un altro strumento utile per questo scopo è CrossBrowserTesting.

Incartare

Con la continua rapida espansione del numero, della varietà e della sofisticatezza dei dispositivi mobili sul mercato e in uso oggi, è probabile che la necessità di applicazioni mobili efficaci, facili da usare e ad alte prestazioni aumenterà notevolmente. Essere in grado di sviluppare queste applicazioni in modo intelligente ed efficiente continuerà quindi ad essere di fondamentale importanza.

Molti fattori devono essere considerati quando si sceglie tra le opzioni di app mobili web, native e ibride per dispositivi mobili. Ognuno ha i suoi vantaggi, ma le app Web mobili rappresentano spesso l'opzione di sviluppo (e quindi time-to-market) più efficiente. Se dovessi scegliere di seguire quella strada, spero che questo tutorial sullo sviluppo di app Web mobili ti aiuti a portarti più direttamente e con successo a destinazione.