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 of 55
More Related Content
App di successo - quali strumenti? e le performance?
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
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 - Larte della guerra - Cap. 3 p. 31
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 - Larte della guerra - Cap. 3 p. 33
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
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 dellassedio.
Sun Tzu - Larte 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
dallutente, 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
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 allhardware
HTML
CSS
Javascript
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
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
34. Diego La Monica
@jast
#appmobileStand B6
Svilupper嘆 lapp identica
per tutte le piattaforme!
Lutente vivr la stessa
esperienza a prescindere
dal device
Sebastian Seidil - Bronzo - Giochi Europei 2015
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 lutente 竪
abituato ad utilizzare.
Lutente non si deve adattare allapp
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(/slideshow/app-di-successo-quali-strumenti-e-le-performance-70345711/70345711/images/windows.png);
}
body.android{
background-image:
url(/slideshow/app-di-successo-quali-strumenti-e-le-performance-70345711/70345711/images/android.png);
}
body.ios{
background-image:
url(/slideshow/app-di-successo-quali-strumenti-e-le-performance-70345711/70345711/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
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
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