Cordova: un viaggio di sola andata
0 likes314 views
Sulle orme de "Il signore degli anelli" una panoramica su Cordova e sulle buone pratiche di sviluppo
![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. []](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-10-320.jpg)
![Tutto ebbe inizio con la forgiatura dei grandi Anelli.
[] Tre furono dati agli elfi, gli
esseri immortali pi湛 saggi e leali
di tutti. []](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-13-320.jpg)
![Tutto ebbe inizio con la forgiatura dei grandi Anelli.
[] Sette ai re dei nani, grandi
minatori e costruttori di citt
nelle montagne. []](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-16-320.jpg)
![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. []](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-19-320.jpg)
![[] 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.[]](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-22-320.jpg)
![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
*/
}](https://image.slidesharecdn.com/cordova-unviaggiodisolaandata-171214080034/85/Cordova-un-viaggio-di-sola-andata-44-320.jpg)
Cordova: un viaggio di sola andata
- 2. 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
- 3. Hello World! Diego La Monica https://diegolamonica.info
- 4. Hello World! Full Stack Developer Diego La Monica https://diegolamonica.info
- 5. Hello World! Full Stack Developer Owner @ toSend.it Diego La Monica https://diegolamonica.info
- 6. Hello World! Full Stack Developer Owner @ toSend.it Web/Mobile App Developer Diego La Monica https://diegolamonica.info
- 7. Hello World! Full Stack Developer Owner @ toSend.it Web/Mobile App Developer Parlo molto di tecnologiaDiego La Monica https://diegolamonica.info
- 8. 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
- 9. 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
- 10. 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. []
- 11. A.D. 2011 Adobe. acquisisce Nitobi.
- 12. Cloud Compiler Acquisiti i diritti da Adobe con il nome PhoneGap Codice Sorgente Donato ad Apache Foundation e viene battezzato infine Apache Cordova
- 13. Tutto ebbe inizio con la forgiatura dei grandi Anelli. [] Tre furono dati agli elfi, gli esseri immortali pi湛 saggi e leali di tutti. []
- 14. Ionic
- 15. 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.
- 16. Tutto ebbe inizio con la forgiatura dei grandi Anelli. [] Sette ai re dei nani, grandi minatori e costruttori di citt nelle montagne. []
- 17. Ionic Cocoon
- 18. 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.
- 19. 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. []
- 21. 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.
- 22. [] 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.[]
- 23. Ionic Adobe PhoneGap Cocoon Cordova CLI
- 25. 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.
- 26. Stesso code-base per tutte le piattaforme supportate =
- 27. Esperimenti sociali Qual 竪 la risposta giusta? a) 1 = Android - 2 = iPhone b) 1 = iPhone - 2 = Android c) Entrambe Android d) Entrambe iPhone 21
- 28. Esperimenti sociali Qual 竪 la risposta giusta? 1 = Android - 2 = iPhone 1 = iPhone - 2 = Android Entrambe Android Entrambe iPhone 21 iPhone Android
- 29. Qual 竪 la risposta giusta? a) 1 = Android - 2 = iPhone b) 1 = iPhone - 2 = Android c) Entrambe Android d) Entrambe iPhone Esperimenti sociali 21
- 30. Esperimenti sociali Qual 竪 la risposta giusta? 1 = Android - 2 = iPhone 1 = iPhone - 2 = Android Entrambe Android Entrambe iPhone 21 Android iPhone
- 31. Regola #1. Identificare il device
- 32. 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
- 33. Command Line cordova plugin add cordova-plugin-device Javascript var deviceName = device .platform .toLowerCase() .replace( '-', '' ); document .querySelector('body') .classList.add(deviceName);
- 34. <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(/slideshow/cordova-un-viaggio-di-sola-andata/84053557/images/windows.png); } body.android{ background-image: url(/slideshow/cordova-un-viaggio-di-sola-andata/84053557/images/android.png); } body.ios{ background-image: url(/slideshow/cordova-un-viaggio-di-sola-andata/84053557/images/apple.png); }
- 35. 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; } ...
- 36. Regola #2. Ottimizzare il DOM
- 37. Non posso portare l'anello per voi.. ma posso portare voi! Sam - Il signore degli anelli - Le due torri
- 39. 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 doesnt mean quickly here. http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
- 40. DOM complesso Richiesta maggiore di potenza computazionale Deterioramento delle performance applicative DOM leggero Minore necessit di potenza computazionale Applicazione performante
- 41. 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
- 42. Regola #3. Razionalizzare le differenze
- 43. Possiamo soltanto decidere cosa fare con il tempo che ci 竪 stato concesso Gandalf - Il signore degli anelli - La compagnia dellanello
- 44. 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 */ }
- 46. Ti vedo!!! Sauron - Il signore degli anelli - Il ritorno del re
- 47. Avvisare dei tempi di attesa Se lapplicazione richiede tempo per svolgere unoperazione, comunicarlo allutente.
- 48. Avvisare dei tempi di attesa Se lapplicazione richiede tempo per svolgere unoperazione, comunicarlo allutente.
- 49. Percezione di non funzionamento Potrebbe essere mostrata per diversi secondi uninterfaccia vuota oppure linterfaccia precedente con effetto freeze zzz...
- 50. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 51. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 52. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 53. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 54. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 55. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 56. Percezione di non funzionamento Lutente si sente frustrato perch辿 non riesce a conseguire il proprio obiettivo zzz zzz
- 57. Percezione di non funzionamento Talvolta decide di non voler continuare oltre nellutilizzo dellapp. Un utente insoddisfatto 竪 un utente perso! zzz zzz zzz
- 58. Funziona ma Finalmente un po di luce
- 61. Avvisare dei tempi di attesa Se lapplicazione richiede tempo per svolgere unoperazione, comunicarlo allutente.
- 62. Avvisare dei tempi di attesa Lutente 竪 consapevole che lapp non 竪 bloccata.
- 63. maggiormente disponibile allattesa Gli stessi secondi di attesa risulteranno pi湛 brevi.
- 64. maggiormente disponibile allattesa Tutte le trasmissioni verso il server, avviate a seguito di interazione tra lutente e lapp, devono essere evidenti per lutente.
- 65. 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' ); } );
- 66. 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; }
- 67. Altri suggerimenti?. Ritroviamoci al prossimo meetup!