DEV Community

Lucis
Lucis

Posted on

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)