sviluppo di applicazioni web in ambito mobile
TRANSCRIPT
Sviluppo di applicazioni web in ambito mobile
Roberto Cappelletti
CTO at Elfo s.r.l.
[email protected] - @rcappe
http://www.robertocappelletti.com
23/04/2015Web App
2
Cosa utilizziamo per navigare in Internet?
In che modo possiamo realizzare app?
App Native
• Distribuite tramite gli store
• Pieno accesso all’hw
• Sviluppate con i linguaggi dei vari SO
App Ibride
• Distribuite tramite gli store
• Parziale accesso all’hw
• Sviluppate con HTML CSS JS e un SDK che le impacchetta
23/04/2015Web App
3
Web App
• Distribuite come un sito web
• Non hanno accesso all’hw
• Sviluppate con HTML CSS JS
Web App
Vantaggi
• Stesso linguaggio
HTML/Js/Css per tutte le
piattaforme
• Fruibili anche da tutti i web
browser desktop
• Costi di sviluppo inferiori
• Facilità di Distribuzione
Svantaggi
• Non possono essere
pubblicate negli Store
• Non possono interagire con
l'hardware del device
• Necessitano di connettività
23/04/2015Web App
4
Un esempio … Facebook
23/04/2015Web App
5
Quali sono i vincoli nella progettazione ?
Spazio
• Riorganizzare i contenuti
• Nascondere il superfluo
Tempo
• Tempi di caricamento
• Navigazione lineare
23/04/2015Web App
6
Contesto
• Tipo di input (dita, voce)
• Gestures
• Contenuti dipendenti dal contesto
Responsive Design
23/04/2015Web App
7
http://www.mimoymima.com/wp-content/uploads/2012/06/illustrator-responsive-template_03.jpg
Responsive Design - OneDrive
23/04/2015Web App
8
Single Page Application
Life Cycle Tradizionale Life Cycle SPA
23/04/2015Web App
9
Client Server
Richiesta Iniziale
HTML
AJAX
JSON
Client Server
Richiesta Iniziale
HTML
POST \ GET
HTML
Single Page Application - GMail
23/04/2015Web App
10
Api Html 5
• Storage
• Media
• Network
• Input
– Numerico
– Data
– Validazione
– Obbligatorietà
23/04/2015Web App
11
Come partire a sviluppare una applicazione
Dobbiamo affidarci a componenti già pronti che ci aiutano a velocizzare lo sviluppo.
Esistono moltissimi framework, toolkit, librerie e widget a volte non è semplice decidere quale utilizzare.
23/04/2015Titolo Meeting
12
Angular Js
• Framework per creare SPA
• Gestito da Google
• Le caratteristiche principali sono:
– Ci consente di strutturare l’applicazione
– Dividere le responsabilità Pattern: MvvM
ViewHtml - Css
ViewModelJavaScript
ModelJson
23/04/2015Web App
13
Kendo UI
23/04/2015Web App
14
• Un toolkit per realizzare applicazioni Html
• Mette a disposizione dei controlli ottimizzati per i dispositivi mobili
• Si integra con Angular Js
Recap
Oggi abbiamo visto:
• Importanza che lo sviluppo mobile sta acquisendo
• Modalità che abbiamo per sviluppare App
• I vincoli e le caratteristiche della progettazione di Web App
• Esplorato i concetti di Responsive Design, SPA, HTML5
• Dove possiamo partire per sviluppare una Web App
23/04/2015Titolo Meeting
15
