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.
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:
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.
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)