Os Web Components mudam tudo o que você acha que sabe sobre criação para a Web. Pela primeira vez, a Web terá APIs de baixo nível, o que nos permitirá não apenas criar nossas próprias tags HTML, mas também encapsular lógica e CSS. Chega de sopa de folha de estilo global ou código boilerplate. É um mundo novo e corajoso, em que tudo é um elemento.
Na minha palestra com a DotJS, eu explico o que os componentes da Web têm a oferecer e como criá-los usando ferramentas modernas. Vou mostrar a você o Yeoman, um fluxo de trabalho de ferramentas para simplificar a criação de apps da Web com o Polymer, uma biblioteca de polyfills e açúcar para desenvolver apps usando componentes da Web em navegadores modernos.
Crie elementos personalizados e instale elementos criados por outras pessoas
Nesta palestra, você aprenderá:
- Sobre as quatro especificações diferentes que compõem componentes da Web: 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
- Passe menos tempo escrevendo JavaScript e mais tempo criando páginas
- Usar ferramentas de front-end modernas (Yeoman) para scaffolding um aplicativo usando o Polymer com gerador-polímero
- Como o Polymer modifica a criação de componentes da Web.
Por exemplo, para instalar os polyfills de componente da Web da Polymer e a própria biblioteca, execute este forro:
bower install --save Polymer/platform Polymer/polymer
Isso vai adicionar uma pasta bower_components e os pacotes acima. --save os adiciona ao arquivo bower.json do app.
Depois, se quiser instalar o elemento acordeão do Polymer, você poderá executar:
bower install --save Polymer/polymer-ui-accordion
e importe essas informações para seu aplicativo:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Para economizar tempo, a estrutura de um novo app Polymer com todas as dependências necessárias, código boilerplate e ferramentas para otimizar seu app pode ser feito com o Yeoman e este outro alinhamento:
yo polymer
Tutorial bônus
Também gravei um tutorial de 30 minutos bônus do app Jukebox da Polymer que mostro na palestra.
Assuntos abordados no vídeo bônus:
- O que o mantra "tudo é um elemento" significa
- Como usar o Bower para instalar os polyfills e elementos da plataforma da Polymer
- Como estruturar nosso app Jukebox com os geradores e subgeradores Yeoman
- Entender os recursos da plataforma baseados em código boilerplate
- Como fazer a portabilidade funcional de um app Angular para o Polymer.
Também usamos subgeradores do Yeoman para a estrutura dos novos elementos do Polymer. Por exemplo, para criar o código boilerplate de um elemento foo que executamos:
yo polymer:element foo
que nos perguntará se queremos que o elemento seja importado automaticamente, se um construtor é necessário e para algumas outras preferências.
As fontes mais recentes do app mostrado nas duas palestras agora estão no GitHub. Refatorei um pouco mais para que ele fique mais organizado e um pouco mais fácil de ler.
Visualização do app:
Leia mais
Em resumo, a Polymer é uma biblioteca JavaScript que ativa o Web Components agora em navegadores modernos, enquanto esperamos que eles sejam implementados de forma nativa. Ferramentas modernas podem ajudar a melhorar seu fluxo de trabalho ao usá-las. Você vai gostar de testar o Yeoman e o Bower para desenvolver suas próprias tags.
Alguns outros artigos que valem a pena conferir sobre o assunto:
- Como criar apps da Web com o Yeoman e o Polymer (em inglês)
- Como concatenar componentes da Web com o Vulcanize
- Chrome Dev Summit: componentes declarativos, encapsulados e reutilizáveis do Polymer (em inglês)
- O cenário da automação de desenvolvimento
- Web Components: o futuro do desenvolvimento Web (em inglês)
- Como criar apps com o fluxo de trabalho Yeoman (em inglês)