Cordova: un viaggio di sola andata

  • View
    60

  • Download
    2

Embed Size (px)

Text of Cordova: un viaggio di sola andata

  • https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/

  • 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

    https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/https://creativecommons.org/licenses/by-nc-sa/4.0/

  • Hello World!Diego La Monica

    https://diegolamonica.info

    https://diegolamonica.info

  • Hello World!

    Full Stack Developer

    Diego La Monica

    https://diegolamonica.info

    https://diegolamonica.info

  • Hello World!

    Full Stack Developer

    Owner @ toSend.it

    Diego La Monica

    https://diegolamonica.info

    https://diegolamonica.info

  • Hello World!

    Full Stack Developer

    Owner @ toSend.it

    Web/Mobile App Developer

    Diego La Monica

    https://diegolamonica.info

    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

    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

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

    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 doesnt mean quickly here.

    http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/

    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

    https://github.com/sergi/virtual-list

  • Regola #3.Razionalizzare le differenze

  • Possiamo soltanto decidere cosa fare con il tempo che ci stato concessoGandalf - Il signore degli anelli - La compagnia dellanello

  • 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,

    */

    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 lapplicazione richiede tempo per svolgere unoperazione,

    comunicarlo allutente.

  • Avvisare dei tempi di attesa

    Se lapplicazione richiede tempo per svolgere unoperazione,

    comunicarlo allutente.

  • Percezione di non funzionamento

    Potrebbe essere mostrata per diversi secondi uninterfaccia

    vuota oppure linterfaccia precedente con effetto freeze

    zzz...

  • Percezione di non funzionamento

    Lutente si sente frustrato perch non riesce a conseguire il

    proprio obiettivo

    zzz zzz

  • Percezione di non funzionamento

    Lutente si sente frustrato perch non riesce a conseguire il

    proprio obiettivo

    zzz zzz

  • Percezione di non funzionamento

    Lutente si sente frustrato perch non riesce a conseguire il

    proprio obiettivo

    zzz zzz

  • Percezione di non funzionamento

    Lutente si sente frustrato perch non riesce a conseguire il

    proprio obiettivo

    zzz zzz

  • Percezione di non funzionamento

    Lutente si sente frustrato perch non riesce a conseguire il

    proprio obiettivo

    zzz zzz

  • Percezione di non funzionamento

    Lutente si sente frustrato