Reutilizando componentes com React

Palestra ministrada para pessoas desenvolvedoras da ModalGR contando sobre nosso caso de uso dentro da HexagonPro e seus benefícios.

Transcript

1. Reutilizando componentes React Escreva uma vez, use em todos os lugares
2. Hello, world. Guilherme Aguiar Desenvolvedor front end Squad leader @ HexagonPro Tio babão e pai de plantas ✉ guilherme.aguiar@hexagon.pro linkedin.com/in/guilherme-aguiar-dev 2
3. A tropa! 3
4. Front end HX Barbara Pereira Beatriz Massola Jackeline Fidêncio Julia Lopes Renan Andrade Thaina Matias Victor Oliveira 4
5. Vamos falar de números? ▌ Sistema em múltiplos terminais ▌ 10+ módulos ▌ 40+ desenvolvedores no projeto ▌ 306.545+ linhas de código ▌ 150+ litros de café consumidos 5
6. 10 Módulos ▌ Consistência visual entre componentes ▌ Garantir que todas as pessoas desenvolvedoras consigam dar manutenção em todos os módulos ▌ Ter uma forma rápida de distribuir novos componentes 6
7. 20+ desenvolvedores no projeto ▌ O/a dev que está em no Granéis hoje, amanhã pode estar alocado/a no Agendamento ▌ O onboarding de novas pessoas desenvolvedoras precisa ter o mínimo de fricção ▌ As APIs de components precisam de uma previsibilidade 7
8. E agora? Como vamos manter isso? 8
9. Design baseado em restrições Parte do processo de desenvolvimento front end corporativo é garantir que o usuário não seja induzido a erros e consiga se sentir familiarizado com as interfaces gráficas (telas) de um sistema. Com restrições quanto ao uso de elementos visuais no projeto, esse desafio é lidado durante a fase de desenvolvimento, além de otimizar toda a equipe de desenvolvimento, já que as ferramentas estão pré- estabelecidas. 9
10. Ótima ideia! (Mas como?) 10
11. Design System Um design system é um conjunto de padrões do projeto, documentações e princípios e vai além do código. Nele, são definidos a forma como um produto se identifica pro mundo. Entre esses parâmetros, temos desde os mais técnicos, como a definição de uma paleta de cores, tipografia, régua de espaçamento até parâmetros como palavras a serem usadas e evitadas em e-mails e páginas que tenham interação com o público 11
12. Desenvolva, Compartilhe, Reutilize Como um design system é algo de crescimento orgânico, na HexagonPro optamos por iniciar pelo compartilhamento de regras visuais no projeto. 12
13. Figma O Figma é uma ferramenta de prototipagem muito utilizada nesse processo, pois permite que os desenvolvedores acessem de qualquer lugar um ambiente com todos os componentes visuais do projeto, desenvolvidas pelo time de design em tempo real. Também permite que o time de vendas consiga ter 100% do tempo um protótipo navegável do projeto, o que se torna prático em reuniões com o cliente ou negociações. Com o Figma, temos a poucos cliques de distância todas as cores usadas no projeto, distancias entre elementos, variantes de tema, entre outros recursos. 13
15. E no código? 15
16. styled-system O styled-system é parte do ecossistema da biblioteca de React styled-components. Ele permite que seja criado um arquivo de configuração com todas as regras pré- estabelecidas pelo time de design na forma de um tema. Caso o projeto passe por uma mudança de identidade visual, por demanda do cliente ou algum outro motivo, basta alterar esse arquivo e as mudanças refletem em todo o projeto, reduzindo a dor de cabeça e as chances de erro humano 16
17. tailwindcss O tailwindcss é uma forma alternativa e recentemente tem sido cada vez mais adotada pela comunidade para executar a mesma função. Também possui um arquivo de configuração de tema, porém ao invés de se utilizar de APIs especificas do react, compila ao final do processo um arquivo .css com todas as regras visuais para serem utilizadas por qualquer ferramenta que seja capaz de processar html+css e usar em formato de classes. 17
18. E assim, a biblioteca toma forma Nesse ponto, temos definidos: • Design tokens, que são todas as unidades dessas regras visuais (cores, tamanhos, fontes); • Como eles serão executados no projeto, por meio do tema do styled- system/tailwindcss e podemos pensar na sua distribuição para uso entre a equipe toda. Para isso, criamos um projeto para a biblioteca, usando nodejs + rollup.js para transpilar os arquivos de forma a diminuir o tamanho final do pacote, podendo ser publicado no NPM, Gitlab Package Registry e afins. 18
19. Hora do Código Vamos ver como isso funciona na prática? </> 19
20. Resultados Adotar uma biblioteca de componente foi uma ação que permitiu acelerar o desenvolvimento dos módulos, uma vez que pudemos focar em regras de negócios e componentes mais complexos, enquanto a biblioteca fornecia todas as ferramentas básicas para criarmos as telas que precisávamos. Outro ponto é que por se tratar de uma biblioteca colaborativa, caso um componente novo estiver sendo usado em mais de um módulo, ele é adicionado à biblioteca, e todos que precisarem usar só precisam fazer import para isso 20
21. Obrigado! 21
22. Links de Referência Entendendo Design Systems – UX Collective PO UI - Design System open-source da TOTVS Carbon - Design System da IBM Alta - Design System da Oracle Atlassian Design Design System da Audi Figma Styled System TailwindCSS Rollup.js 22