Fala pessoal, como vocês estão? Espero que bem.

O maior problema que a gente enfrenta quando começa a criar conteúdo, é conciliar a criação de conteúdo com estudos e trabalho. Isso porque estamos, quase que o tempo todo, envolvidos com um ou mais projetos e estudando o que é preciso em cada um deles, quase não sobrando um tempinho pra atualizar o blog. Mas como eu gosto bastante de escrever os posts e não é por falta de conteúdo que não escrevo (tenho visto bastante coisa nos últimos meses), resolvi tentar juntar o útil ao agradável e lançar, toda sexta, um post comentando sobre coisas legais que eu andei estudando, lendo ou fazendo. Espero que gostem!

O que andei estudando?

Storybook

Comecei a fazer o curso React Avançado do Willian Justen e, uma das primeiras coisas que me chamou a atenção logo de cara foram as tecnologias que ele ia abordar durante as aulas. Porém, a que eu mais gostei de conhecer (até agora, ainda tô no começo do curso) foi o Storybook.

O Storybook, segundo o próprio site diz, é uma ferramenta que te possibilita criar componentes UI de forma totalmente isolada, organizada e eficiente. Ele funciona, basicamente, através de histórias: você desenvolve um componente e cria algumas histórias para descrever diferentes estados dele e, dessa forma, testá-lo em cada um desses cenários, sempre passando dados mockados. Possui integração com React, Vue e Angular.

Conheci relativamente pouco dele ainda, mas como tenho me concentrado bastante em React Native, já parti pra aprender e aplicar direto no native, junto com um design system que tenho estudado e casa muito bem com ele, o atomic design.

Mais informações: https://storybook.js.org/

Atomic Design

Desenvolver interfaces componentizadas nunca é muito simples. Na verdade, é simples, sim. Mas é tão simples, que é igualmente simples de se perder com os componentes, por isso fica complicado.

"O que componentizar?", "Como componentizar?", "Um botão, preciso componentizar ou posso deixar no próprio componente pai?", "E esse input?", são todas questões que a gente precisa responder quase o tempo e, não sei vocês, mas eu não sou muito fã de ir pelo feeling em questões como essas. Por isso, tenho buscado alguns design systems para seguir como orientação nas minhas aplicações e o que eu mais gostei até o momento foi o atomic design.

Lembra das suas aulas de química, onde você aprendeu que a matéria era composta por átomos, que formavam moléculas, que, por sua vez formavam estruturas mais complexas ainda (como células, organelas, etc)? É essa a premissa seguida pelo atomic design.

Dentro dele, basicamente, enxergamos os componentes como átomos, moléculas, organismos, templates (aqui acaba a ciência) e páginas:

• Atom - componentes simples e fundamentais, que não podem ser constituídos de outros componentes. Exemplo: button, label, input, heading (h1, h2, h3, ...), paragraph, etc;
• Molecule - componentes que são formados por dois ou três átomos. Exemplo: um grupo de input (input + label), campo de busca(label + input + button), menu (vários li's), e por aí vai. Se for necessário juntar muitos átomos, talvez seja melhor formar moléculas diferentes que, juntas, virarão um organismo.

• Organism - um agrupamento de moléculas. É onde juntamos vários grupos menores de componentes para formar uma estrutura um pouco mais complexa. Por exemplo:

  • Header: logo (átomo), menu (molécula) e campo de busca (molécula);
  • Article: título principal, sections (molécula, formada por título e parágrafos);
• Template - são componentes a nível de página, onde vários organismos são organizados para estruturar uma página inteira. Por exemplo, uma página de post: header, aside, article e footer, cada um desses sendo um organismo;
• Page - por fim, uma página é uma instância de um template, onde populamos o template com informações reais para, por fim, renderizarmos a página que final.

Pode parecer um pouco confuso ou complicado no começo, porém, fica muito intuitivo uma vez que você entende como classificar um componente, ou como construir uma página pensando a nível de átomos, moléculas e organismos.

Mais informações: https://atomicdesign.bradfrost.com/chapter-2/

O que andei lendo?

14 Hábitos de Desenvolvedores Altamente Produtivos

Recentemente, tenho buscado retomar o hábito da leitura, coisa que perdi há muito tempo (perdi a conta de quantos livros comecei e parei pela metade esse ano), e um livro bem legal que comecei essa semana é o 14 Hábitos de Desenvolvedores Altamente Produtivos, que já ouvi muita gente falando sobre ele. Como o próprio nome (bem claro, por sinal) indica, ele trata de alguns hábitos que podem ajudar a vida do desenvolvedor. São vários hábitos, todos classificados em cinco tipos: aprendizagem, dia-a-dia, carreira, equipe e vida. Ele fala sobre cada hábito, trazendo experiências de vida, uma dica prática para já começar a colocar esse hábito em prática e comentários de vários programadores de diferentes empresas para comentar sobre o que eles acham a respeito do assunto.

É um livro bem legal e vale a pena dar uma olhada.

O que andei fazendo?

Além do dia-a-dia na GOK, trabalhando no aplicativo da Starbem, tenho trabalhado em alguns boilerplates para ajudar na minha produtividade no dia a dia.

A motivação veio, também, com o curso React Avançado, que comentei acima, e busca resolver o seguinte problema: Quantas vezes eu comecei um projeto e, sempre do zero, precisei instalar todas as dependências que eu uso sempre, como eslint, prettier, husky, rotas, pastas e arquivos, etc, além de toda a configuração necessária. Eu sempre perdia, tranquilamente, umas duas horas só para configurar tudo isso, e foi pra evitar esse desperdício de tempo que eu comecei a criar boilerplates para cada tipo de projeto que eu mais faço.

A parte mais legal, aliás, é que esse é um movimento que começou também na GOK: o time de front-end tem se dedicado em criar boilerplates personalizados para cada tipo de projeto criado dentro da empresa, motivado justamente pela mesma ideia que eu comentei ali em cima: evitar desperdícios e, até mesmo, padronizar todos os projetos. Tem sido uma experiência bem bacana pensar sobre o que seria o boilerplate ideal para começar qualquer projeto e tentar alcançá-lo.

Obs.: já tenho, inclusive, integrado o storybook e seguido o esquema de páginas e arquivos do atomic design.

Boilerplate React Native: https://github.com/ramosht/react-native-boilerplate

Boilerplate NextJS: https://github.com/ramosht/boilerplate-nextjs

Então, é isso...

É isso que eu mais estudei e li na última semana. Espero que tenham gostado e se quiserem conversar sobre esses tópicos, compartilhar o que vocês já sabem ou me corrigir sobre alguma coisa, só me dar um toque no LinkedIn, Insta ou Twitter. Estou sempre por ali e vai ser bem legal conversar com vocês.