Post on 22-Jan-2018
Cordova: un viaggio di sola andataSuggerimenti e buone pratiche per lo sviluppo di app ibride con Apache Cordova
Prato
Front
End
12
Dicembre
2017
SOFTEC
Prato
Hello World!
Full Stack Developer
Diego La Monica
https://diegolamonica.info
Hello World!
Full Stack Developer
Owner @ toSend.it
Diego La Monica
https://diegolamonica.info
Hello World!
Full Stack Developer
Owner @ toSend.it
Web/Mobile App Developer
Diego La Monica
https://diegolamonica.info
Hello World!
Full Stack Developer
Owner @ toSend.it
Web/Mobile App Developer
Parlo molto di tecnologia… Diego La Monica
https://diegolamonica.info
Hello World!
Full Stack Developer
Owner @ toSend.it
Web/Mobile App Developer
Parlo molto di tecnologia…
… ma solo di quello che so!
Diego La Monica
https://diegolamonica.info
Hello World!
Full Stack Developer
Owner @ toSend.it
Web/Mobile App Developer
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 CompilerAcquisiti i diritti da Adobe con il
nome PhoneGap
Codice SorgenteDonato ad Apache Foundation e
viene battezzato infineApache 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
IonicBuilt 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.
Tutto ebbe inizio con la forgiatura dei grandi Anelli.
[…] Sette ai re dei nani, grandi
minatori e costruttori di città
nelle montagne. […]
Ionic
Cocoon
Cocoonis 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.
Tutto ebbe inizio con la forgiatura dei grandi Anelli.
[…] 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. […]
Ionic Adobe PhoneGap
Cocoon
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
Qual è la risposta giusta?
❌ 1 = Android - 2 = iPhone
✔ 1 = iPhone - 2 = Android
❌ Entrambe Android
❌ Entrambe iPhone
21
iPho
ne
Andr
oid
Qual è la risposta giusta?
a) 1 = Android - 2 = iPhone
b) 1 = iPhone - 2 = Android
c) Entrambe Android
d) Entrambe iPhone
Esperimenti sociali
21
Esperimenti sociali
Qual è la risposta giusta?
✔ 1 = Android - 2 = iPhone
❌ 1 = iPhone - 2 = Android
❌ Entrambe Android
❌ Entrambe iPhone
21
Andr
oid
iPho
ne
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 Linecordova plugin add cordova-plugin-device
Javascriptvar 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;
}
...
Regola #2.Ottimizzare il DOM
Non posso portare l'anello per voi.. ma posso portare voi!Sam - Il signore degli anelli - Le due torri
Document Object Modelhttps://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 leggeroI 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.
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
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamento
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamento
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamento
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamento
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamento
L’utente si sente frustrato perché non riesce a conseguire il
proprio obiettivo
zzz… zzz…
Percezione di non funzionamentoTalvolta 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
Riavvolgiamo il nastro.
Regola #4.Essere comunicativi
Avvisare dei tempi di attesa
Se l’applicazione richiede tempo per svolgere un’operazione,
comunicarlo all’utente.
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
https://diegolamonica.info