Livelo - Arquitetura com Atomic Design
0 gostou120 visualizações
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.
Livelo - Arquitetura 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
- 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