DEV Community

Lucis
Lucis

Posted on

3

Por que usar Deno Fresh como framework web?

O Fresh foi lançado oficialmente há pouco tempo e se apresenta como uma excelente alternativa para criação de aplicações web de alta performance, ideal para casos como ecommerce e landing pages. Nesse post pretendo comentar sobre suas características e como ele se posiciona quando comparado a outras tecnologias.

Deno - The next-gen web framework

Sendo um framework web completo, o Fresh oferece Server-Side Rendering por padrão na Edge e foca em simplicidade na experiência de desenvolvimento. Similar ao Remix, as APIs da Web são utilizadas sempre que possível (ex: uso de HTML Forms ao invés de <input value={state} onChange={(e) => setState(e.target.value) ) e o roteamento é baseado em arquivos – também similar ao Next.js. É interessante que o Fresh traz de volta um modelo de desenvolvimento comum nos anos 2000 com PHP e Ruby On Rails, agora com a evolução de ter apenas uma linguagem para browser e servidor e também com a facilidade do JSX para a criação de componentes.

🎥 O vídeo a fresh new web framework is out do canal Fireship explica em ~3min alguns detalhes da arquitetura utilizada.

O diferencial do Fresh ocorre pelas tecnologias escolhidas, e entender cada uma delas é importante para concluir como o Fresh se propõe ser o framework da próxima geração! As tecnologias que irei comentar aqui são:

Deno

O Deno é um runtime (ambiente de execução) para Typescript e Javascript, similar ao Node.js. Não é coincidência que o Deno tem as mesmas letras de Node: ambos foram criados pela mesma pessoa, Ryan Dahl. Uma das talks mais emblemáticas de Ryan é 10 coisas que eu me arrependo sobre Node.js, onde ele descreve problemas já conhecidos pela comunidade e detalha sua proposta para o Deno.

Os pontos que mais se destacam do Deno são simplicidade e performance, focando em uma experiência de desenvolvimento melhorada em relação ao Node.js. Algumas características do Deno são:

  • Uso das APIs da Web sempre que possível.
  • Os imports de bibliotecas são feitos por URL, sem a necessidade de um gerenciador de pacotes como o NPM.
  • Suporte a Typescript por padrão, sem a necessidade de configuração.
  • Utiliza Rust, ao invés de C++ do Node, para o código interno do runtime.
  • Otimizado para performance. O objetivo do Deno é sempre ser o runtime mais rápido para Typescript/Javascript.

Esses pontos fazem com que boa parte dos projetos que usam Deno não precisem de build, o que se torna uma vantagem para o processo de desenvolvimento.

🎥 O vídeo deno in 100 seconds explica bem brevemente o Deno. Ressalto que alguns pontos já foram melhorados, como o suporte a módulos que estão no NPM.

Eu acredito que o Deno possibilita um salto em experiência de desenvolvimento comparado ao Node.js, especialmente quando notamos o tempo que é gasto em problemas de build e em npm install, algo que já é considerado "normal" na vida de um dev.

Preact

A escolha do Preact como biblioteca para UI é fundamental para que o Fresh entregue o salto de performance que propõe, e é importante entender os motivos dessa escolha.

É indiscutível a popularidade do React.js na comunidade e no mercado, e o Preact se destaca por ter as mesmas APIs do React, porém ser muito mais leve e otimizado. Isso foi possível graças a otimizações nos algoritmos internos e também por ter aprendido com as limitações do React ao longo dos anos. O código principal do Preact pesa apenas 3kb, diminuindo o tamanho do bundle de Javascript que uma página precisa pra ser interativa no navegador.

Preact vs React

Sabendo que o Preact traz benefícios claros em relação a performance, fica a pergunta: o que preciso abrir mão em relação ao React para usá-lo? A resposta é: quase nada! 😁

Essa página lista as diferenças entre as duas bibliotecas e, pessoalmente, não senti nenhuma limitação criando meus apps em Preact, onde uso Functional Components e Hooks. As bibliotecas externas que não funcionam automaticamente podem ser habilitadas utilizando o pacote preact/compat.

Recentemente contribui com o projeto Meu Santinho, que usa o Fresh. Você pode verificar nos arquivos de componentes que tudo é familiar para quem já desenvolveu componentes React. Todas as funcionalidades que você já conhece do React funcionam no Preact.

React Preact
JSX support
useState/useEffect
Event Listeners
Context API

Para saber mais detalhes das diferenças entre os dois, acesse Differences to React.

Twind

O Twind é a solução padrão para estilização de componentes (CSS) no Fresh. O nome que lembra o TailwindCSS não é coincidência: o Twind é o Tailwind otimizado para performance, especialmente para dispensar a necessidade de build. O Tailwind/Twind são bibliotecas de estilização CSS baseada em tokens de classe (ex: text-center, flex, justify-center...) que facilitam a criação de componentes de UI.

Recentemente, o Fresh anunciou o plugin para Twind que tornou a experiência de desenvolvimento mais simples.

O suporte a outros modelos de estilização como CSS modules é possível, porém não é o foco do projeto no momento. Pessoalmente, o Twind oferece uma ótima experiência para os desenvolvedores, especialmente usando a extensão do Twind para VSCode.

Deno Deploy

A cereja do bolo do Fresh não está nas soluções acima, mas no último passo do processo de desenvolvimento: colocar a aplicação online. O Deno Deploy é, de longe, o que mais me impressionou nessa stack: em 3s, um app Fresh é deployado para 34 regiões ao redor do mundo! Isso possibilita que o código execute perto dos usuários, resultando em uma latência impossível com frameworks tradicionais.

O artigo The Future of the Web is on the Edge explica muito bem as vantagens que mencionei aqui e recomendo a leitura.

A rapidez do deploy ocorre principalmente pela escolha de não existir build, e isso torna a geração de Deploy Previews a partir de commits no Github praticamente instantânea:

Deploys no Deno Deploy do app Meu Santinho

Você pode testar o Deno Deploy a partir do seu navegador criando playgrounds.

Comparando com outras soluções

Outros frameworks dividem espaço com o Fresh e também buscam otimizações de performance para aplicações Web, mas a vantagem competitiva ao usar o Deno se torna clara nos benchmarks. Por exemplo, no vídeo Bun vs Node: Round 2 (feat. Astro, Deno, Fresh and more) do canal Jack Herrington é possível verifica a forte diferença nas métricas requisições por segundo e latência ao usar o Fresh.

Vale ressaltar, no tempo que o vídeo foi publicado, o Fresh ainda não tinha sido integrado com o novo servidor HTTP do Deno que traz ainda mais melhorias de performance.

f9038d2d-6dd6-4c83-b8e1-57a0ce66d7f3

Conclusão

Tendo já estudado e desenvolvido apps com outras soluções, o Fresh me agrada por trazer de volta bons modelos de desenvolvimento, mas utilizando tecnologias modernas e permitindo uso de bibliotecas React. O fluxo de criar aplicações fica mais simples, e sobra mais tempo pra focar no que realmente importa: o produto.

Caso tenha se interessado, recomendo seguir os passos em https://fresh.deno.dev/ e criar um projeto usando o Fresh. Também recomendo verificar o repositório no Github e ingressar na comunidade do Deno no Discord, especialmente no canal #fresh.

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More