<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: João Vitor Dias</title>
    <description>The latest articles on DEV Community by João Vitor Dias (@joao_aleixo).</description>
    <link>https://dev.to/joao_aleixo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3767139%2F9bfcd2a9-dd18-4a46-895e-9b1608e1020c.jpg</url>
      <title>DEV Community: João Vitor Dias</title>
      <link>https://dev.to/joao_aleixo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/joao_aleixo"/>
    <language>en</language>
    <item>
      <title>Da UI ao Servidor: Minha jornada de React para Node.js</title>
      <dc:creator>João Vitor Dias</dc:creator>
      <pubDate>Wed, 11 Feb 2026 20:22:45 +0000</pubDate>
      <link>https://dev.to/joao_aleixo/da-ui-ao-servidor-minha-jornada-de-react-para-nodejs-3afk</link>
      <guid>https://dev.to/joao_aleixo/da-ui-ao-servidor-minha-jornada-de-react-para-nodejs-3afk</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frejzfufmb07zotrvkra1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frejzfufmb07zotrvkra1.png" alt="Imagem com split azul/esquerda React vs verde/direita Node, seta no meio" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A velocidade com que a &lt;strong&gt;IA&lt;/strong&gt;entrou no nosso dia a dia como dev me trouxe alguns medos. Um deles foi a sensação de que o desenvolvimento frontend poderia estar perto do fim ou, pelo menos, de uma grande transformação. Com isso em mente pensei: por que não aprender mais sobre backend?&lt;br&gt;
A barreira de entrada para Node.js é baixa: mesma linguagem, mesmo paradigma, ecossistema familiar. Foi assim que essa jornada começou.&lt;/p&gt;

&lt;p&gt;A ideia aqui é contar um pouco da minha história e de como decidi me aprofundar em uma nova área por escolha pessoal. Se você está em um momento mais iniciante, talvez consiga aprender com o pouco que vou compartilhar aqui. Espero que sim :)&lt;/p&gt;
&lt;h3&gt;
  
  
  Quem sou eu?
&lt;/h3&gt;

&lt;p&gt;Comecei na área em 2021, como estagiário frontend, e segui nesse caminho pelos quatro anos seguintes até mudar de empresa em busca de novos desafios. Hoje continuo trabalhando principalmente com frontend, com React e Next.js.&lt;/p&gt;

&lt;p&gt;Tenho medo do novo, mas eu gosto de pensar na possibilidade de ser desafiado e poder construir coisas diferentes.  Com essa mentalidade + o assunto do momento , AIs, fez com que eu desse de cara para mais um novo desafio → mergulhar para o backend com Node.js &lt;/p&gt;
&lt;h3&gt;
  
  
  Sair da zona de conforto
&lt;/h3&gt;

&lt;p&gt;Quando falamos de sair da zona de conforto no mundo da programação, e ainda mais com o avanço de novas tecnologias, acaba trazendo muitos benefícios de entender o escopo/ambiente de que você desenvolve.&lt;br&gt;
É muito valioso entender o que o seu par de backend está fazendo, por que certas decisões técnicas estão sendo tomadas e, principalmente, conseguir opinar com confiança. Alguns benefícios de entender o outro lado:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;melhor comunicação com o time de backend&lt;/li&gt;
&lt;li&gt;mais autonomia para criação de features end-to-end&lt;/li&gt;
&lt;li&gt;visão mais completa como o todo&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No meu caso que foi com Node.js a linguagem de programação não foi uma barreira. Inclusive, ela é até um incentivo para que você aprenda. A base, a sintaxe, operadores e semântica praticamente idênticas. O que muda então? Arquitetura, o funcionamento de cada “peça” do mecanismo, performance em consultas ao banco de dados, responsabilidade de cada camada e por aí vai.&lt;/p&gt;
&lt;h3&gt;
  
  
  O que já sabia vs o que precisa aprender?
&lt;/h3&gt;

&lt;p&gt;Como comentei anteriormente, a linguagem foi um ponto positivo. Além disso, algumas bibliotecas já faziam parte da minha rotina, como o uso do zod para validação de schemas. Também já estava acostumado com código assíncrono, async/await e Promises, o que ajudou bastante a não “apanhar” tanto nos fluxos de I/O.&lt;br&gt;
Onde eu realmente precisei estudar mais a fundo foi em:&lt;/p&gt;

&lt;p&gt;Precisei estudar mais afundo sobre as camadas de C*&lt;strong&gt;lean Architeture,&lt;/strong&gt;* aplicar bem o DDD (Domain Drive Design), consultas SQL → integradas com ORM, docker e containerização e logs → que aparenta ser “bobo” mas é muito importante para encontrar bugs/métricas de sistemas &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Camadas da Clean Architecture e como aplicar na prática&lt;/li&gt;
&lt;li&gt;DDD (Domain-Driven Design) no dia a dia&lt;/li&gt;
&lt;li&gt;Consultas SQL integradas com ORM&lt;/li&gt;
&lt;li&gt;Docker e containerização&lt;/li&gt;
&lt;li&gt;Logs bem pensados, que são fundamentais para encontrar bugs e medir o comportamento do sistema&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25vhypmhlqkt4b360zgb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25vhypmhlqkt4b360zgb.png" alt="The clean architeture layers" width="772" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;No início das tasks de backend, usando o Cursor do meu lado, eu tomei um cuidado consciente: não usar a IA só para cuspir o resultado final. Eu trazia o contexto do que estava aprendendo e pedia orientação: onde mexer, por que mexer, passo a passo, boas práticas e alternativas. Confesso que foi com isso que fui modelando e entendendo um pouco mais sobre o funcionamento do backend e não apenas pegar a solução pronta da AI.&lt;/p&gt;
&lt;h3&gt;
  
  
  Como trabalhar com backend me ajudou a ser melhor no front?
&lt;/h3&gt;

&lt;p&gt;No passar das semanas vendo curso de Node.js e já desenvolvendo tarefas de baixa e média complexidade no backend, fui trazendo uma bagagem de melhor organização arquitetural e quando eu desenvolvia alguma tarefa no front eu usava essas referências que tinha no backend.&lt;/p&gt;

&lt;p&gt;No React já temos uma "filosofia" de separar bem a responsabilidade de componentes da árvore, mas acredito que eu pecava em alguns cenários onde tinha muita lógica com UI → separação de responsabilidades dentro dos arquivos/contextos.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Antes:&lt;/strong&gt; tudo misturado no componente&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// ❌ Componente fazendo tudo
function UserProfile() {
  const { data: user, isLoading } = useQuery({
    queryKey: ['user'],
    queryFn: async () =&amp;gt; {
      const res = await fetch('/api/user')
      const data = await res.json()
      return {
        ...data,
        fullName: `${data.firstName} ${data.lastName}`,
        createdAt: new Date(data.createdAt).toLocaleDateString('pt-BR')
      }
    }
  })

  if (isLoading) return &amp;lt;Loading /&amp;gt;
  return &amp;lt;div&amp;gt;Nome: {user.fullName}&amp;lt;/div&amp;gt;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Depois&lt;/strong&gt;: separando como aprendi no backend (services, repositories, formatters)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// services/user.ts - lógica de negócio isolada
export async function getUser(): Promise&amp;lt;User&amp;gt; {
  const response = await api.get('/user')
  return formatUser(response.data)
}

// utils/formatters.ts - transformações reutilizáveis
export function formatUser(data: UserDTO): User {
  return {
    ...data,
    fullName: `${data.firstName} ${data.lastName}`,
    createdAt: new Date(data.createdAt).toLocaleDateString('pt-BR')
  }
}

// hooks/useUser.ts - estado e side-effects
export function useUser() {
  return useQuery({ queryKey: ['user'], queryFn: getUser })
}

// ✅ Componente limpo, só UI
function UserProfile() {
  const { data: user, isLoading } = useUser()
  if (isLoading) return &amp;lt;Spinner /&amp;gt;
  return &amp;lt;div&amp;gt;{user.fullName}&amp;lt;/div&amp;gt;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Além de deixar o componente mais limpo, isso facilitou muito o debugging geral. Quando algo dava problema em produção ou o QA encontrava um bug, eu já conseguia raciocinar melhor:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;É algo no cliente ou no servidor?&lt;/li&gt;
&lt;li&gt;Algum serviço externo falhou?&lt;/li&gt;
&lt;li&gt;Preciso olhar os logs no Datadog ou a DQL da Rabbit?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ter noção de como o backend funciona reduziu bastante o tempo que eu gasto “caçando” o problema e me trouxe propriedade pois eu já sabia o contexto de client e server.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conectando mundos
&lt;/h3&gt;

&lt;p&gt;Frontend não é apenas “pintar” cor de botão e Backend não é apenas devolver um json. Os dois se completam para fazer um sistema que entregue valor ao usuário final. Quando todo o time técnico entende o contexto dos requisitos e o contexto técnico de como funcionam as coisas é um ganho enorme com isso.&lt;/p&gt;

&lt;p&gt;Está valendo muito a pena mergulhar no backend e entender como tudo isso funciona.  Os benefícios vão além de “dominar mais uma área”, é uma forma de se remodelar como profissional, se capacitar e enxergar problemas com outra lente. &lt;/p&gt;

&lt;p&gt;Com o avanço da inteligência artificial, acredito que profissionais com visão mais completa e generalista vão ter ainda mais espaço.&lt;br&gt;
É aí que esse tipo de jornada → sair da UI e encostar no servidor, começa a fazer muito sentido.&lt;/p&gt;

&lt;p&gt;Você já pensou em fazer essa jornada? Sair da UI e ir para o lado do Server ou vice-versa?&lt;/p&gt;

</description>
      <category>react</category>
      <category>frontend</category>
      <category>backend</category>
      <category>fullstack</category>
    </item>
  </channel>
</rss>
