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
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
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).