Cordova: un viaggio di sola andata

Cordova: un viaggio di sola
andata
Suggerimenti e buone pratiche per lo sviluppo di app ibride con Apache Cordova
Prato
Front
End
12
Dicembre
2017
SOFTEC
Prato

Hello World!
Diego La Monica
https://diegolamonica.info

Hello World!
Full Stack Developer
Diego La Monica

Hello World!
Owner @ toSend.it
Diego La Monica

Hello World!
Owner @ toSend.it
Web/Mobile App Developer
Diego La Monica

Hello World!
Owner @ toSend.it
Parlo molto di tecnologia…Diego La Monica

Hello World!
Owner @ toSend.it
Parlo molto di tecnologia…
… ma solo di quello che so!
Diego La Monica

Hello World!
Owner @ toSend.it
Parlo molto di tecnologia…
… ma solo di quello che so!
Diego La Monica
Twitter: @jast

Incipt
[…] Il mondo è cambiato. Lo sento nell'acqua.
Lo sento nella terra. Lo avverto nell'aria. Molto
di ciò che era si è perduto, perché ora non vive
nessuno che lo ricorda. […]

A.D. 2011 Adobe.
acquisisce Nitobi.

Cloud Compiler
Acquisiti i diritti da Adobe con il
nome
PhoneGap
Codice Sorgente
Donato ad Apache Foundation e
viene battezzato infine
Apache Cordova

Tutto ebbe inizio con la forgiatura dei grandi Anelli.
[…] Tre furono dati agli elfi, gli
esseri immortali più saggi e leali
di tutti. […]

Ionic
Built on top of Angular
Ionic is a front-end SDK for
building cross-platform mobile
apps.
Built on top of Angular, Ionic
also provides a platform for
integrating services like push
notifications and analytics.

[…] Sette ai re dei nani, grandi
minatori e costruttori di città
nelle montagne. […]

Cocoon
is focused on providing
the best webview
engines
Cocoon is a Cordova based
cloud service for building native
HTML5 apps and games.
Cocoon is focused on providing
the best webview engines and
features like Canvas+, JS
encryption or a custom
Developer App.

[…] E nove, nove Anelli furono dati alla razza degli
uomini che più di qualunque cosa desiderano il
potere. Perché in questi anelli erano sigillati la
forza e la volontà di governare tutte le razze. […]

Adobe PhoneGap
the original and most
popular distribution of
Apache Cordova
PhoneGap is the original and
most popular distribution of
Apache Cordova. Turn your
HTML, CSS and JavaScript into
an app on your device in minutes
using our simple desktop and
developer apps.

[…] Ma tutti loro furono ingannati, perché venne creato un altro
anello. Nella terra di Mordor, tra le fiamme del Monte Fato,
Sauron, l'Oscuro Signore, forgiò in segreto un Anello sovrano, per
controllare tutti gli altri e in questo anello riversò la sua crudeltà,
la sua malvagità e la sua volontà di dominare ogni forma di vita:
un Anello per domarli tutti.[…]

Ionic Adobe PhoneGap
Cocoon Cordova CLI

Apache Cordova
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.

Stesso code-base per tutte le
piattaforme supportate
=

Esperimenti sociali
Qual è la risposta giusta?
a) 1 = Android - 2 = iPhone
b) 1 = iPhone - 2 = Android
c) Entrambe Android
d) Entrambe iPhone
21

Esperimenti sociali
❌ 1 = Android - 2 = iPhone
✔ 1 = iPhone - 2 = Android
❌ Entrambe Android
❌ Entrambe iPhone
21
iPhone
Android

a) 1 = Android - 2 = iPhone
b) 1 = iPhone - 2 = Android
c) Entrambe Android
d) Entrambe iPhone
Esperimenti sociali
21

Esperimenti sociali
✔ 1 = Android - 2 = iPhone
❌ 1 = iPhone - 2 = Android
❌ Entrambe Android
❌ Entrambe iPhone
21
Android
iPhone

Regola #1.
Identificare il device

Questo giorno non appartiene a un uomo solo, ma a tutti. Insieme
ricostruiamo questo mondo, da poter condividere nei giorni di pace.
Aragorn - Il signore degli anelli - Il ritorno del re

Command Line
cordova plugin add cordova-plugin-device
Javascript
var deviceName = device
.platform
.toLowerCase()
.replace( '-', '' );
document
.querySelector('body')
.classList.add(deviceName);

…
<body class="android">
…
</body>
…
<body class="ios">
…
</body>
…
<body class="windows">
…
</body>
body.android a.back-button,
body.windows a.back-button{
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);
}

Visualizzazione
esclusiva
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;
}
...

Non posso portare l'anello per voi.. ma posso portare voi!
Sam - Il signore degli anelli - Le due torri

Document Object Model
https://giuseppetoto.it/sencha-touch-2-sviluppare-applicazioni-mobile-multipiattaforma-4a5a55eacae3

The HTML DOM is always tree-structured - which is
allowed by the structure of HTML document. This is
cool because we can traverse trees fairly easily.
Unfortunately, easily doesn’t mean quickly here.
http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/

DOM complesso
● Richiesta maggiore di
potenza computazionale
● Deterioramento delle
performance applicative
DOM leggero
● Minore necessità di potenza
computazionale
● Applicazione performante

Virtualizzazione
del DOM
● Rimuovere dalla pagina i
contenuti che non sono
visibili a schermo
DOM leggero
I contenuti sono comunque
disponibili ma non renderizzati.
Esempio:
https://github.com/sergi/virtual-list

Regola #3.
Razionalizzare le differenze

Possiamo soltanto decidere cosa fare con il tempo che ci è stato concesso…
Gandalf - Il signore degli anelli - La compagnia dell’anello

Uniformare il
codice
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(/^[^,]*,/,'');
/*
* Codice comune a tutti i device
*/
}

Regola #4.
Essere comunicativi

Ti vedo!!!
Sauron - Il signore degli anelli - Il ritorno del re

Avvisare dei
tempi di attesa
Se l’applicazione richiede tempo
per svolgere un’operazione,
comunicarlo all’utente.

Percezione di non
funzionamento
Potrebbe essere mostrata per
diversi secondi un’interfaccia
vuota oppure l’interfaccia
precedente con effetto freeze
zzz...

Percezione di non
funzionamento
L’utente si sente frustrato perché
non riesce a conseguire il
proprio obiettivo
zzz… zzz…

Percezione di non
funzionamento
Talvolta decide di non voler
continuare oltre nell’utilizzo
dell’app.
Un utente insoddisfatto è un
utente perso!
zzz… zzz… zzz…

Funziona… ma…
Finalmente un po’ di luce

Avvisare dei
tempi di attesa
L’utente è consapevole che l’app
non è bloccata.

È maggiormente
disponibile all’attesa
Gli stessi secondi di attesa
risulteranno più brevi.

È maggiormente
disponibile all’attesa
Tutte le trasmissioni verso il
server, avviate a seguito di
interazione tra l’utente e l’app,
devono essere evidenti per
l’utente.

Avviso su
richieste AJAX
<body>
…
<div id="ajax-loader">
Caricamento in corso…
</div>
</body>
$( document )
.ajaxStart( function () {
$( 'body' ).addClass( 'loading' );
} )
.ajaxStop( function () {
$( 'body' ).removeClass( 'loading' );
} );

Avviso su
richieste AJAX
<body class="loading">
…
<div id="ajax-loader">
Caricamento in corso…
</div>
</body>
#ajax-loader{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.loading #ajax-loader{
display: block;
opacity: 0.4;
}

Altri suggerimenti?.
Ritroviamoci al prossimo
meetup!

Grazie!
Il mio tessssoro…
Prato
Front
End
12
Dicembre
2017
SOFTEC
Prato

Cordova: un viaggio di sola andata

Recommended

Recommended

More Related Content

Similar to Cordova: un viaggio di sola andata

Similar to Cordova: un viaggio di sola andata (20)

More from Diego La Monica

More from Diego La Monica (20)

Cordova: un viaggio di sola andata