Por que usar Deno Fresh como framework web?
Tags: deno, typescript, fresh
Published: 2022-10-10 17:55:33

O [**Fresh**](https://fresh.deno.dev/) foi [lançado oficialmente](https://deno.com/blog/fresh-is-stable) 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](https://user-images.githubusercontent.com/18706156/194725779-64e0770f-0a0f-464a-ba85-e3f81b834c4e.png "")

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](https://remix.run/ "https://remix.run/"), 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](https://nextjs.org/ "https://nextjs.org/"). É interessante que o Fresh traz de volta um modelo de desenvolvimento comum nos anos 2000 com [PHP ](https://www.php.net/ "https://www.php.net/")e [Ruby On Rails](https://rubyonrails.org/ "https://rubyonrails.org/"), 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](https://www.youtube.com/watch?v=4boXExbbGCk) 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](#deno)
* [Preact](#preact)
* [Twind](#twind)
* [Deno Deploy](#deno-deploy)

## **Deno**

O [Deno](https://deno.land/) é um *runtime* (ambiente de execução) para [Typescript](https://www.typescriptlang.org/) 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](https://en.wikipedia.org/wiki/Ryan_Dahl). Uma das *talks* mais emblemáticas de Ryan é [10 coisas que eu me arrependo sobre Node.js](https://www.youtube.com/watch?v=M3BM9TB-8yA), 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](https://deno.land/manual/runtime/web_platform_apis) sempre que possível.
* Os *imports* de bibliotecas são feitos por URL, sem a necessidade de um gerenciador de pacotes como o [NPM](https://www.npmjs.com/).
* 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](https://deno.com/blog/changes#the-fastest-javascript-runtime).

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](https://www.youtube.com/watch?v=F0G9lZ7gecE) explica bem brevemente o Deno. Ressalto que alguns pontos já foram melhorados, como o [suporte a módulos que estão no NPM](https://deno.com/blog/changes).

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](https://preactjs.com/) 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](https://reactjs.org/) 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](https://preactjs.com/guide/v10/differences-to-react) 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](https://preactjs.com/guide/v10/switching-to-preact/).

Recentemente contribui com o projeto [Meu Santinho](https://github.com/Meu-Santinho/meu-santinho/blob/main/components), 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](https://preactjs.com/guide/v10/differences-to-react).

## **Twind**

O [Twind](https://twind.dev/) é a solução padrão para estilização de componentes (CSS) no Fresh. O nome que lembra o [TailwindCSS](https://tailwindcss.com/) 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](https://deno.com/blog/fresh-1.1) 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](https://github.com/tw-in-js/vscode-twind-intellisense).

## **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**](https://deno.com/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](https://deno.com/blog/the-future-of-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](https://user-images.githubusercontent.com/18706156/194727515-78311e6b-c060-47ac-8130-07b4e1f2ca29.png)

Você pode testar o Deno Deploy a partir do seu navegador criando [playgrounds](https://deno.com/deploy/docs/playgrounds#creating-a-playground).

## **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**](https://youtu.be/qCX8rw4qOSA?t=1025) é 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](https://deno.com/blog/v1.25#new-experimental-http-server-api) que traz ainda mais melhorias de performance.

![f9038d2d-6dd6-4c83-b8e1-57a0ce66d7f3](https://user-images.githubusercontent.com/18706156/194926137-3ce741ee-30a5-4b7d-a90b-83687f0975b2.png)

## 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](https://github.com/denoland/fresh) e ingressar na [comunidade do Deno no Discord](https://discord.com/invite/deno), especialmente no canal *\#fresh*.