Desenvolvendo Web Components
UI do jQuery ao Polymer
Descrição do livro
Embora os Web Components ainda estejam na vanguarda absoluta – com muito pouco suporte nos browsers modernos –, a tecnologia também está se movendo com extrema rapidez. Este guia prático o fará ganhar velocidade com os conceitos por trás do padrão emergente do W3C e mostrará como criar Web Components customizados e reutilizáveis para HTML5.
Não importa sua experiência com bibliotecas como jQuery e Polymer, este livro ensina, aos desenvolvedores JavaScript, as manipulações do DOM que essas bibliotecas realizam. Você aprenderá a montar um widget básico com JavaScript pura, para depois convertê-lo em um Web Component semântico, declarativo, encapsulado, consumível e de fácil manutenção. Com componentes customizados, a Web pode finalmente cumprir seu potencial como uma plataforma de aplicação extensível por natureza. Este livro permitirá que você embarque na hora certa.
Compreenda os conceitos básicos (como fluxo normal e posicionamento, e z-index) para posicionar, arrastar e redimensionar elementos devidamente
Explore conceitos e padrões de UI normalmente abstraídos por Dojo, jQuery UI, Kendo UI e outras bibliotecas
Mergulhe no padrão W3C e converta seu exemplo de widget funcional em um Web Component em pleno funcionamento
Aprenda a encapsular, empacotar e fazer o deploy dos seus Web Components com o framework Polymer da Google
Sumário
- Prefácio
- Capítulo 1 ■ Introdução
- O que são Web Components?
- Templates HTML
- HTML Imports
- Elementos personalizados
- Shadow DOM
- Por que Web Components?
- Parte I Conceitos básicos de UI
- Capítulo 2 ■ Criando um alicerce sólido
- A importância de uma camada de abstração DOM
- Projeto de API e ciclo de vida do widget
- O padrão de herança
- Dependências
- Otimização
- Um componente web não é apenas JavaScript
- Widget de exemplo
- A classe base do widget Voltron
- Classe Dialog
- CSS e HTML da classe Dialog
- Resumo
- Capítulo 3 ■ Fluxo normal e posicionamento
- Fluxo normal
- Posicionamento de elementos
- offsetParent
- Posicionamento
- Calculando a posição de um elemento
- Relativa à viewport
- Relativa ao documento
- Posicionando o widget de diálogo
- Resumo
- Capítulo 4 ■ Compreendendo e gerenciando o z-index
- O que é exatamente a propriedade z-index?
- Camadas de renderização, ordem de empilhamento e z-index
- Ordens de empilhamento default
- Redefinindo a ordem de empilhamento default
- Contextos de empilhamento
- Como é criado um contexto de empilhamento?
- Aumentando a complexidade
- Gerenciamento de z-indexes
- Gerenciador de z-index
- Convertendo para um plugin jQuery
- Acrescentando o gerenciamento de z-index ao widget de diálogo
- Resumo
- Parte II Criando nossa UI
- Capítulo 5 ■ Clonagem de nós
- Usando o método cloneNode
- Usando jQuery clone
- Continuação do widget de diálogo
- Resumo
- Capítulo 6 ■ Construindo um overlay
- Definindo uma API
- Utilitários
- Detectando largura da barra de rolagem
- Considerando a barra de rolagem ao calcular a largura de um elemento contêiner
- Obtendo as dimensões e as coordenadas de um elemento
- Escutando os eventos de redimensionamento e rolagem
- Atualizando opções
- Destruindo
- Posicionando
- Posicionando um elemento em relação à viewport ou a outro elemento
- Posicionando um elemento em relação a outro elemento
- Acrescentando o overlay ao widget de diálogo
- Resumo
- Capítulo 7 ■ Tornando os elementos arrastáveis
- Eventos do mouse
- $ mousemove
- $ mousedown
- $ mouseup
- Melhores práticas para eventos do mouse
- 1. Vincule $ mousemove em $ mousedown
- 2. Desvincule $ mousemove em $ mouseup
- 3. Vincule $ mouseup ao <body>
- 4. Nomeie todos os vínculos de evento
- Definindo uma API
- Criando um handle de arrasto
- Movimentando as coisas
- Manipulador $ mousedown
- Manipulador $ mousemove
- Manipulador $ mouseup
- Destruindo uma instância arrastável
- Tornando o widget de diálogo arrastável
- Resumo
- Capítulo 8 ■ Redimensionando elementos
- Eventos do mouse e melhores práticas (recapitulando)
- Eventos
- Melhores práticas
- Redimensionando um elemento
- Tornando uma API redimensionável
- Definindo handles de arrasto
- Vinculando manipuladores de eventos
- Manipulador $ mousedown
- Manipulador $ mousemove
- Manipulador $ mouseup
- Destruindo uma instância redimensionável
- Biblioteca de redimensionamento completada
- Tornando o widget de diálogo redimensionável
- Resumo
- Capítulo 9 ■ Completando o widget de diálogo
- Modelagem do widget
- Acrescentado a CSS
- Concatenando o JavaScript
- Resumo
- Parte III Criando Web Components para HTML5
- Capítulo 10 ■ Utilizando templates
- Compreendendo a importância dos templates
- Adiando o processamento de recursos
- Adiando a renderização do conteúdo
- Ocultando o conteúdo do DOM
- Criando e usando um template
- Detectando o suporte do browser
- Incluindo um template no markup
- Acrescentando um template ao DOM
- Convertendo o componente de diálogo para um template
- Criando uma API de wrapper para o template de diálogo
- Instanciando uma instância do componente de diálogo
- Generalizando o wrapper de template do diálogo
- Resumo
- Capítulo 11 ■ Trabalhando com Shadow DOM
- O que é Shadow DOM?
- Fundamentos de Shadow DOM
- Shadow host
- Shadow root
- Usando um template com Shadow DOM
- Estilização no Shadow DOM
- Encapsulamento de estilo
- Estilizando o elemento host
- Estilizando elementos do shadow root a partir da página pai
- Projeção do conteúdo
- Projeção por meio da tag content
- Projeção por meio de seletores de conteúdo
- Obtendo nós distribuídos e pontos de inserção
- Pontos de inserção de shadow
- Eventos e o Shadow DOM
- Atualizando o template do diálogo para usar Shadow DOM
- Marcação do diálogo
- API do diálogo
- Atualizando o método show do diálogo
- Instanciando uma instância do componente de diálogo
- Resumo
- Capítulo 12 ■ Criando elementos customizados
- Introduzindo elementos customizados
- Registrando elementos customizados
- Estendendo elementos
- Estendendo elementos customizados
- Estendendo elementos nativos
- Definindo propriedades e métodos
- Convertendo elementos customizados
- Ganchos nos ciclos de vida do elemento customizado
- createdCallback
- attachedCallback
- detachedCallback
- attributeChangedCallback
- Estilizando elementos customizados
- Usando templates e o Shadow DOM com elementos customizados
- Convertendo o componente de diálogo em um elemento customizado
- Criando o elemento customizado de diálogo
- Implementando os callbacks do elemento customizado de diálogo
- Implementando a API do elemento customizado de diálogo
- Mostrando o diálogo
- Resumo
- Capítulo 13 ■ Importando código
- Declarando uma importação
- Acessando o conteúdo de uma importação
- Referenciando documentos
- Aplicando estilos
- Acessando templates
- Executando JavaScript
- Compreendendo as importações em relação ao documento principal
- Analisando importações
- Considerações entre domínios diferentes
- Subimportações
- Carregando elementos customizados
- Importando o diálogo
- Resumo
- Parte IV Teste, build e deploy de componentes com Polymer
- Capítulo 14 ■ Introdução ao Polymer
- Elementos do Polymer
- Acrescentando estilo
- Recursos externos
- Filtrando expressões
- Sintaxe de template
- Vínculo de dados
- Repetição de bloco
- Escopos vinculados
- Blocos condicionais
- Múltiplas diretivas de template ao mesmo tempo
- Atributos e propriedades – a API do seu elemento
- Atributos despidos
- Propriedades publicadas
- Métodos de instância
- APIs JavaScript do Polymer
- Métodos do ciclo de vida
- Eventos
- Gerenciando o trabalho adiado
- Resumo
- Capítulo 15 ■ Portando nosso diálogo para o Polymer
- Por que portar algo para o Polymer, afinal?
- Portando diretamente
- Gerenciando dependências
- Instalando dependências com o Bower
- Começando
- Isso foi fácil – um pouco fácil demais!
- jQuery no mundo do Polymer
- O que jQuery oferece?
- Removendo o jQuery
- O veredicto sobre jQuery
- Resumo
- Capítulo 16 ■ Testando Web Components
- PhantomJS 1
- PhantomJS 2
- Selenium WebDriver
- Karma
- Especificações de teste
- Executando nossos testes
- Resumo
- Capítulo 17 ■ Empacotando e publicando
- Vulcanize
- Gulp
- Grunt
- Gruntfiles
- Tarefas do Grunt
- Registrando tarefas
- Configuração do Grunt
- Publicando com Bower
- Registrando o componente
- Resumo
- Capítulo 18 ■ Palavras finais
- Para onde vamos agora?
- Polymer
- Mozilla X-Tag
- document-register-element
- WebComponents org
- CustomElements io
- Boa sorte!
- Sobre os autores
- Colofão
Sobre os autores
Jarrod Overson é desenvolvedor na Web há mais de 15 anos, tanto em empresas iniciantes quanto em empresas globais. Atualmente na Shape Security, Jarrod é proponente e colaborador ativo de iniciativas open source e ferramentas para a linguagem JavaScript; ele criou o Plato e muitas outras ferramentas e bibliotecas.… Ver perfil completo ▶
Jason Strimpel é engenheiro de software com mais de 15 anos de experiência no desenvolvimento de aplicações web. Atualmente, trabalha na WalmartLabs, onde escreve software para dar suporte ao desenvolvimento de aplicações de UI. Jason também é membro ativo da comunidade open source, e gerencia projetos como LazoJS.… Ver perfil completo ▶
Livros relacionados
Recursos
Opinião dos leitores
Nilo C T
Esse livro começa com o pé direito, apesar de alguns bugs nos códigos de exemplo, ao detalhar funcionalidades comuns a aplicações web. Contudo, desanda completamente ao entrar no assunto web components: muitos exemplos estão obsoletos, desde métodos como createShadowRoot() e registerElement(), a seletores como ::shadow, a elementos como <content> e <shadow>. Está tudo obsoleto. O melhor caminho (em 05/2022) acredito que seja ler a documentação da MDN mesmo. Os autores não respondem aos issues do repositório github, então se vc decidir ler este livro mesmo assim, considere estas ressalvas.
Francisco M B F
Excelente livro! didática maravilhosa e dicas super importantes para quem está desenvolvendo aplicativos e outros sistemas para web. super recomendo!
Angel A G M
Bom livro.
Claudio A
Este livro demonstra a transição entre a época das bibliotecas de widgets para a era dos componentes, mostrando o "por baixo dos panos" das novas frameworks (react, angular).