Chrome Dev Summit 2014 - Creiamo alcune app con Polymer

Nell'anno precedente, il team di Polymer ha dedicato molto tempo agli sviluppatori a insegnare agli sviluppatori come creare i propri elementi. Ciò ha portato a un ecosistema in rapida crescita, sostenuto in gran parte dagli elementi Core e Paper di Polymer e dagli elementi Brick creati dal team di Mozilla.

Man mano che gli sviluppatori acquisiscono maggiore familiarità con la creazione dei propri elementi e iniziano a pensare alla creazione di applicazioni, vengono aperte una serie di domande:

  • Come dovresti strutturare l'UI della tua applicazione?
  • Come si esegue la transizione attraverso stati diversi?
  • Quali sono alcune strategie per migliorare il rendimento?
  • E come dovresti offrire un'esperienza offline?

Per il Chrome Dev Summit, ho provato a rispondere a queste domande creando una piccola applicazione per i contatti e analizzando il processo che ho seguito per crearla. Ecco che cosa ho scoperto:

Strutturazione

La suddivisione di un'applicazione in parti modulari che possono essere combinate e riutilizzate è un tenant centrale di Web Componenti. Gli elementi core-* e paper-* di Polymer consentono di iniziare facilmente con piccoli pezzi, come whitepaper-barra degli strumenti e carta-icona-pulsante.

Polymer aiuta gli sviluppatori a creare applicazioni più velocemente

Grazie al potere della composizione, puoi combinarli con un numero qualsiasi di elementi per creare un'impalcatura dell'applicazione.

Polymer rende più dolci i componenti web

Una volta implementata una struttura generica, puoi applicare i tuoi stili CSS per trasformarla in un'esperienza unica per il tuo brand. Il bello di farlo con i componenti è che ti permette di creare esperienze molto diverse sfruttando al contempo le stesse primitive di creazione delle app. Una volta definita una struttura, puoi passare a pensare ai contenuti.

Un elemento particolarmente adatto per gestire molti contenuti è core-list.

Polymer rende più dolci i componenti web

core-list può essere collegato a un'origine dati (sostanzialmente un array di oggetti) e per ogni elemento nell'array, escluderà un'istanza di modello. All'interno del modello puoi sfruttare la potenza del sistema di associazione dei dati di Polymer per collegare rapidamente i tuoi contenuti.

Transizioni

Con le varie sezioni dell'app progettate e implementate, l'attività successiva consiste nel capire come passare da una all'altra.

Anche se è ancora un elemento sperimentale, core-animated-pages fornisce un sistema di animazione collegabile che può essere utilizzato per passare da uno stato all'altro nell'applicazione.

La scheda del report Polymer richiede miglioramenti

Tuttavia, l'animazione è solo metà del puzzle e un'applicazione deve combinarle con un router per gestire correttamente i propri URL.

Nel mondo dei componenti web il routing può essere di due tipi: imperativo e dichiarativo. La combinazione di core-animated-pages con entrambi gli approcci può essere valida a seconda delle esigenze del tuo progetto.

Un router imperativo (come Flatiron's Director) può rimanere in ascolto di un percorso corrispondente e quindi indicare a core-animated-pages di aggiornare l'elemento selezionato.

La scheda del report Polymer richiede miglioramenti

Questo può essere utile se devi lavorare dopo la corrispondenza di un percorso e prima della transizione nella sezione successiva.

D'altra parte, un router dichiarativo (come app-router) può effettivamente combinare il routing e core-animated-pages in un singolo elemento, in modo da gestire i due dispositivi più agevolmente.

La scheda del report Polymer richiede miglioramenti.

Per un controllo più granulare, puoi esaminare una libreria come more-routing, che può essere combinata con core-animated-pages mediante l'associazione di dati e possibilmente ti offre il meglio delle due modalità.

Esibizione

Man mano che la tua applicazione prende forma, devi tenere d'occhio i colli di bottiglia delle prestazioni, in particolare qualsiasi cosa associata alla rete, poiché questa è spesso la parte più lenta di un'applicazione web mobile.

Un vantaggio in termini di prestazioni è il caricamento condizionale dei polyfill dei componenti web.

La scheda del report Polymer richiede miglioramenti

Non c'è motivo di sostenere tutti questi costi se la piattaforma ha già il supporto completo. In ogni release del nuovo repository webcomponents.js, i polyfill sono stati inoltre suddivisi in file autonomi. Questa operazione è utile se vuoi caricare in modo condizionale un sottoinsieme di polyfill.

<script>
    if ('import' in document.createElement('link')) {
    // HTML Imports are supported
    } else {
    document.write(
        '<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
    }
</script>

L'esecuzione di tutte le importazioni HTML attraverso uno strumento come Vulcanize permette anche di trarre notevoli vantaggi dalla rete.

La scheda del report Polymer richiede miglioramenti.

Vulcanizza concatena le importazioni in un unico bundle, riducendo in modo significativo il numero di richieste HTTP effettuate dalla tua app.

Offline

Tuttavia, la semplice creazione di un'app ad alte prestazioni non risolve il dilemma di un utente con connettività scarsa o assente. In altre parole, se la tua app non funziona offline, in realtà non si tratta di un'app mobile. Oggi puoi utilizzare la cache delle applicazioni molto disapprovata per offline le risorse, ma guardando al futuro Service Worker dovrebbe presto rendere molto più piacevole l'esperienza di sviluppo offline.

Jake Archibald ha recentemente pubblicato un fantastico libro di ricette sui pattern dei service worker, ma ecco un esempio di guida rapida:

Installare un service worker non è facile. Crea un file worker.js e registralo all'avvio dell'applicazione.

La scheda del report Polymer richiede miglioramenti

È importante individuare worker.js nella directory principale dell'applicazione, in modo che possa intercettare le richieste da qualsiasi percorso nell'app.

Nel gestore dell'installazione del worker, metto nella cache un carico di risorse (inclusi i dati su cui si basa l'app).

La scheda del report Polymer richiede miglioramenti

In questo modo la mia app può fornire almeno un'esperienza di riserva all'utente se vi accede offline.

Avanti!

I componenti web sono un'aggiunta importante alla piattaforma web e sono ancora agli albori. Man mano che arrivano su più browser, spetta a noi, la community degli sviluppatori, stabilire le best practice per strutturare le nostre applicazioni. Le soluzioni illustrate sopra ci danno un punto di partenza, ma c'è ancora molto da imparare. Non fermarti a creare app migliori.