Sviluppo di applicazioni web in ambito mobile

1. Sviluppo di applicazioni
web in ambito mobile
Roberto Cappelletti
CTO at Elfo s.r.l.
roberto.cappelletti@elfo.net - @rcappe
http://www.robertocappelletti.com

2. 23/04/2015Web App
2
Cosa utilizziamo per navigare in Internet?

3. 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

4. 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

5. Un esempio … Facebook
23/04/2015Web App
5

6. 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

7. Responsive Design
23/04/2015Web App
7
http://www.mimoymima.com/wp-content/uploads/2012/06/illustrator-responsive-template_03.jpg

8. Responsive Design - OneDrive
23/04/2015Web App
8

9. 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

10. Single Page Application - GMail
23/04/2015Web App
10

11. Api Html 5
• Storage
• Media
• Network
• Input
– Numerico
– Mail
– Data
– Validazione
– Obbligatorietà
23/04/2015Web App
11

12. 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

13. Angular Js
• Framework per creare SPA
• Gestito da Google
• Le caratteristiche principali
sono:
– Ci consente di strutturare
l’applicazione
– Dividere le responsabilità
Pattern: MvvM
View
Html - Css
ViewModel
JavaScript
Model
Json
23/04/2015Web App
13

14. 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

15. 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

16. Grazie
roberto.cappelletti@elfo.net
@rcappe
http://www.robertocappelletti.com
23/04/2015Web App
16