Polymer.js: il futuro dello sviluppo di applicazioni Web?

Circa un anno fa, a maggio 2013, Google ha lanciato Polymer.js.

Quindi eccoci qui, un anno dopo. E la domanda è: è già pronto per la prima serata? È ancora possibile creare un'applicazione pronta per la produzione utilizzando le tecniche di sviluppo web Polymer?

Per rispondere a questa domanda, ho portato Polymer a fare un giro di prova per sviluppare un'applicazione web e vedere come si sarebbe comportata bene. Questo articolo riguarda quell'esperienza e ciò che ho imparato nel processo.

Polymer.js: il concetto

Prima di entrare nel nostro tutorial sui polimeri, definiamo prima Polymer.js, non per quello che afferma di essere, ma per quello che è effettivamente.

Quando inizi a dare un'occhiata a Polymer, non puoi fare a meno di essere immediatamente incuriosito dalla sua autodichiarata visione del mondo unica. Polymer pretende di adottare una sorta di approccio al ritorno alla natura che "rimette gli elementi al centro dello sviluppo web". Con Polymer.js, puoi creare i tuoi elementi HTML e comporli in applicazioni Web complete e complesse, scalabili e gestibili. Si tratta di creare nuovi elementi (ad esempio personalizzati) che possono essere riutilizzati nelle pagine HTML in modo dichiarativo, senza bisogno di conoscerne o comprenderne l'interno.

Gli elementi, dopo tutto, sono gli elementi costitutivi del web. Di conseguenza, la weltanschauung di Polymer è che lo sviluppo web dovrebbe essere fondamentalmente basato sull'estensione del paradigma degli elementi esistenti per costruire componenti web più potenti, piuttosto che sostituire il markup con "gobs of script" (per usare le loro parole). Detto in altro modo, Polymer crede nello sfruttare le tecnologie "native" del browser piuttosto che fare affidamento su un labirinto sempre più complesso di librerie JavaScript personalizzate (jQuery et. al.). Un'idea davvero intrigante.

OK, questa è la teoria. Ora diamo un'occhiata alla realtà.

Sviluppo Web polimerico: la realtà

Sebbene l'approccio filosofico di Polymer abbia certamente dei meriti, sfortunatamente è un'idea che (almeno in una certa misura) è in anticipo sui tempi.

Polymer.js pone una serie di requisiti elevati al browser, basandosi su una serie di tecnologie che sono ancora in fase di standardizzazione (dal W3C) e non sono ancora presenti nei browser odierni. Gli esempi includono shadow dom, elementi del modello, elementi personalizzati, importazioni HTML, osservatori di mutazioni, viste basate su modello, eventi puntatore e animazioni Web. Queste sono tecnologie meravigliose, ma almeno per ora, che devono ancora arrivare ai browser moderni.

La strategia di Polymer consiste nel fare in modo che gli sviluppatori front-end sfruttino queste tecnologie all'avanguardia, ancora in arrivo, basate su browser, che sono attualmente in fase di standardizzazione (da parte del W3C), non appena diventano disponibili. Nel frattempo, per colmare il divario, Polymer suggerisce l'uso di polyfill (codice JavaScript scaricabile che fornisce funzionalità che non sono ancora integrate nei browser di oggi). I polyfill consigliati sono progettati in modo tale che (almeno in teoria) sarà possibile sostituire senza problemi una volta che le versioni browser native di queste funzionalità saranno disponibili.

Ok bene. Ma fammi capire bene. Almeno per ora, useremo le librerie JavaScript (cioè i polyfill) per evitare l'uso delle librerie JavaScript? Bene, questo è "affascinante".

La conclusione, quindi, è che siamo in una sorta di modalità limbo con Polymer, poiché alla fine si basa su (o forse più accuratamente, approssimando) tecnologie browser che non esistono ancora. Di conseguenza, Polymer.js oggi sembra più uno studio su come potrebbero essere costruite applicazioni incentrate sugli elementi in futuro (cioè, quando tutte le funzionalità necessarie saranno implementate nei principali browser e i polyfill non saranno più necessari). Ma, almeno al momento, Polymer sembra più un concetto intrigante che un'opzione reale per creare solide applicazioni per cambiare la tua visione del mondo proprio qui e ora, il che rende difficile scrivere (o trovare) un tutorial sui polimeri all'esterno della documentazione di Google.

Architettura polimerica

Ora, sulla nostra guida. Polymer.js è diviso architettonicamente in quattro livelli:

Nativo: funzionalità necessarie attualmente disponibili in modo nativo in tutti i principali browser. Base: Polyfill che implementano le funzionalità del browser necessarie non ancora disponibili in modo nativo nei browser stessi. (L'intenzione è che questo livello scompaia nel tempo man mano che le funzionalità che fornisce diventano disponibili in modo nativo nel browser.). Core: l'infrastruttura necessaria affinché gli elementi Polymer sfruttino le capacità fornite dai livelli Native e Foundation.. Elements: un insieme di elementi di base, inteso a fungere da elementi costitutivi che possono aiutarti a creare la tua applicazione. Include elementi che forniscono: Funzionalità di base come ajax, animazione, layout flessibile e gesti. Incapsulamento di complicate API del browser e layout CSS. Render dei componenti dell'interfaccia utente come fisarmoniche, schede e barre laterali.

Creazione di un'applicazione polimerica

Per iniziare, ci sono alcuni articoli e tutorial che ti aiutano a introdurti a Polymer, ai suoi concetti e alla sua struttura. Ma se sei come me, quando li hai esaminati e sei pronto per creare effettivamente la tua applicazione, ti rendi subito conto che non sei del tutto sicuro da dove iniziare o come crearla. Dato che ora ho seguito il processo e l'ho capito, ecco alcuni suggerimenti ...

Lo sviluppo del Web Polymer riguarda la creazione di elementi e riguarda solo la creazione di elementi. Quindi, coerentemente con la visione del mondo Polymer, la nostra applicazione sarà... un nuovo elemento. Niente di più e niente di meno. Oh ok, ho capito. Quindi è da lì che iniziamo.

Per il nostro esempio di progetto Polymer, nominerò l'elemento di primo livello dell'applicazione , poiché i nomi degli elementi personalizzati (indipendentemente dal framework utilizzato per crearli) devono includere un trattino (ad esempio, x-tags, polymer-elements, ecc.).

Il passaggio successivo, tuttavia, richiede un po' più di riflessione. Dobbiamo decidere come componentizzeremo la nostra applicazione. Un approccio semplice consiste nel cercare di identificare, da una prospettiva visiva, i componenti nella nostra applicazione e quindi provare a crearli come elementi personalizzati in Polymer.

Quindi, ad esempio, immagina di avere un'app con le seguenti schermate:

Possiamo identificare che la barra in alto e il menu della barra laterale non cambieranno e il "contenuto" effettivo dell'app potrebbe caricare diverse "viste".

Stando così le cose, un approccio ragionevole sarebbe quello di creare il elemento per la nostra app e, all'interno di quell'elemento, potremmo utilizzare alcuni Polymer UI Elements per creare la barra superiore e il menu della barra laterale.

Possiamo quindi creare le nostre due viste principali, che chiameremo ListView e SingleView, da caricare nell'area "contenuto". Per gli elementi in ListView, possiamo creare un ItemView.

Questo produrrà quindi una struttura simile a questa:

Le buone notizie

Ora che abbiamo la nostra applicazione Polymer di esempio, possiamo inserirla in qualsiasi pagina web semplicemente importando il nostro "toptal-app.html" e aggiungendo il tag perché, in fondo, la nostra app è solo un elemento. Questo è figo.

In effetti, in ciò risiede gran parte della potenza e della bellezza del paradigma Polymer. Gli elementi personalizzati che crei per la tua applicazione (incluso quello di primo livello per l'intera applicazione) vengono trattati come qualsiasi altro elemento in una pagina web. Puoi quindi accedere alle loro proprietà e metodi da qualsiasi altro codice o libreria JavaScript (ad esempio, Backbone.js, Angular.js, ecc.). Puoi persino utilizzare quelle librerie per creare i tuoi nuovi elementi.

Inoltre, i tuoi componenti personalizzati sono compatibili con altre librerie di elementi personalizzati (come X-Tag di Mozilla). Quindi non importa cosa usi per creare il tuo elemento personalizzato, è compatibile con Polymer e qualsiasi altra tecnologia browser.

Non sorprende quindi che abbiamo già iniziato a vedere l'avvento di una community di Element Creators che espongono e condividono i loro elementi appena creati in forum come il sito di Custom Elements. Puoi andare lì e prendere qualsiasi componente di cui hai bisogno e usarlo semplicemente nella tua applicazione.

D'altro canto…

Il polimero è ancora una tecnologia sufficientemente nuova che gli sviluppatori, in particolare gli sviluppatori di app inesperti, potrebbero trovarla alquanto fragile, con una serie di spigoli non così difficili da trovare.

Ecco un campione:

• Mancanza di documentazione e guida.
  • Non tutta l'interfaccia utente di Polymer.js e gli elementi non dell'interfaccia utente sono documentati. A volte l'unica "guida" su come usarli è il codice demo. In alcuni casi è addirittura necessario fare riferimento al codice sorgente di un Polymer Element per capire meglio come funziona e come può/dovrebbe essere utilizzato.
  • Non è del tutto chiaro come organizzare applicazioni più grandi. In particolare, come dovresti passare oggetti singleton tra gli elementi? Quale strategia dovresti utilizzare per testare i tuoi elementi personalizzati? La guida su questo tipo di problemi a questo punto è nella migliore delle ipotesi scarsa.

• Errori di dipendenza e version-itis. Anche quando scarichi gli elementi Polymer.js come consigliato, potresti trovarti con un errore di dipendenza, che punta a dipendenze di versioni diverse nello stesso elemento. Sebbene sia chiaro che gli elementi polimerici sono attualmente in forte sviluppo, questo tipo di problemi può rendere lo sviluppo piuttosto impegnativo, erodendo la fiducia e l'interesse degli sviluppatori.

• Problemi su piattaforme mobili. Le prestazioni di Polymer.js su piattaforme mobili possono spesso essere tra frustranti e problematiche.
  • Il download dell'intera libreria e dei polyfill (senza gzip'ing) è lento e devi scaricare ogni Polymer Element che intendi utilizzare.
  • L'elaborazione di polyfill, librerie ed elementi personalizzati sembra essere un'attività costosa su piattaforme mobili. Anche quando il download è completo, spesso hai ancora uno schermo vuoto per alcuni secondi.
  • Soprattutto per funzionalità più complesse (come il trascinamento della selezione o il rendering in una tela), potresti scoprire che la funzionalità che funziona correttamente sul desktop semplicemente non funziona correttamente o non è ancora supportata sulla piattaforma mobile. Nel mio caso particolare, una di queste frustrazioni che ho riscontrato è stata con il rendering in una tela su iOS.
• Segnalazione degli errori inadeguata o confusa. A volte, quando scrivi in ​​modo errato il nome di un attributo, o semplicemente interrompi qualcosa relativo al livello principale stesso, ricevi uno strano messaggio di errore sulla tua console con due stack di chiamate che devi esaminare per provare a determinare dove si trova il problema. A volte è facile risolverlo, ma a volte si finisce per dover provare una strategia completamente diversa solo per evitare l'errore poiché non è possibile rintracciarne la fonte.

Conclusione

Il polimero è una tecnologia intrigante, ma è innegabilmente ancora agli albori. In quanto tale, non è ancora adatto allo sviluppo di un'applicazione di grandi dimensioni, a livello aziendale, pronta per la produzione. Inoltre, non sono disponibili molte guide o tutorial specifici per lo sviluppo Web di Polymer.js.

Per quanto riguarda se l'approccio incentrato su JavaScript o incentrato sul DOM sia davvero fondamentalmente migliore, la giuria è ancora fuori. Polymer fornisce alcune argomentazioni convincenti, ma esistono contro-argomentazioni.

Forse in particolare, Polymer richiede un livello abbastanza significativo di esperienza nell'utilizzo di tecnologie browser come il DOM. In molti modi stai tornando ai giorni precedenti a jQuery, imparando l'API DOM per eseguire semplici attività come aggiungere o rimuovere una classe CSS da un elemento. Questo sicuramente ti fa sentire, almeno a un certo livello, come se stessi facendo un passo indietro piuttosto che in avanti.

Ma detto questo, sembra probabile che gli elementi personalizzati diventeranno una parte importante dello sviluppo web in futuro, quindi immergersi prima piuttosto che dopo sarebbe probabilmente prudente per lo sviluppatore web di oggi. E se non hai mai provato a creare i tuoi elementi personalizzati prima, Polymer (e questo tutorial) è probabilmente un punto di partenza ragionevole.