Fresh, un nuevo y fresco web framework

Así es, justo cuando acabas de aprender otro hook de React, features de Webpack o Rollup, sale esto: ¡Fresh!, pero dale Fresh. En este artículo veremos de que trata paso a paso; vamos a ello.

Antes de comprender qué es Fresh, vamos a ver qué es Deno. Deno es una alternativa a Node.js, este entorno de ejecución fue creado por Ryan Dhal, la misma persona que creo Node, salió en 2018, al no estar satisfecho con el resultado final de Node, Ryan describe que en Node hay cosas irreparables, por ello, se vio en la necesidad de crear Deno, consideraba que habían cosas como el manejo de los paquetes que no le parecían, ¿por qué tener que instalarlo?, ¿por qué no solamente copiar un link y trabajar el runtime con recursos existentes desde Github? Deno resuelve estos problemas importando modulos desde URLs.

Despues de una minima introducción a lo que es Deno, ahora sí, veamos qué es esto de fresh. Fresh es un framework web de la nueva generacion para fullstack developers de Typescript y Javascript. Lo que lo hace especial, es que tiene algunas ventajas bastante innovadoras y muy diferentes a la manera de resolverlo en un proyecto de Node, algunas de estas son:

• No hace builds.
• El renderizado de la página es casi instantáneo.
• Implementa arquitectura de islas "Island based client hydration", para conservar la interactividad.
• No envía javascript innecesario al navegador, lo cual, reduce tiempos de carga.
• No necesita configuración.
• Corre Typescript.

Exploremos un poco el concepto de la arquitectura de islas para entender mejor por qué Fresh hace hace mas rapido el sitio. Al cargar una página completamente con SSR, estamos llenando el sitio de Javascript, lo cual perjudica el rendimiento de los sitios web; por ello, la idea es tratar a los componentes por separado, importando unicamente el Javascript del componente que está siendo usado para conservar la interactividad con el usuario. Otra cosa es que Fresh renderiza los componentes como HTML estático, en vez de hacerlo con javascript, pero ahí entra el concepto de Island based client hydration, imagina una isla de interactividad en un mar estático, dicha isla es renderizada en el navegador del cliente y en el servidor, para ir refrescándola y mantener la interactividad.

La manera de tener estas islas interactivas funcionando es hacer un folder llamado islands en el root del proyecto y meter ahí los componentes (archivos .tsx) que se desean mantener interactivos, pero, si no hay builds, esto significa que el servidor está corriendo directamente el Typescript, eso es correcto, porque Deno Deploy permite ejecutarlo, aunque, lo lleva al navegador del usuario como HTML estático con el mínimo de javascript para hacer al componente funcional. Finalmente, respecto al envío de formularios  e información, puede complicarse un poco el asunto, ya que la tecnología es bastante nueva y habría que investigar acerca de cómo llevar a producción los sitios y sus lógicas con recursos muy nuevos, suele complicar o consumir tiempo...

Para crear un proyecto básico con Fresh, es necesario tener instalado Deno, luego, ejecutar dentro del directorio el siguiente comando:

deno run -A -r https://fresh.deno.dev my-project

Una vez en el directorio del proyecto, para correr el proyecto localmente:

deno task start

Como conclusiones finales y comentario personal, al escribir este artículo me dieron bastantes ganas de probar esta nueva tecnología, pues es moderna, minimalista y prometedora. Sin embargo, hay conceptos en los que hace falta profundizar, como la arquitectura de islas, el mantenimiento de sitios ya en produccion, las librerias que usa Fresh para UI (preact), aprender con mayor profundidad a usar Deno Deploy, entre otras. Al ser una tecnologia nueva es complicado resolver algunos problemas a la hora de programar, ya que los recursos se limitan a la documentación, y, en sitios como StackOverflow, quizá no se encuentren respuestas. Otra desventaja grande para Fresh, es que recientemente salió un entorno de ejecución de javascript mucho más rápido que Deno, este es Bun. 

Y eso seria todo lo que tengo para mencionarles de Fresh por ahora, espero hayan disfrutado tanto leyendo del artículo como yo escribiéndolo :) les dejo por acá los links que usé como referencia por si quieren seguir profundizando en el tema:

https://fresh.deno.dev/

https://fresh.deno.dev/docs/introduction

https://www.youtube.com/watch?v=4boXExbbGCk&ab_channel=Fireship

https://www.youtube.com/watch?v=1pcBlSGW_Sk&ab_channel=Theo-ping%E2%80%A4gg