Sencha Touch il framework app mobile HTML5

Lo sviluppo di un'applicazione mobile richiede che siano prese molte decisioni prima che la prima riga di codice sia scritta. Ad esempio, dovresti andare con un'app Web o un'app nativa? Se sì, dovresti usare un framework? Non esiste una risposta errata a nessuna di queste domande, dipende dalla situazione. Oggi parleremo di una soluzione specifica a queste domande: Sencha Touch.

Cos'è Sencha Touch?

Dal loro sito web:

Sencha Touch consente alle tue app Web di apparire come app native. Bellissimi componenti dell'interfaccia utente e una ricca gestione dei dati, tutti basati sugli ultimi standard web HTML5 e CSS3 e pronti per dispositivi Android e Apple iOS. Tenerli basati sul Web o includerli per la distribuzione negli app store mobili.

Dai creatori di ExtJS, i nuovi amici Sencha hanno ancora una volta creato un vero e proprio framework javascript. Puoi controllare di più sulla struttura qui. Sencha touch è in grado di replicare perfettamente tutte le funzionalità dell'interfaccia utente nativa. Al momento, Sencha Touch è probabilmente uno dei più potenti framework per app per dispositivi mobili disponibili sul mercato e il più adatto a gestire applicazioni Web complesse che richiedono la replica di un'app nativa.

Detto questo, ci sono ancora alcuni inconvenienti proprio come niente. Per i principianti, mentre questo è stato scritto, è ancora in BETA. Dal test personale, non ho ancora riscontrato alcun bug. Significa anche che stanno ancora lavorando su molte funzionalità del framework. Il che è in realtà una buona notizia perché questo framework è già incredibilmente ricco di funzionalità, ma in futuro è ancora possibile guardare avanti cose come il supporto della fotocamera. Ma l'accesso alle funzioni del dispositivo come questo è possibile solo se lo si avvolge in PhoneGap, un altro framework che consente alle applicazioni mobili di essere applicazioni native.

Questo porta in primo piano un altro punto importante. Un framework per applicazioni mobili come Sencha Touch è adatto anche al mio progetto? La risposta a questa domanda è dura. Ci sono pro e contro in entrambe le soluzioni e stiamo assumendo che utilizziamo Sencha Touch come un'app web specifica:

Ora devi decidere se Sencha Touch è la giusta app per le app web per il tuo progetto:

Sencha Touch a colpo d'occhio

  • Curva di apprendimento più elevata rispetto alla maggior parte degli altri framework web
  • Migliore framework per app web per applicazioni Web di alto livello
  • Ridimensiona facilmente a risoluzioni diverse per la massima compatibilità con diversi iPhone, iPad e i vari telefoni Android.
  • Due temi per iOS e Android
  • HTML5 e CSS3 consentono una maggiore flessibilità
  • Ottimo supporto per le animazioni e gli eventi tattili avanzati

Se tutto ciò sembra perfetto per il tuo progetto, vai avanti e scaricalo. Se sembra un po 'eccessivo, potresti voler guardare qualcosa come jQTouch (cerca presto un tutorial su questo).

Download di Sencha Touch

Per scaricare una copia di Sencha Touch, basta andare sul loro sito Web e fare clic Scarica ora.

Apri la cartella sencha touch e fai clic sugli esempi. Quindi fare clic su index.html (all'interno della cartella degli esempi)

Sfoglia gli esempi ed esplora le diverse funzionalità delle diverse app. L'app più preziosa per imparare le vere abilità di questo framework è l'app Kitchen Sink. Questo è quello che vedremo:

Lavandino della cucina

Esplora l'applicazione e visualizza la fonte di alcune delle cose per avere un'idea del concetto Sencha Touch.

Interfaccia utente

Se fai clic su Interfaccia utente sulla sinistra, ti viene presentato un nuovo menu animato con elementi dell'interfaccia utente specifici. Anche se non sembra che abbiano ancora un'interfaccia coverflow, sono sicuro che sarà qualcosa che alla fine vedremo. Come puoi vedere, hanno a che fare con ogni elemento essenziale. Vediamo il codice sorgente delle schede per avere un'idea del livello di complessità della creazione di un elemento dell'interfaccia utente di base:

 demos.Tabs = new Ext.TabPanel (ordinabile: true, // Tocca e tieni premuto per ordinare gli elementi: [title: 'Tab 1', html: 'Le schede sopra sono anche ordinabili.
(tocca e tieni premuto) ', cls:' card card5 ', title:' Tab 2 ', html:' Tab 2 ', cls:' card card4 ', title:' Tab 3 ', html:' Tab 3 ', cls:' card card3 ']);

Come puoi vedere, è il solito modo di fare le cose con ExtJS. Crei un nuovo componente, imposta il valore di ordinabile, quindi inserisci le informazioni necessarie. In questo caso, il titolo della scheda, il contenuto della scheda e una classe identificabile. Questa potente semplicità è una testimonianza della potenza di questa struttura.

animazioni

Questi sono ancora più facili. Per animare un nuovo pannello nel progetto, questo è tutto ciò di cui hai veramente bisogno:

 demos.Animations.slide = new Ext.Panel (html: 'Le diapositive possono essere utilizzate in tandem con direzione: "su / giù / sinistra / destra".', cls:' card card2 ');

La parte slide è ciò che determina la transizione che usi. È possibile visualizzare il Kitchen Sink per altri esempi come pop, flip, cube e fade.

Ti incoraggio a giocare ancora con il Kitchen Sink e ad analizzare il codice sorgente per qualsiasi cosa ti interessi. Dato che questo è ancora in BETA, c'è a malapena qualsiasi documentazione su di esso, qualcosa di ExtJS (ora Sencha) è un po 'famoso per.

Incartare

Ora che hai un po 'più di conoscenza su Sencha Touch, spero che tu possa aggiungerlo al tuo arsenale di strumenti di applicazione mobile. Come con qualsiasi altro settore di sviluppo, è necessario scegliere gli strumenti giusti per il lavoro. Sencha Touch può essere lo strumento giusto se stai costruendo un'applicazione mobile di alto livello attraverso il web. Assicurati che sia adatto al tuo progetto prima di andare oltre. Per ora è tutto, fammi sapere cosa ne pensi di Sencha Touch e di altri quadri nei commenti!