Web components
Transferir como PPTX, PDF3 gostaram565 visualizações
O documento discute a evolução dos web components, explicando sua importância na criação de componentes reutilizáveis que não interferem entre si. Detalha os quatro componentes fundamentais dos web components: elementos customizados, shadow DOM, templates e importação HTML, além do suporte de navegadores e bibliotecas existentes como Polymer e X-tags. Conclui ressaltando que web components podem representar o futuro do desenvolvimento web.
Web components
- 2. Jackson Veroneze Software Developer jackson@jacksonveroneze.com https://jacksonveroneze.com https://br.linkedin.com/in/jacksonveroneze Autores Mario Mendonça Software Developer mario.mendonca@gmail.com https://br.linkedin.com/in/mario-mendonca
- 3. Componentes, do desktop para a web?
- 4. Introdução Todas as vezes que você precisa implementar um slider ou elementos de um framework que você gosta, invariavelmente você precisa copiar um grande pedaço de código HTML, CSS e Javascript para depois aplicar em seu projeto.
- 5. O Problema do HTML/CSS macarrônicos A forma de desenhar uma página Web mudou bastante nos últimos 20 anos. As tecnologias básicas ainda são as mesmas: HTML 5 para estruturar um documento. CSS 3 para estilizar os elementos no documento. Javascript para adicionar comportamento.
- 6. O que são os Web Components A ideia de criar componentes na web não é nova. A cada novo framework ou a cada novo plugin, tentamos fazer isso. O problema é que um componente só é um componente se ele pode ser reutilizado, diversas vezes, em qualquer lugar do projeto, sem sofrer alterações acidentais por códigos externos e também sem modificar outros elementos. É aí que entram os Web Components.
- 7. Os componentes web, na forma atual, são constituídos de quatro partes: Elementos Customizados (Custom Elements) DOM Sombra (Shadow DOM) Modelos (Templates) Importação HTML (HTML Imports)
- 8. Elementos Customizados (Custom Elements) Elementos que podem ser nomeados como quisermos e operar a nosso gosto. Quando criamos um elemento customizado, pode criá-lo do zero ou pode estender algum elemento HTML existente, como, por exemplo, o <button> e fornecer uma funcionalidade ou apresentação modificada que precisar.
- 9. DOM Sombra (Shadow DOM) A DOM Sombra (Shadow DOM) é o aspecto fundamental do funcionamento dos componentes web. É o lugar onde o código escondido vive. Fabricantes de navegadores tem usado esse DOM Sombra por anos, para implementar, nativamente, elementos como o input, audio, video e outros. A ideia básica é que você pode pegar todo o código que não precisa ser visto e escondê- lo. Isso permite você lidar, somente, com dados que ajustam o elemento, como a altura, largura e caminho dos arquivos de vídeo ao usarmos o elemento<video>.
- 10. DOM Sombra (Shadow DOM) Cada instância é auto-contida. Folhas de estilo e códigos JavaScript dentro do elemento, eles não vazarão, acidentalmente, e não afetará qualquer outra coisa na página. Reciprocamente, os CSS e JavaScript que estiverem em qualquer lugar da sua página, não afetarão seu componente web, exceto aquelas que forem criadas especificamentes para estilizar e interagir com ele. Isso significa que não precisará criar um espaço de nome em seus IDs e classes CSS para evitar conflitos.
- 11. DOM Sombra (Shadow DOM) Chrome - Ferramentas de Desenvolvedor (Dev Tools)
- 12. Shadow DOM - HabilitadoShadow DOM - Desabilitado
- 13. Modelos (Templates) Modelo é uma combinação de HTML, CSS e JavaScript, e inclui a funcionalidade que disponibilizamos quando usarmos o elemento.
- 14. Importação HTML (HTML Imports) Importação de HTML permite que você pegue tudo que foi desenvolvido e faça funcionar na sua página. Os componente web são definidos dentro de arquivos HTML externos, assim, esse arquivo precisa ser importado para que o elemento customizado funcione.
- 17. O que são Polyfills? Polyfill é um "shim de JavaScript que replica a API padrão nos navegadores mais antigos". "API padrão" se refere a um determinado recurso ou tecnologia HTML5. Por exemplo, um polyfill de Localização Geográfica.
- 18. Implementações Não-Nativas O suporte nativo está a caminho por parte do Chrome, Opera e Firefox, porém, não está completo ainda. O IE e o Safari ainda não publicaram seus planos. Por hora, se você quiser trabalhar com componentes web, terá de usar uma das implementações não-nativas existentes. A boa notícia é que as duas soluções mais populares foram criadas pelo Google e pela Mozilla, então, podemos esperar que haja consistência no modo de operação do suporte nativo.
- 19. Polymer(Google) O Polymer vem com uma biblioteca completa de componentes web pré-criados. Ela inclui os "elementos base do Polymer que são orientados a funcionalidades, além dos "elementos Paper", que são orientados a design. Ao criar elementos customizados com o Polymer, ao invés de usar o formato <element name="..."> você usará <polymer-element name="...">.
- 20. Polymer - Suporte a Navegadores Chrome Android Chrome Canary Firefox IE 10+ Safari 6+ Mobile Safari
- 21. X-Tags(Mozilla) X-Tags é uma biblioteca JavaScript criada pela Mozilla que, atualmente, leva vantagem sobre o Polymer pelo seu suporte a navegadores ser maior.
- 22. X-Tags - Suporte a Navegadores Firefox 5+ desktop & mobile Chrome 4+ Chrome Android 2.1+ Safari 4+ desktop & mobile IE9+ Opera 11+ desktop & mobile
- 23. React vs Polymer
- 24. Vocês acreditam que web components é o futuro do desenvolvimento web?