Web Components: today or tomorrow?

Talks about Web Components and Polymer 3.

Event: FrontIn Fortaleza 2018

Transcript

1. Web Components Hoje ou só amanhã? twitter @virginiacruz youtube virginiacruz Front-End Dev & UX | OSF Global Service email virginiarcruz@gmail.com
2. Web Components Polymer
3. Isso é coisa nova… • 2013 - Zeno Rocha Web Components • 2014 - Google Polymer • 2018 - Web Components + Polymer 3 =
4. O que é isso mesmo hein? • NÃO!!!
5. O que é isso mesmo hein? • Recurso do Browser • Componentes encapsulados • Reutilizáveis • Escrever seus próprios elementos • Marcação significativa <meu-componente>
6. <gangnam-style></gangnam-style> http://html5-demos.appspot.com/gangnam
7. Falando em Compon entes… • Twitter - Bootstrap • Facebook - React • LinkedIn - CSSBlocks • Yahoo… também tem um
8. A gente tenta… • Pré-processadores (SASS, Less, Stylus) • BEM, RSCSS, SMACSS, OOSCSS • CSS Modules, Styled Components, Component Styles…
9. CSS é amor
10. Mas pode ser terror
12. Código legível. #sqn
13. É verdade esse "bilete"
14. Por que usar? • Estilos por componente • CSS/JS somente do elemento utilizado no DOM • Elimina código morto • Minúsculo tempo de execução • Compartilhamento de código JS e CSS • Rápida manutenção
15. Especifi cações • Custom Elements - Elementos personalizados <slider-header> • Templates - pequenos pedaços de código reutilizáveis • Shadow DOM - Encapsulamento e isolamento do componente #shadow-root • HTML Imports - inclusão de elementos html em outros documentos html <link rel=”import” href=”meuarquivo.html”>
17. Mas… já tem gente usando
18. GitHub https://githubengineering.com/removing-jquery-from-github-frontend/
20. Polymer
21. O que eu ganho com isso? • Desenvolvida pelo Google desde 2013 • Não é um framework. • É biblioteca que provê uma API de alto nível para trabalhar com Web Components. • Encapsulamento de CSS, HTML e JavaScript a nível de browser, ou seja, segurança e isolamento de aplicação nativa para o componente. • Produtivo, Declarativo, Manutenível, Reusável, Interpolável, Componentizado, Leve, Testável…
22. Hands On
23. Além disso… • https://www.polymer- project.org • www.webcomponents.org - muitos elementos comumente usados.
24. paper elements Conjunto de componentes de UI projetados para implementar o conceito de Material Design.
25. Google Web Components Uma coleção de componentes da Web para APIs e serviços do Google. Gold Elements Componentes para trabalhar com ecommerce, oferece validação de cartão de crédito, telefone e muito do sistema de checkout
26. É DOM + CSS + JS • Legível • Reutilização real • Não reinventa a roda • Fácil integração com outros frameworks
27. Web Components: uma realidade que você já pode testar :) !!
28. Obrigada! twitter @virginiacruz youtube virginiacruz email virginiarcruz@gmail.com Qualquer coisa, chama aqui:
29. Referências • Felipe Fialho - @LFeh • Larissa Abreu - @TheSweet_Lari • Beto Muniz - @obetomuniz