in occasione di SMAU Napoli 2016 alla Mostra d'Oltremare ho tenuto un Workshop di 50 minuti affrontando aspetti legati alla progettazione, allo sviluppo e all'ottimizzazione di applicazioni mobili basate su Apache Cordova.

1. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti?
E le performance?
#appmobileDiego La Monica
diego.lamonica@gmail.com

2. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
#>Hello World!
Diego La Monica
Web Solution Developer
mail: diego.lamonica@gmail.com
web: http://diegolamonica.info
twitter: @jast
skype: diego.la.monica
mobile: +39 333 7235 382
● Professionista Web di cui alla legge
n. 4/2013
● Full stack developer
● Associato IWA/HWG dal 2006
● Autore di EUCookieLaw (+2500 siti)
● Autore di XTemplate (JSClasses
Award)
● Contribuisce ad altri progetti
Open Source
● Sviluppo app mobili e web app
2

3. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
3
http://store.streetlib.com/sviluppare-applicazioni-ibride-per-dispositivi-mobili
ISBN: 9788892513044
Diego La Monica
Web Solution Developer
mail: diego.lamonica@gmail.com
web: http://diegolamonica.info
twitter: @jast
skype: diego.la.monica
mobile: +39 333 7235 382

4. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
International Web Association
● Prima associazione al mondo che raggruppa chi
lavora nel Web
● Obiettivo di IWA: creare rete tra soci, partecipare
all'evoluzione del Web, divulgare conoscenza
tramite soci con eventi ed iniziative
● Associazione professionale in rappresentanza
delle professionalità Web
● unica Associazione del settore ICT attualmente
censita dal Ministero dello Sviluppo Economico
4

5. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Vuoi saperne di più?
5
5
Stand
B6

6. Diego La Monica
@jast
#appmobileStand B6
Conosci il nemico come conosci te stesso.
Se farai così, anche in mezzo a cento
battaglie non ti troverai mai in pericolo
Sun Tzu - L’arte della guerra - Cap. 3 p. 31

7. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Perché
si usa il
device?
7

8. Diego La Monica
@jast
#appmobileStand B6
Se non conosci te stesso, né conosci il tuo
nemico, sii certo che ogni battaglia sarà
per te fonte di pericolo gravissimo.
Sun Tzu - L’arte della guerra - Cap. 3 p. 33

9. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
9

10. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Diamo i numeri!
10
Periodo Android iOS Windows Phone BlackBerry Altri
2016Q2 86.2% 12.9% 0.6% 0.1% 0.4%
2015Q2 82.2% 14.6% 2.5% 0.3% 0.4%
2014Q2 84.8% 11.6% 2.5% 0.5% 0.7%
2013Q2 79.8% 12.9% 3.4% 2.8% 1.2%
2012Q2 69.3% 16.6% 3.1% 4.9% 6.1%

11. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
popolazione mondiale 7.000.000.000circa
dispositivi mobili 6.880.000.000 nel mondo
dispositivi mobili 88.580.000in Italia
https://en.wikipedia.org/wiki/List_of_countries_by_number_of_mobile_phones_in_use
#diamoinumeri

12. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
12
86% = ~ 6 Miliardi
13% = ~ 700 Milioni
0.6% = ~ 38 Milioni

13. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
13

14. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
14

15. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
15

16. Diego La Monica
@jast
#appmobileStand B6
E adesso? Cosa faccio?
Per quali versioni?
Per quali piattaforme?
Ma funzionerà ovunque?

17. Diego La Monica
@jast
#appmobileStand B6
Il tuo scopo primario deve essere quello di riuscire
a prendere Tutto-Sotto-Il-Cielo: così, non dovrai
mantenere le truppe di occupazione e i tuoi profitti
saranno assoluti. Questa è la regola per la
strategia dell’assedio.
Sun Tzu - L’arte della guerra - Cap. 3 p. 11

18. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Web app
[…] una web app è sostanzialmente un
collegamento verso un applicativo remoto,
scritto in un linguaggio cross-platform come
HTML5, con il codice dell'interfaccia utente che
può risiedere sul dispositivo mobile o
anch'essa in remoto.
https://it.wikipedia.org/wiki/Applicazione_mobile#Web_app
18

19. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
App nativa
[…] Strumento informatico che si installa e si
utilizza interamente sul proprio dispositivo
mobile, vale a dire un insieme di istruzioni
informatiche progettate con lo scopo di
rendere possibile un servizio o una serie di
servizi o strumenti ritenuti utili o desiderabili
dall’utente, creata appositamente per uno
specifico sistema operativo.
https://it.wikipedia.org/wiki/Applicazione_mobile#App_nativa
19

20. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
App nativa per iOS
20
+ =
Mantenimento app sullo store:
€ 99 / anno

21. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
App nativa per Android
21
+ =
Mantenimento app sullo store:
€ 25

22. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
App nativa per Windows Phone
22
Mantenimento app sullo store:
€ 75 / anno

23. Diego La Monica
@jast
#appmobileStand B6
Per quale piattaforma
produco la mia app?

24. Diego La Monica
@jast
#appmobileStand B6
Ma quanto mi costerà?
Per quale piattaforma
produco la mia app?

25. Diego La Monica
@jast
#appmobileStand B6
La vita è veramente molto
semplice; ma noi insistiamo
nel renderla complicata.
Confucio

26. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
App ibrida
App nativa + Web app
26
✓ Pubblicabile sugli store
✓ Compilata
✓ Accesso all’hardware
✓ HTML
✓ CSS
✓ Javascript

27. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
27

28. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Le App sviluppate con
Apache Cordova sono scritte
in HTML, CSS e Javascript e
sono in grado di accedere
anche alle funzionalità
native del device.
28

29. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
29
✓ Google Android
✓ Apple iOS
✓ Windows Phone
✓ Blackberry
✓ Amazon Tizen
✓ Firefox OS

30. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Requisiti
30

31. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Alternativa
31

32. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Con cosa si sviluppa un App?
✓ Intel XDK ( IDE )
✓ Cordova CLI (CLI)
sviluppo multi-piattaforma con Apache Cordova
32

33. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Stesso codice per tutte le piattaforme
33
=

34. Diego La Monica
@jast
#appmobileStand B6
Svilupperò l’app identica
per tutte le piattaforme!
L’utente vivrà la stessa
esperienza a prescindere
dal device
Sebastian Seidil - Bronzo - Giochi Europei 2015

35. Diego La Monica
@jast
#appmobileStand B6
Adesso la vuoi
fare troppo
facile…
amico di Confucio

36. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
UI
36
1 2
Qual è la risposta giusta?
a) 1 = Android
2 = iPhone
b) 1 = iPhone
2 = Android
c) Entrambe Android
d) Entrambe iPhone

37. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
UI
37
iPhone Android
Qual è la risposta giusta?
× 1 = Android
2 = iPhone
✓ 1 = iPhone
2 = Android
× Entrambe Android
× Entrambe iPhone

38. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
UI
38
1 2
Qual è la risposta giusta?
a) 1 = Android
2 = iPhone
b) 1 = iPhone
2 = Android
c) Entrambe Android
d) Entrambe iPhone

39. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Android iPhone
39
UIQual è la risposta giusta?
✓ 1 = Android
2 = iPhone
× 1 = iPhone
2 = Android
× Entrambe Android
× Entrambe iPhone

40. Diego La Monica
@jast
#appmobileStand B6
Ogni sistema è associato a specifiche
caratteristiche hardware che l’utente è
abituato ad utilizzare.
L’utente non si deve adattare all’app

41. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
41…
<body class="android">
…
</body>
</html>
…
<body class="ios">
…
</body>
</html>
…
<body class="windows">
…
</body>
</html>
body.android a.back-button{
// Nasconde il tasto back su interfaccia
display: none;
}
body.windows{
background-image:
url(images/windows.png);
}
body.android{
background-image:
url(images/android.png);
}
body.ios{
background-image:
url(images/apple.png);
}

42. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
42
42
Cosa cambia?
Se si hanno elementi
specifici per un device
si visualizzano solo
quando serve.
body:not(.ios) .ios-only,
body:not(.android) .android-only,
body:not(.windows) .windows-only{
display: none;
}
...

43. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
43
43
Codice diverso per dispositivo?
Per comportamenti
differenti, bisogna
trovare il minimo
comune multiplo.
function base64toFile( buffer, file){
/*
* alcuni device forniscono il base64
* con il data-uri
* data:image/gif;base64,<contenuto>
*/
buffer = buffer.replace(/^[^,]*,/,'');
…
}

44. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
44
44
Codice diverso per dispositivo?
Per comportamenti
differenti, bisogna
trovare il minimo
comune multiplo.
/*
* In dipendenza del sistema alcuni
* percorsi possono non esistere.
*/
var destinationPath =
cordova.file.externalRootDirectory ||
cordova.file.tempDirectory ||
cordova.file.cacheDirectory;

45. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Cosa posso fare con Apache Cordova?
✓ Autenticazione sociale
✓ Notifiche push
✓ Geolocalizzazione
✓ Stato della rete
✓ Storage
✓ Integrazione mappe
✓ Internazionalizzazione
✓ Stream remoto
✓ Advertising
✓ Accesso ai contatti
✓ Acquisti in-app
✓ Accesso alla fotocamera
✓ Media
✓ Google Play Games Service
✓ …
45

46. Diego La Monica
@jast
#appmobileStand B6
Quali sono i limiti?
C'è luogo tra la fantasia e la realtà,
un luogo dove non ci sono limiti, né
assoluti né relativi.
E.L. James

47. Diego La Monica
@jast
#appmobileStand B6
Ma non ci sono
problemi di
performance?

48. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione
✓ Core
✓ DOM
✓ Rete
✓ Hardware
✓ Funzionale
48

49. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione del Core
✓ Permessi
✓ Campi di input
✓ Framework
✓ Multithread
49

50. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione accesso al DOM
✓ DOM Reflow
✓ Semplificazione
✓ Virtualizzazione
✓ Interrogazione
50

51. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione delle funzioni di rete
✓ Online/Offline
✓ Errori di comunicazione
✓ Caricamento contenuti
✓ Notificare l'elaborazione
51

52. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione hardware
✓ Accelerazione Hardware
✓ Device Events
✓ Elaborazione immagini
✓ Trasformazioni CSS
52

53. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Ottimizzazione funzionale
✓ Statistiche d'uso
✓ Feedback qualitativi
✓ Feedback quantitativi
✓ Analisi dei dati
53

54. Diego La Monica
@jast
#appmobileStand B6
Parla poco, odi assai et
guarda al fine di ciò che fai
San Benedetto
Question Time

55. Diego La Monica
@jast
#appmobileStand B6
App di successo:
quali strumenti? E le performance?
Diego La Monica
Web Solution Developer
mail: diego.lamonica@gmail.com
web: http://diegolamonica.info
twitter: @jast
mobile: +39 333 7235 382
55
ISBN: 9788892513044
Stand B6