Atomic Design na prática com React em um projeto real da RD StationLink externo, abre em uma nova aba
Um caso real onde utilizamos o modelo mental do Atomic Design para construir componentes React.
Como podemos utilizar o Atomic Design para administrar a complexidade, favorecendo a legibilidade, escalabilidade e flexibilidade do código.
Na minha última publicação sobre como fizemos a descoberta dos domínios (DDD) do RD Station Marketing através do EventStorming, eu mencionei como a decisão de utilizar Outcomes foi crucial para dividir o negócio em domínios.
Em meados de 2020, quando a RD Station ainda se chamava Resultados Digitais, a área de engenharia e produto já possuía aproximadamente 40 times distintos, resultado de um crescimento acelerado.

A mudança é inerente à carreira que escolhemos. Engenharia de software é uma área movida por inovação, e isso significa passar boa parte do tempo aprendendo, questionando o que já sabemos e, muitas vezes, nos sentindo novamente como iniciantes diante de algo pouco familiar.
Este blog é uma das formas que encontrei de organizar meus aprendizados, compartilhar experiências e trocar conhecimento sobre os desafios que encontro pelo caminho.
Com a introdução do hook useContext ficou mais prático de trabalhar com estado global no React, sem a necessidade de usar vários consumers no JSX. Porém, ainda há a necessidade de declarar o Provider dentro JSX, então sem perceber podemos entrar no Provider Hell como este:
Em 2019 escrevi um série de 5 artigos explicando passo a passo como refatorar um código legado em um projeto React:
Code snippets são blocos de códigos dinâmicos e reutilizáveis. Você pode usar extensões que já possuem vários snippets prontos e você pode criar para aqueles seus códigos que você digita repetitivamente.
Já tem alguns anos que adotei o Visual Studio Code como minha IDE principal para desenvolvimento web. Neste artigo vou mostrar como eu o turbinei com plugins e configurações para ser muito mais produtivo.
Criar rotas é uma tarefa bem simples, a maioria dos frameworks já dão suporte nativo, mas com o crescimento do projeto algumas decisões podem dificultar a manutenção. Neste artigo vou dar uma sugestão de como organizar as rotas para facilitar o desenvolvimento de projetos complexos. Os exemplos estarão usando apenas as bibliotecas React e React Router, mas o padrão pode ser usado para qualquer biblioteca de front-end ou até mesmo de back-end. O React Router também possui suporte para rotas estáticas e pode ser usado no Rails, Express, Koa, Ember, Angular, por exemplo.
A missão era simples: enviar uma mensagem não bloqueante de sucesso ou erro em resposta a uma requisição assíncrona. Seria simples se não fosse pelas palavras em negrito, pois me deparei com várias questões de arquitetura do projeto que está em React com Redux, e ao pesquisar a melhor solução eu vi vários artigos em blog inconformados com o problema e dando suas sugestões de como deveria ficar, só que nenhuma dessas soluções me deixou confortável. Então neste artigo eu trago uma alternativa, expondo passo a passo as questões levantadas e as decisões tomadas para implementar essa solução.
Abaixo está minha palestra para o Web Dev Summit 2015, feita utilizando JavaScript e está com código livre no GitHub:
Quem não já se pegou no google procurando por plugins em JQuery? A Unheap tornou esse trabalho mais fácil, criou uma plataforma organizada com diversos plugins de boa qualidade, com opções para todos os gostos.