Design System com StencilJs - 17 de fev. de 2020

17 de fev. de 2020

Transcript

1. Design System com Stencil.js
2. Jonathan Cruz Rocha jonathanc@take.net in/joohncruz joohncruz @
3. Design System...
4. É um conjunto de padrões pré-estabelecidos que serve de comunicação para as várias pessoas que trabalham com o produto. O que é um Design System?
5. • Eficiência: Consistência da plataforma • Consistência: padronagem de elementos • Escala: Construção e entrega mais rapidamente Por que criar um Design System?
10. Criando nosso Design System
12. uni tuni te? • Curva de aprendizado (alta, média ou baixa) • Flexibilidade para testes • Comunidade • Facilidade de uso nos projetos blip • Browsers compatíveis (browser e versão) • Tempo de desenvolvimento (dias, horas ou minutos) • Tamanho do bundle final (em KB)
13. https://www.webcomponents.org/
14. https://www.chromestatus.com/metrics/feature/timeline/popularity/1689
15. https://custom-elements-everywhere.com/
16. https://custom-elements-everywhere.com/
17. https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho
18. https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho
20. É uma biblioteca criada pela equipe do Ionic, voltada para criação de componentes, com intuito de diminuir o retrabalho pelo atualizações dos frameworks. O que é Stencil.js?
21. O que o Stencil.js oferece? • Virtual DOM • Reactive data-binding • TypeScript • JSX • Testable • Documented • Styleable • State
22. • @Component() • @Prop() • @State() • @Watch() • @Element() • @Method() • @Event() • @Listen() https://stenciljs.com/docs/decorators Tiny API - Decorators
24. • connectedCallback() • disconnectedCallback() • componentWillLoad() • componentDidLoad() • componentWillRender() • componentDidRender() • componentWillUpdate() • componentDidUpdate() https://stenciljs.com/docs/component-lifecycle Lifecycle Methods
25. E a comunidade do Stencil.js? • https://stenciljs.com/resources • https://stenciljs.com/ • https://twitter.com/stenciljs • https://stencil-worldwide.herokuapp.com/ • https://medium.com/stencil-tricks
27. BLIP-DS Design System
28. https://github.com/takenet/blip-ds
29. https://takenet.github.io/blip-ds/
30. https://www.npmjs.com/package/blip-ds
31. O Blip-DS já teve testes realizados nos FS: React, AngularJS, VueJS e Angular+ Como o Blip-DS integra com os outros FS? https://github.com/takenet/blip-ds
32. O que usamos no DS? • Stencil.js • Storybook • SASS • JEST? • GH Pages • GH Actions • Stencil Style Guide
33. GOTO CODE
34. DÚVIDAS?