Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Um ano depois: os aprendizados e impactos de um...

fernahh
November 30, 2019

Um ano depois: os aprendizados e impactos de um Design System

Conceitualmente já ouvimos muito sobre Design System. Mas na prática, como ele funciona? Como montar um time? Como medir resultados? Como gerir? Perguntas como essas serão respondidas através da experiência de um ano de Design System em uma empresa com mais de 100 desenvolvedores. Irei mostrar os impactos que essa abordagem trouxe no desenvolvimento de uma aplicação web, no design, concepção de produto, back-end e front-end.

fernahh

November 30, 2019
Tweet

More Decks by fernahh

Other Decks in Design

Transcript

  1. Organismos: componentes complexos que podem ser composto por átomos e/ou

    grupos de moléculas e outros organismos. Exemplo: header com logo, menu, search form. Atomic Design.
  2. Templates: “page-levels objects” que colocam componentes em um layout e

    modelam a estrutura do conteúdo. Atomic Design.
  3. Pages: instâncias específicas de templates que mostram a aparência de

    uma interface com conteúdo real. Atomic Design.
  4. Redundância Trata-se da repetição inútil e desnecessária de algum termo

    ou ideia. https://www.dicionarioinformal.com.br/redund%C3%A2ncia/
  5. “O que o torna algo em um componente é o

    encapsulamento de seu comportamento, seu visual e qualquer outro código ou configuração em algo que é facilmente orquestrado dentro de um sistema maior”. Derick Bailey
  6. Nível 0: caos. - Não há estruturas HTML padronizadas que

    podem ser replicadas. - Não há classes CSS pré definidas que funcionam em conjunto com aquelas estruturas HTML padronizadas. - Não há encapsulamento de marcação, lógica e estilo. Modelo de Maturidade de Componentes.
  7. Nível 0: caos. (efeitos colaterais) - CSS desnecessário. - Scripts

    desnecessários. - Zero reuso. - Mudanças muito caras. Modelo de Maturidade de Componentes.
  8. Nível 1: CSS Components. - Estruturas HTML padronizadas. - Classes

    CSS pré definidas. - Não há encapsulamento de marcação, lógica e estilo. Modelo de Maturidade de Componentes.
  9. Nível 1: CSS Components. (efeitos colaterais) - Menos CSS escrito.

    - Marcação desnecessária. - Scripts desnecessários. - Mudanças caras. Modelo de Maturidade de Componentes.
  10. Nível 2: Custom Elements. - Estruturas HTML padronizadas. - Classes

    CSS pré definidas. - Marcação, lógica e estilo encapsulados. Modelo de Maturidade de Componentes.
  11. Nível 2: Encapsulamento. (efeitos colaterais) - Cada componente torna-se a

    única autoridade sobre uma única responsabilidade do sistema. - Tudo se torna reutilizável. - Mudanças são baratas. Modelo de Maturidade de Componentes.
  12. “Um Design System é uma ferramenta para empoderamento, não uma

    arma para controlar o design.” Matt Bond
  13. uma vez que o time entende que não é uma

    limitação e sim colaboração, torna-se necessário e uma nova forma de trabalhar.
  14. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack
  15. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack
  16. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack - TypeScript
  17. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack - TypeScript - TS Jest
  18. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack - TypeScript - TS Jest - Styled Components
  19. - npm - React - React Router - Jest -

    Enzyme - ESLint - webpack - TypeScript - TS Jest - Styled Components - Jest Styled Components
  20. cada ferramenta a mais no projeto é um ponto de

    fricção para contribuições.
  21. Open-Closed Principle Entidades de software devem estar abertas para extensão,

    mas fechadas para modificação; isto é, essa entidade pode permitir que seu comportamento seja estendido sem modificar seu código-fonte.
  22. Uma garrafa aceita uma infinidade de líquidos diferentes em seu

    interior sem precisar alterá-la. Open-Closed Principle.
  23. it('should toggles the state of show', () => { const

    testMessage = 'Test Message' const wrapper = shallow( <HiddenMessage>{testMessage}</HiddenMessage> ) wrapper.instance().toggle() wrapper.update() expect(wrapper.state().show).toBe(true) })
  24. it('should toggles the state of show', () => { const

    testMessage = 'Test Message' const wrapper = shallow( <HiddenMessage>{testMessage}</HiddenMessage> ) wrapper.instance().toggle() wrapper.update() expect(wrapper.state().show).toBe(true) })
  25. it('should toggles the state of show', () => { const

    testMessage = 'Test Message' const wrapper = shallow( <HiddenMessage>{testMessage}</HiddenMessage> ) wrapper.instance().toggle() wrapper.update() expect(wrapper.state().show).toBe(true) })
  26. it('should toggles the state of show', () => { const

    testMessage = 'Test Message' const wrapper = shallow( <HiddenMessage>{testMessage}</HiddenMessage> ) wrapper.instance().toggle() wrapper.update() expect(wrapper.state().show).toBe(true) })
  27. “O usuário não se importa nem um pouco com o

    que as coisas chamam.” Kent C. Dodds
  28. it('shows the children when the checkbox is checked', () =>

    { const testMessage = 'Test Message' const { getByLabelText, getByText } = render( <HiddenMessage>{testMessage}</HiddenMessage> ) fireEvent.click(getByLabelText(/show/i)) expect(getByText(testMessage)).toBeInTheDocument() })
  29. it('shows the children when the checkbox is checked', () =>

    { const testMessage = 'Test Message' const { getByLabelText, getByText } = render( <HiddenMessage>{testMessage}</HiddenMessage> ) fireEvent.click(getByLabelText(/show/i)) expect(getByText(testMessage)).toBeInTheDocument() })
  30. it('shows the children when the checkbox is checked', () =>

    { const testMessage = 'Test Message' const { getByLabelText, getByText } = render( <HiddenMessage>{testMessage}</HiddenMessage> ) fireEvent.click(getByLabelText(/show/i)) expect(getByText(testMessage)).toBeInTheDocument() })
  31. it('shows the children when the checkbox is checked', () =>

    { const testMessage = 'Test Message' const { getByLabelText, getByText } = render( <HiddenMessage>{testMessage}</HiddenMessage> ) fireEvent.click(getByLabelText(/show/i)) expect(getByText(testMessage)).toBeInTheDocument() })
  32. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time.
  33. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time. 3. Entenda o nível de maturidade dos seus componentes.
  34. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time. 3. Entenda o nível de maturidade dos seus componentes. 4. Mantenha-se em contato constante com os times de produto.
  35. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time. 3. Entenda o nível de maturidade dos seus componentes. 4. Mantenha-se em contato constante com os times de produto. 5. Mantenha-se simples.
  36. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time. 3. Entenda o nível de maturidade dos seus componentes. 4. Mantenha-se em contato constante com os times de produto. 5. Mantenha-se simples. 6. Aplique princípios de desenvolvimento de software.
  37. 1. Os objetivos dos times de produto não incluirão entrega

    de componentes. 2. Defina o que é um componente na visão do time. 3. Entenda o nível de maturidade dos seus componentes. 4. Mantenha-se em contato constante com os times de produto. 5. Mantenha-se simples. 6. Aplique princípios de desenvolvimento de software. 7. Mantenha uma boa cobertura de testes.