I componenti web cambieranno tutto ciò che pensi di sapere sulla creazione per il web. Per la prima volta, il Web disporrà di API di basso livello che ci consentiranno non solo di creare i nostri tag HTML, ma anche di incapsulare logica e CSS. Non serve più codice boilerplate o zuppa di fogli di stile globale. È un nuovo mondo coraggioso in cui tutto è un elemento.
Nella mia presentazione di DotJS, spiegherò cosa hanno da offrire i componenti web e come crearli utilizzando strumenti moderni. Ti mostrerò Yeoman, un flusso di lavoro di strumenti per semplificare la creazione di app web utilizzando Polymer, una libreria di polyfill e zucchero per lo sviluppo di app che utilizzano i componenti web oggi nei browser moderni.
Creare elementi personalizzati e installare elementi creati da altri
In questa presentazione imparerai:
- Informazioni sulle quattro diverse specifiche che compongono i componenti web: Elementi personalizzati, Modelli, Shadow DOM e Importazioni HTML.
- Come definire elementi personalizzati e installare elementi creati da altri utilizzando Bower
- Dedica meno tempo alla scrittura di JavaScript e più tempo alla creazione delle pagine
- Usa i moderni strumenti front-end (Yeoman) per strutturare un'applicazione utilizzando i polimeri con generatore-polimero
- Come Polymer cambia creando componenti web.
Ad esempio, per installare i polyfill dei componenti web di Polymer e la libreria stessa, puoi eseguire questo testo:
bower install --save Polymer/platform Polymer/polymer
Verrà aggiunta una cartella bower_components e i pacchetti indicati sopra. --save li aggiunge al file bower.json della tua app.
In seguito, se volessi installare l'elemento accordion di Polymer, potevi eseguire:
bower install --save Polymer/polymer-ui-accordion
e importarlo nell'applicazione:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Per risparmiare tempo, puoi lavorare con Yeoman in una nuova app Polymer con tutte le dipendenze, il codice boilerplate e gli strumenti per ottimizzare l'app usando quest'altra riga:
yo polymer
Procedura dettagliata aggiuntiva
Ho anche registrato una procedura dettagliata bonus di 30 minuti sull'app Polymer Jukebox che mostro nel discorso.
Argomenti trattati nel video bonus:
- Cosa significa il mantra "tutto è un elemento"
- Come utilizzare Bower per installare polyfill ed elementi della piattaforma Polymer
- Realizziamo la nostra app Jukebox con il generatore e i sottogeneratori Yeoman
- Comprendere le funzionalità della piattaforma basate su boilerplate
- Come ho eseguito il trasferimento funzionale di un'app Angular su Polymer.
Usiamo anche i sub-generatori Yeoman per i profilati dei nostri nuovi elementi polimeri. Ad esempio, per creare il boilerplate per un elemento foo che gestiamo:
yo polymer:element foo
che ci chiede se vogliamo che l'elemento venga importato automaticamente, se è necessario un costruttore e per alcune altre preferenze.
Le fonti più recenti dell'app mostrate in entrambi gli interventi sono ora disponibili su GitHub. L'ho modificato un po' più a fondo per renderlo più organizzato e un po' più facile da leggere.
Anteprima dell'app:
Per approfondire
In sintesi, Polymer è una libreria JavaScript che ora abilita Web Componenti nei browser web moderni, mentre attendiamo che vengano implementati in modo nativo. Gli strumenti moderni possono aiutarti a migliorare il flusso di lavoro utilizzandoli e ti consigliamo di provare Yeoman e Bower durante lo sviluppo dei tuoi tag.
Ecco altri articoli che vale la pena di consultare sull'argomento:
- Creazione di app web con Yeoman e Polymer
- Concatenazione dei componenti web con Sense
- Chrome Dev Summit: componenti dichiarativi, incapsulati e riutilizzabili dei polimeri
- Il panorama dell'automazione dello sviluppo
- Componenti web: il futuro dello sviluppo web
- Creazione di app con il flusso di lavoro Yeoman