Web components para o seu design system
- 1. Web Components para o seu Design System! Nicole Oliveira
- 2. Quem sou eu ● Engenheira de Software ● TOTVS ● Formada em Sistemas de Informação ● Joinville ● Casada com o João e mãe da Abigail e do Jacó
- 3. O que é um Design System?
- 4. “Design System não é um projeto, é um produto servindo outros produtos.” Nathan Curtis da Eightshapes
- 5. “Um ecossistema de bibliotecas com componentes codados a partir de semânticas de design e gestão de estilo centralizada” Meiuca
- 6. Design System Style Guide
- 7. Design tokens Base Components Components Templates Cores Espessura da borda Raio da borda Fonte Button Checkbox Link Modal Input Página composta por modal e input
- 8. CARBON Design System da IBM
- 9. Resumindo... ● é um produto ● tem que ter como produto final código-fonte (tecnologia) ● precisa de uma equipe multidisciplinar (designer, devs, PO, PM) ● Composta por: design tokens, base components, components e templates
- 10. Se o Design System tem como produto final, componentes desenvolvidos, qual é a tecnologia indicada para isso?
- 11. Tecnologias Web hoje disponíveis no mercado ● Angular ● React ● Vue ● Ember Web components new
- 12. O que é um Web component?
- 13. <pods-button label="Hello world"> </pods-button> HTML É só isso! + CSS + JS = Componente
- 14. Composto por 4 tecnologias principais Web Components Elementos customizados Shadow DOM Templates HTML ES Modules
- 15. Composto por 4 tecnologias principais Web Components Elementos customizados Shadow DOM Templates HTML ES Modules
- 16. Composto por 4 tecnologias principais Web Components Elementos customizados Shadow DOM Templates HTML ES Modules Um conjunto de APIs JavaScript para incorporar uma árvore DOM "fantasma" encapsulada a um elemento — que é renderizada separadamente do DOM do documento principal — e controlar a funcionalidade associada.
- 17. Composto por 4 tecnologias principais Web Components Elementos customizados Shadow DOM Templates HTML ES Modules Usar o elementos <template> e <slot> para reaproveitamento de conteúdo
- 18. Composto por 4 tecnologias principais Web Components Elementos customizados Shadow DOM Templates HTML ES Modules
- 19. Como está o mercado HOJE?
- 21. Por que escolhemos utilizar Web Components?
- 22. Por que escolhemos utilizar Web Components? ● Flexibilidade para poder utilizar em qualquer outro framework front-end. ● Interoperabilidade com projetos que estão em produção atualmente. ● Menor tamanho de pacote final. ● Suporta a maioria dos navegadores, apenas para IE precisa de polyfill
- 23. Desafios encontrados ● Algumas ferramentas de apoio ainda não tem muita documentação para suporte. Por exemplo: testes e storybook. ● Custom properties para IE11 não foi possível, tivemos que utilizar fallback.
- 24. Falar é fácil! Eu quero ver é o código!
- 26. Referências Design system na visão da Meiuca Web Components - MDN Web Components - ORG https://github.com/nicoleoliveira/tdc-web-components
- 27. Obrigada! LinkedIn: Nicole Oliveira Medium: @nicoleoliveirasilva Github: nicoleoliveira