#132 - Como construir um framework JavaScript moderno do zero


Hey! 👋

Já pensou em palestrar na Codecon Summit? Bora compartilhar seus conhecimentos com a comunidade dev, fazer networking de primeira e ser colega das maiores referências da área. 😉

O tema da próxima edição será “The Hacker Way”. Vamos mostrar os fundamentos da programação, como as coisas funcionam. Bora palestrar?

Para participar é só preencher o formulário disponível no site. Na sequência, a nossa equipe irá analisar e selecionar os conteúdos.

Codecon Summit
🗓️ 18 e 19 de julho de 2025 em Curitiba.
👉 Inscrições Call4papers: https://tally.so/r/woKBrX

Até mais,
Gabriel Nunes (@nunesgabriel)

Como construir um framework JavaScript moderno do zero

Tá perdido no mundo dos frameworks JavaScript modernos? Relaxa, bora construir um do zero e aprender na prática! Ao criar seu próprio framework, você vai entender como esses pós-React (tipo Lit, Solid, Svelte e Vue) funcionam. Spoiler: todos eles se inspiraram no React, mas evoluíram pra algo mais ágil e inteligente.

O que esses frameworks têm em comum?

  • Reatividade: eles atualizam só o que precisa no DOM, sem aquele "explode tudo e começa de novo" do React
  • Modelos clonados: pra renderização de DOM
  • APIs modernas: coisas como Proxye templates marcados deixam a vida muito mais fácil

Então, para criar nossa própria estrutura, é preciso fazer o mínimo para implementar essas ideias. Logo, o passo a passo é:

  • Etapa 1: construir reatividade - Reatividade é a base sobre a qual construiremos o resto do framework. Reatividade definirá como o estado é gerenciado e como o DOM é atualizado quando o estado muda.
  • Etapa 2: renderização DOM - Agora temos um sistema de reatividade funcional, mas ele é essencialmente "sem cabeça". Ele pode rastrear mudanças e calcular efeitos, mas é só isso. Em algum momento, porém, nossa estrutura JavaScript precisa realmente renderizar algum DOM na tela. (Esse é o ponto principal.)
  • Etapa 3: combinando reatividade e renderização DOM - Como já temos um createEffect do sistema de renderização acima, agora podemos combinar os dois para atualizar o DOM.

Leia o texto completo pra ver todos os detalhes do passo a passo!

Moral da história? Construir sua própria parada é a melhor forma de entender como as coisas funcionam por baixo dos panos.

Um recado do patrocinador 📣

Por dentro da Engenharia do Asaas: um time que voa alto!

Com mais de 90 profissionais organizados em squads multidisciplinares, a colaboração é uma das características fortes desse time, que valoriza o aprendizado e crescimento pessoal e profissional, com feedbacks regulares, plano de desenvolvimento, Tech Talks e cultura de code review.

Para quem já acompanha a news, sabe que o Asaas está crescendo na velocidade de um foguete! A plataforma oferece soluções financeiras voltadas para PMEs, facilitando a gestão de cobranças, pagamentos e controle financeiro. Se você se identifica com a forma que essa super fintech trabalha e busca um ambiente de inovação, dinamismo e crescimento, aproveite as oportunidades abertas na área de Engenharia de Software e candidate-se!

Confira mais vagas aqui!

🚀 produtividade

Tem muitos projetos paralelos? Esse vídeo promete te ensinar a finalizar todos eles. Será que vai funcionar? Com a ajuda do essencialismo você vai aprender a alocar sua energia de acordo com o tempo disponível, e a superar o momento mais difícil de um projeto, que é geralmente quando a gente desiste, né?

📜 documentação

Usar capturas de tela na documentação é um pequeno dilema. Tem quem ama e acha super útil, e tem quem odeie por causa do trabalho que dá para manter atualizado e dos problemas de acessibilidade. Veja algumas dicas pra usar capturas de tela sem erro:

  • Só coloque quando for realmente útil
  • Torne acessível com texto alternativo e imagens compactadas
  • Utilize capturas simplificadas (com partes irrelevantes borradas) para facilitar a manutenção
  • Se possível, automatize o processo de criação de capturas

No fim, o segredo é usar com moderação e estratégia. Capturas de tela são boas aliadas, mas só são bem pensadas e simples de manter.

🪖 Segunda Guerra Mundial

A CIA criou um manual na Segunda Guerra pra agentes infiltrados arruinarem a produtividade de empresas. Agora, imagine um manual assim feito sob medida para CTOs. É possível arruinar uma empresa de tecnologia sem ser descoberto? Venha conhecer esse novo manual!

🌐 web

Webhooks são úteis, mas a falta de padrão entre provedores complica a vida de todo mundo. A proposta do "Standard Webhooks" é criar diretrizes universais, simplificando integrações, aumentando a segurança e liberando espaço para inovação.

<HTML>

Você sabia que, por pura gambiarra, já usamos tabelas pra fazer layout e sublinhados pra enganar o Internet Explorer? Pois é! Esses hacks eram necessários porque os navegadores não seguiam padrões, e a criatividade salvava o dia. Veja 10 truques bizarros de HTML que funcionam (mas não deveriam).

<HTML> 2

Conheça a linguagem de programação HTML, uma linguagem baseada em HTML. Com comandos como <data>, <dd>, e <output>, ela te permite fazer operações básicas como somar, subtrair e imprimir resultados. Suporta números, strings, arrays, objetos e até operações lógicas e comparações. Tudo funciona empurrando e retirando valores da "pilha". Para começar, basta incluir o arquivo html.js no seu projeto. É isso: programação com tags, na cara e na coragem!

O nosso querido podcast voltou! A primeira edição do ano saiu na semana passada, com novo formato e novas pessoas fixas apresentando.

Falamos um pouco sobre o "The hacker way", o tema da Codecon Summit deste ano. Escute agora no Spotify.

Tem alguma pergunta? Só responder o e-mail!

R. Dr. João Colin, 1285, Joinville, SC 89204-001
Desinscrever-se · Preferências

code(weekly)

Junte-se à 7.500+ devs e receba e-mails semanais com a melhor curadoria de artigos, repositórios e outros links interessantes da área tech.

Read more from code(weekly)

Hey! 👋 Já faz duas semanas que envio a newsletter na quinta-feira. Nas quartas agora ficou meio corrido pra mim. Portanto, decidi mudar o dia "oficial" da news. A partir da semana que vem vamos enviar a newsletter semanal nas terças-feiras, ok? :) Até mais,Gabriel Nunes (@nunesgabriel) 13 conselhos para devs iniciantes Nem tudo é verdade absoluta: bons escritores não são necessariamente bons programadores. Então, leia tudo com um pé atrás e reflita antes de seguir qualquer conselho cegamente....

Hey! 👋 Já conhece o blog da Codecon? A gente tá publicando uns artigos muito massas por lá! O último foi o “Como se tornar um Engenheiro de Software mais efetivo” com a participação super especial do Elton Minetto. Tamo sempre postando conteúdo novo. Acompanha a gente! Até mais,Gabriel Nunes (@nunesgabriel) As 3 principais lições do livro Philosophy of Software Design Sabe aquela bagunça no código que começa pequena e, de repente, parece um emaranhado de fios soltos? O livro A Philosophy of...

Hey! 👋 ✨ Codecon Universe Um hackathon de ideias inúteis e coisas que ninguém precisa.17 e 18 de maioÁgora Tech Park - Joinville INSCRIÇÕES ABERTAS! ✨ Codecon Summit Um evento ainda melhor e muito mais frio. Leva um casaquinho!18 e 19 de julhoViasoft Experience - Curitiba INSCRIÇÕES ABERTAS! ✨ Datacon Um evento sobre dados e machine learning. Se parecer confuso, é machine learning. Se fizer sentido, é só um gráfico de pizza.6 de setembroFIAP (unidade Lins de Vasconcelos) - São Paulo ✨ Select...