I componenti web cambieranno tutto ciò che pensi di sapere sulla creazione di contenuti per il web. Per la prima volta, il web avrà API a basso livello che ci consentiranno non solo di creare i nostri tag HTML, ma anche di incapsulare la logica e il CSS. Non dovrai più creare fogli di stile globali o codice boilerplate. È un nuovo mondo in cui tutto è un elemento.
Nel mio talk di DotJS, descrivo cosa offrono i componenti web e come crearli utilizzando strumenti moderni. Ti mostrerò Yeoman, un workflow di strumenti per semplificare la creazione di app web utilizzando Polymer, una libreria di polyfill e sugar per lo sviluppo di app che utilizzano i componenti web nei browser moderni.
Creare elementi personalizzati e installare elementi creati da altri
In questo intervento imparerai:
- Informazioni sulle quattro diverse specifiche che compongono Web Components: Elementi personalizzati, Modelli, Shadow DOM e HTML Imports.
- Come definire i tuoi elementi personalizzati e installare elementi creati da altri utilizzando Bower
- Dedica meno tempo alla scrittura di JavaScript e più tempo alla costruzione delle pagine
- Utilizza strumenti frontend moderni (Yeoman) per creare lo scafo di un'applicazione utilizzando Polymer con generator-polymer
- In che modo Polymer Super cambia la creazione di componenti web.
Ad esempio, per installare i polyfill dei componenti web di Polymer e la libreria stessa, puoi eseguire questo comando:
bower install --save Polymer/platform Polymer/polymer
Viene aggiunta una cartella bower_components
e i pacchetti sopra indicati. --save
li aggiunge al file bower.json dell'app.
In un secondo momento, se volessi installare l'elemento accordion di Polymer, potresti eseguire:
bower install --save Polymer/polymer-ui-accordion
e poi importalo nella tua applicazione:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Per risparmiare tempo, puoi creare lo scaffolding di una nuova app Polymer con tutte le dipendenze necessarie, il codice boilerplate e gli strumenti per ottimizzare l'app con Yeoman utilizzando questo altro comando:
yo polymer
Procedura dettagliata per i bonus
Ho anche registrato una procedura dettagliata bonus di 30 minuti dell'app Polymer Jukebox che mostro nel talk.
Argomenti trattati nel video bonus:
- Significato del mantra "tutto è un elemento"
- Come utilizzare Bower per installare gli elementi e i polyfill di Polymer
- Strutturazione dell'app Jukebox con il generatore e i sottogeneratori Yeoman
- Informazioni sulle funzionalità della piattaforma messe in primo piano tramite boilerplate
- Come ho eseguito il porting funzionale di un'app Angular in Polymer.
Utilizziamo anche i sottogeneratori di Yeoman per lo scaffolding dei nostri nuovi elementi Polymer. Ad esempio, per creare il boilerplate per un elemento foo
eseguiamo:
yo polymer:element foo
che ci chiederà se vogliamo importare automaticamente l'elemento, se è necessario un costruttore e alcune altre preferenze.
Le ultime versioni dei sorgenti dell'app mostrata in entrambi i talk sono ora disponibili su GitHub. L'ho riorganizzato un po' di più per renderlo più organizzato e un po' più facile da leggere.
Anteprima dell'app:
Per approfondire
In sintesi, Polymer è una libreria JavaScript che abilita i componenti web nei browser web moderni in attesa che vengano implementati in modo nativo. Gli strumenti moderni possono aiutarti a migliorare il flusso di lavoro e ti consigliamo di provare Yeoman e Bower per lo sviluppo dei tuoi tag.
Ecco altri articoli sull'argomento che vale la pena leggere: