Os componentes da Web vão mudar tudo o que você pensa que sabe sobre desenvolvimento para a Web. Pela primeira vez, a Web terá APIs de baixo nível que permitem não apenas criar nossas próprias tags HTML, mas também encapsular a lógica e o CSS. Não há mais sopa de folha de estilo global ou código boilerplate. É um mundo novo e ousado em que tudo é um elemento.
Na minha palestra do DotJS, apresento o que os componentes da Web têm a oferecer e como criá-los usando ferramentas modernas. Vou mostrar o Yeoman, um fluxo de trabalho de ferramentas para simplificar a criação de apps da Web usando o Polymer, uma biblioteca de polyfills e açúcar para desenvolver apps usando os Web Components nos navegadores modernos atuais.
Criar elementos personalizados e instalar elementos criados por outras pessoas
Nesta palestra, você vai aprender:
- Sobre as quatro especificações diferentes que compõem os Web Components: elementos personalizados, modelos, Shadow DOM e importações de HTML.
- Como definir seus próprios elementos personalizados e instalar elementos criados por outras pessoas usando o Bower
- Gaste menos tempo escrevendo JavaScript e mais tempo construindo páginas
- Use ferramentas modernas de front-end (Yeoman) para criar um aplicativo usando o Polymer com o generator-polymer.
- Como o Polymer muda a criação de componentes da Web.
Por exemplo, para instalar os polifills de componentes da Web do Polymer e a biblioteca, execute este comando de uma linha:
bower install --save Polymer/platform Polymer/polymer
Isso adiciona uma pasta bower_components e os pacotes acima. --save adiciona os arquivos ao arquivo bower.json do app.
Depois, se você quisesse instalar o elemento acordeão do Polymer, poderia executar:
bower install --save Polymer/polymer-ui-accordion
e importe para o app:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Para economizar tempo, você pode usar o Yeoman para criar um novo aplicativo Polymer com todas as dependências necessárias, código boilerplate e ferramentas para otimizar seu app com este outro comando:
yo polymer
Tutorial bônus
Também gravei um tutorial bônus de 30 minutos do app Polymer Jukebox que mostrei na palestra.
Conteúdo do vídeo bônus:
- O que significa o mantra "tudo é um elemento"
- Como usar o Bower para instalar os polyfills e elementos da plataforma do Polymer
- Criar um esqueleto do app Jukebox com o gerador e os subgeradores do Yeoman
- Noções básicas sobre os recursos da plataforma estruturados com modelo
- Como fiz a portabilidade funcional de um app do Angular para o Polymer.
Também usamos subgeradores do Yeoman para criar um esqueleto dos nossos novos elementos Polymer. Por exemplo, para criar o modelo de um elemento foo, executamos:
yo polymer:element foo
que vai perguntar se queremos importar o elemento automaticamente, se um construtor é necessário e algumas outras preferências.
As fontes mais recentes do app mostrado nas duas palestras estão disponíveis no GitHub. Eu refatorei o código para ficar mais organizado e um pouco mais fácil de ler.
Prévia do app:
Leitura adicional
Em resumo, o Polymer é uma biblioteca JavaScript que ativa os Web Components agora em navegadores da Web modernos enquanto aguardamos a implementação nativa deles. Ferramentas modernas podem ajudar a melhorar seu fluxo de trabalho. Você pode testar o Yeoman e o Bower ao desenvolver suas próprias tags.
Confira outros artigos sobre o assunto:
- Como criar apps da Web com o Yeoman e o Polymer
- Concatenar componentes da Web com Vulcanize
- Chrome Dev Summit: componentes declarativos, encapsulados e reutilizáveis do Polymer
- O cenário da automação de desenvolvimento
- Componentes da Web: o futuro do desenvolvimento da Web
- Como criar apps com o fluxo de trabalho do Yeoman