Slide da palestra que fiz no TDC 2021

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