O documento discute a metodologia de Design Atômico para criar interfaces de maneira hierárquica e reutilizável, dividida em cinco estágios: átomos, moléculas, organismos, templates e páginas. Também apresenta ferramentas como Storybook para desenvolvimento de componentes, Appium para automação de testes mobile e React Native Testing Library para testes em React Native.

1. 1
Arquitetura
Atômica
Automação com Atomic Design

2. Willian Ribeiro Angelo (movibe)
Arquiteto Mobile na Opah It
Clientes: Livelo, BS2, Grupo Eldora, Itau,
Carrefour, Banco GM, Belo, Grupo Revelação,
Bonde do Tigrão, Filme os Mercenários, Biografia
Rick Martin, Boopent, Inovamind
Design: Figma, Storybook, Sketch
Front: NextJS, Gatsby, WordPress
Linguagens: TypeScript, JS, Python, Ruby
Frameworks: React, Angular, jQuery
Mobile: React Native, Expo,
Backend: Hasura, NodeJS, PHP
Banco de dados: Postgress, MongoDB, MySQL
Automação: Appium, Cypress e Detox
2

3. Necessidade
O verdadeiro propósito
3

4. Necessidade
Para que a automação conseguisse ser mais consistente, precisávamos de
uma forma mais robusta para atingir maior produtividade com métodos mais
modernos.
Nossa meta foi de atingir excelência nos seguintes pontos:
● Organização
● Documentação
● Reutilização
● Simulação visual
● Automação
● Contratos (interfaces)
● Testes unitários
4

5. Atomic Design
Um conceito diferente
5

6. O que é?
O Atomic Design é uma metodologia desenvolvida por Brad Frost para a
criação utilizando conceitos químicos.
Esse conceito é composto por cinco estágios para criar interfaces de maneira
deliberada e hierárquica.
Os cinco estágios do Atomic Design são: átomos, moléculas, organismos,
modelos e páginas.
6

7. Não estamos projetando páginas,
estamos projetando sistemas de
componentes.
Stephen Hay - Desinger Holandês
7

8. 8

9. Tokens
São a paleta de cores, fontes e
tamanhos, definidos e separados em
forma de temas.
9

10. Átomo
São os elementos de base para todo o projeto, por
exemplo: Texto, Imagem, Ícone, Botão
10

11. Molécula
São grupos de átomos e outras moléculas para
construção de componentes menos complexos.
11

12. Organismo
São grupos de átomos e moléculas, normalmente
usados em lista ou componentes mais complexos.
12

13. Template
São grupos de átomos, moléculas e organismos para
construção de uma tela de exemplo, com simulações de
quando ela está carregando, quando está completa e até
mesmo quando acontece um erro.
13

14. Página
É a tela do aplicativo com a aplicação do template e conexão em
serviços, fonte de dados e lógicas. Aqui é a aplicação dos
componentes atômicos em modo real de produção.
14

15. 15

16. Ferramentas
16

17. 17

18. 18

19. Storybook8#
19

20. 20

21. O Storybook é uma ferramenta de código aberto para o desenvolvimento de
componentes da interface do usuário isolados para React, Vue e Angular. Torna a
criação de UI organizada e eficiente.
21

22. 22

23. O Appium é uma ferramenta de código aberto, multi-plataforma para automação
de testes de aplicações nativas, híbridas e com suporte a simuladores e execução
em aparelhos reais para plataformas iOS e Android.
Com ela é possível automatizar testes mobile independente da linguagem de
programação utilizada. Podemos implementar nossos scripts com Ruby, Java,
Node.js, PHP, C#, Clojure e Perl.
23

24. 24

25. 25

26. 26

27. 27

28. 28

29. React Native Testing Library é uma biblioteca de testes para React Native que
não é executado em um ambiente de navegador, as consultas principais são
implementadas de forma independente, ao contrário de outras soluções para
teste.
29

30. 30

31. Fluxo de trabalho
Para que o aplicativo consiga crescer constante, precisávamos de uma forma
mais robusta para atingir maior produtividade com métodos mais modernos.
Nossa meta era atingir excelência nos seguintes pontos:
31

32. Obrigado!
32