Il presente articolo è stato tradotto automaticamente.

Cutting Edge

Sviluppo di siti per dispositivi mobili, parte 5: jQuery Mobile

Dino Esposito

 

In questo articolo io condividere alcune riflessioni su jQuery Mobile, una sempre più diffusa tecnologia mobile.

Come più e più siti Web sono fiancheggiati da siti specializzati per servire gli utenti di dispositivi mobili, un'equazione prende forma nella mente di molti sviluppatori e gestori. In poche parole, suona come il seguente: Se amate jQuery, sta andando ad amare jQuery Mobile, troppo. Fatto è che molte persone (me compreso) piace jQuery, quindi potenzialmente un grande numero di sviluppatori sarei propenso ad utilizzare jQuery Mobile come scelta predefinita per qualsiasi sviluppo Web mobile senza più pensare.

Ammetto che ho seguito questo modello esattamente quando ho iniziato lo sviluppo mobile. A volte ha funzionato; a volte non ha. E, forse più importante, a volte ho pensato ha funzionato, ma alla fine non ha realmente ottenere miei clienti stavano cercando.

Sviluppo mobile non è semplicemente un ramo di sviluppo Web. Per la maggior parte, non riesce da adattare (Beh, principalmente semplificando) quello che già hai, che tratti di casi d'uso, layout, grafica, script o altre tecnologie correlate. Sviluppo mobile ben fatto e dispositivo di croce è un vero paradigma dove l'UX viene prima e nuovi tipi di professionisti presentarsi: gli architetti, designer di interazione e strateghi contenuti. Software mobile è spesso progettato e approvato attraverso prototipi e poi semplicemente implementato, visualizzando dati in una determinata posizione e in un dato formato.

Ma si noti che la tecnologia non dovrebbe dettare come si raggiungere esigenze aziendali; la tecnologia dovrebbe essere solo un mezzo per attuare gli obiettivi di sviluppo immediato. Può sembrare un'affermazione abbastanza ovvia e scontata, ma, cerchiamo di essere onesti, quante volte avete visto questa regola violata? Avete mai sentito l'anti-pattern "Tecnologia Pet"? Si può leggere su di esso a bit.ly/OvJdx0. A volte capita che una determinata tecnologia è preso per alcuna ragione convincente o business-oriented. Allo stesso modo, a volte capita che una determinata tecnologia è raccolto per l'attività sbagliato — o forse peggio ancora, il suo utilizzo porta ad un approccio meno-che-ideale per una determinata attività.

In un oggi rapidamente cambiando mondo mobile, mettere qualsiasi tecnologia davanti UX e considerazioni strategiche è un rischio enorme. Sviluppo mobile, casi di utilizzo e la visione vengono in primo luogo, e la tecnologia è solo un mezzo, come dovrebbe sempre essere!

Ora mi concentrerò sul tema principale di questa colonna, jQuery Mobile, cui punti forti e deboli sono spesso misurati su una scala che conta cosa si può fare invece di che cosa si vuole fare. Potete leggere di più su jQuery Mobile a jquerymobile.org.

jQuery Mobile in un colpo d'occhio

In generale, la definizione più appropriata per jQuery Mobile deriva dal suo sito Web. Spiega che jQuery Mobile è un sistema di interfaccia utente basata su HTML5 per tutte le piattaforme popolare dispositivo mobile. Inoltre, dice jQuery codice Mobile è costruito con "progressive enhancement" in mente, e risultati dovrebbero avere un design facilmente "tema-grado". Inoltre, jQuery Mobile è costruito sulla cima della fondazione solida di jQuery e jQuery UI. Tuttavia, molti sviluppatori professionisti supporre che jQuery Mobile è una versione leggera di jQuery ottimizzati per i vincoli dei dispositivi mobili tipici.

In verità, che cosa è sulla homepage del sito Mobile di jQuery è proprio la vera essenza della biblioteca. jQuery Mobile è un framework che è facile da usare per molti sviluppatori — o, almeno, si scopre di essere molto più facile da usare rispetto alla maggior parte delle altre strutture là fuori per la costruzione di soluzioni mobili. È un quadro che aiuta con l'interfaccia utente delle viste che funzionano bene quando visualizzate su dispositivi mobile e touch-based. Non solo sono facili da creare viste touch-based (e successivamente orientato al mobile), ma sono anche facile da legare insieme per formare un sistema di navigazione con transizioni ed effetti. Viste create sfruttando le strutture di jQuery Mobile funzionano bene con gli smartphone e in qualche misura anche con dispositivi più vecchi, che conduce alla domanda chiave: Questo è davvero abbastanza per il vostro sviluppo Web mobile?

Dove si trova il Mobile di jQuery Mobile?

Personalmente, ho utilizzato jQuery Mobile, per costruire l'interfaccia utente di un'applicazione basata su Web rivolto agli utenti di computer portatile o tablet — senza alcun tipo di telefoni! — e ha funzionato magnificamente. Fu in questo periodo che ho immaginato prima di che alcune specie di chiudere il rapporto tra UI di jQuery e jQuery Mobile.

Come sorprendente come può sembrare, cerchiamo di sollevare il punto: JQuery Mobile è davvero un framework per lo sviluppo mobile?

Sulla base della descrizione della tecnologia su jquerymobile.org, si dovrebbe considerare jQuery Mobile come strumento principale per l'interfaccia utente del front-end basato su touch. Un front-end basato su touch è probabile un dispositivo mobile (che è, tablet o smartphone), ma lo sviluppo del Web mobile ha molte più sfaccettature che solo il front-end.

Solo utilizzando jQuery Mobile per l'organizzazione di un'interfaccia utente che si adatta bene in piccolo immobile di uno schermo del dispositivo può essere un approccio che funziona in scenari semplici. Se preso come un approccio globale e completo, tuttavia, può essere un po' semplicistico.

Vediamo cosa si può trovare in una soluzione mobile che va oltre le capacità di jQuery Mobile. Innanzitutto, si dovrebbe avere una chiara visione del sito si sta costruendo, espressa attraverso una grande selezione di casi d'uso, un flusso di dati ben definiti tra server e client, e, più importante, un elenco dei cellulari profili si intende servire. Un profilo mobile è un termine generico per indicare le diverse famiglie di dispositivi che sito intende servire: smartphone, compresse, portatili, smart TV e dispositivi simili costruiti in questi ultimi anni o così, o qualsiasi cellulari che possono connettersi a Internet.

Non ogni sito mobile deve supportare più profili dispositivo, anche se questa necessità sta diventando sempre più severe e più urgente. Supporta molteplici profili dispositivo significa trattare con diversi punti di vista e regolando dinamicamente la risposta di destinazione basata sulle caratteristiche del dispositivo e le funzionalità. Nel mio ultimo articolo (msdn.microsoft.com/magazine/jj618291) vi ho presentato un approccio multi-serving basato su un repository di descrizione dispositivo lato server come Wireless Universal Resource File o WURFL (vedere wurfl.sourceforge.net). Che tipo di supporto out-of-box si ottiene da jQuery Mobile in proposito?

jQuery Mobile e reattivo Design

Responsive design è la capacità del framework per fornire una versione su misura di una pagina per dispositivi specifici. In questo articolo, citando il sito jquerymobile.org, citato miglioramento progressivo come uno dei pilastri del framework jQuery Mobile. Miglioramento progressivo è un modello di progettazione bottom-up Web con cui si creano pagine migliorare progressivamente un core che funziona su qualsiasi browser. Miglioramento progressivo è l'opposto di "degrado aggraziato," opta per un approccio top-down: Definire la migliore esperienza e degradano come grazia, come è possibile se il browser manca di alcune funzionalità necessarie. Progressive enhancement può essere considerato un modello per rendere la vostra esperienza Web più reattivo.

Si noti che facendo un'esperienza Web più reattivo possa includere offrendo un sostegno mobile ad hoc, ma essere reattivo sul browser non significa necessariamente concentrandosi su client mobili.

Così utilizzando jQuery Mobile, non sarai preoccupato per rilevare la funzionalità del dispositivo, come la biblioteca garantisce che l'output sarebbe anche funziona nei browser di livello inferiore. Rivediamo il core di jQuery Mobile attuazione del modello di miglioramento progressivo.

Partizionamento del browser

La libreria jQuery Mobile supporta tre profili browser — denominati A, B e C, dove A-grade browser ricevono il markup più avanzato, la biblioteca può servire e C-grade browser solo ricevere plain HTML contenuto con nessuna funzionalità aggiuntive, ad esempio stili e AJAX. Ciascun profilo è caratterizzato da un elenco di funzionalità di browser fornire rispetto alle esigenze della biblioteca. Ad esempio, il supporto per le media query CSS è una funzionalità chiave di jQuery Mobile, ed è un requisito fondamentale per un browser a cadere in un gruppo. Oltre alla media query CSS, A-grade browser supporta JavaScript, AJAX e manipolazione completa di Document Object Model (DOM). A-grade browser sono dove la Biblioteca opera nella sua pienezza, e l'elenco dei browser di grado viene aggiornato frequentemente.

La differenza fondamentale tra i browser di grado e di grado B è la mancanza di supporto per AJAX. Sul browser di grado B, jQuery Mobile ferma utilizzando AJAX per le richieste e le transizioni di pagina. Così si potrebbe aspettare di essere in grado di effettuare operazioni con successo, ma con un'esperienza meno piacevole.

Infine, C-grade browser sono per lo più browser obsoleti con nessun supporto per media query e supporto limitato per la manipolazione di JavaScript, CSS e DOM. C-grade browser, nessuna manipolazione del DOM standard viene applicato agli elementi di pagina e plain HTML è servita. La matrice più aggiornata del browser e classi è disponibile a jquerymobile.com/gbs. Figura 1 e Figura 2 Visualizza il rendering della stessa pagina sul browser di grado e di grado C.

Figura 1 pagina di esempio su un dispositivo Android di grado

Figura 2 pagina di esempio su un dispositivo Android di grado c

Ragionevolmente, la libreria jQuery Mobile non è ottimizzata per browser di grado C e B-grado. Come Figura 2 illustrato, gli utenti possono ancora ricevere un buon trattamento, ma, più importante, si ha alcun controllo su quello. Il codice HTML in Figura 1 e Figura 2 è abbastanza semplice e non contiene più di una lista non ordinata. Cosa fare se avete una pagina molto più sofisticata, con immagini, pop-up, blocchi di testo di lunghezza e formato e pulsanti vari?

jQuery Mobile deve la sua bella grafica (come mostrato Figura 1) impegnativo per la manipolazione del DOM e funzionalità AJAX. Di fuori del Regno di A-grade browser, jQuery Mobile garantisce solo che una pagina non è visualizzabile. Si può trovare più brusche transizioni (no AJAX) e più semplice manipolazione del DOM, o ci può essere un fallback completo in HTML semplice. Indipendentemente dal fatto che jQuery Mobile può servire fino a tre viste distinte della stessa pagina, i resti HTML base lo stesso e le regole di trasformazione sono fissi e fuori controllo.

La linea di fondo è che se è necessario supportare più di A-grade browser, probabilmente sarebbe meglio cadere jQuery Mobile browser classificazione e introducendo la logica per gestire profili browser e visite ad hoc (vedere Figura 3).

Figura 3 diversi gradi di browser di Targeting

Il codice di esempio nell'articolo del mese scorso fornisce un esempio di questo approccio.

Per riassumere, jQuery Mobile è essenzialmente un framework di interfaccia utente che fa un grande lavoro di che ti permette di utilizzare elementi HTML familiari quando si modifica una vista. Successivamente, si trasforma elementi HTML semplici oggetti semanticamente equivalenti che funzionano bene in un ambiente basato su touch e stare bene su schermi di piccole dimensioni. jQuery Mobile, implementa il pattern di miglioramento progressivo e non lascia qualsiasi browser. Tuttavia, questo non significa che adottando semplicemente jQuery Mobile si può efficacemente affrontare il problema della frammentazione del dispositivo — la grande quantità di significativamente diversi browser per cellulari e dispositivi. A volte sei necessario viste completamente differenti profili di classe diversa e anche garantire che di partizione browser secondo una logica differente. jQuery Mobile abbraccia la logica di responsive Web design e si concentra sulla media query CSS. Come spiegato nel mio articolo di luglio 2012 (msdn.microsoft.com/magazine/jj190798), media query CSS sono grandi utilizzare con dispositivi (compresse, computer portatili, televisori intelligenti e forse smartphone) dove tutto quello che vuoi fare è riposizionare e nascondere gli elementi che è Impossibile visualizzare. Media query richiede browser ricco e non sono una funzionalità mobile specifico.

Suggerisco che prima si abbraccia jQuery Mobile, vi pongo la seguente domanda: È OK per designare alcuni smartphone (o dispositivi analoghi) come punto di ingresso per godersi davvero il tuo sito? Se sì, jQuery Mobile è più che OK per te. In caso contrario, prendere ulteriormente ed esplorare altre opzioni.

Dino Esposito è l'autore di "Architettura Mobile soluzioni per l'impresa" (Microsoft Press, 2012) e "programmazione ASP.NET MVC 3" (Microsoft Press, 2011) e coautore di "Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press, 2008). Vive in Italia e partecipa spesso come relatore a eventi del settore in tutto il mondo. Seguirlo su Twitter a twitter.com/despos.

Grazie all'esperto tecnica seguente per la revisione di questo articolo: Christopher Bennage