Fresh: un nuevo marco de trabajo web de pila completa para Deno

¡Hola a todos! Hoy vamos a hablar de FRESH, un marco de trabajo web de pila completa para Deno. Antes de comenzar, un poco sobre mí. Como mencioné, trabajo en Netlify. Soy de Montreal, Quebec, Canadá. Si estás buscándome en línea, me encuentro en NikkieTOnline prácticamente en todas partes. Si quieres saber un poco más sobre mí, puedes visitar mi sitio web en IAmDeveloper.com. También hago streaming en Twitch, así que si eso es algo que te interesa, puedes visitar IAmDeveloper.live. También tengo un canal de YouTube que puedes visitar en YouTube.IAmDeveloper.com. También soy fanático de las arañas.

¡Muy bien, ¿qué vamos a cubrir hoy? Vamos a repasar qué es Fresh. Vamos a discutir los estándares web, y luego profundizaremos en las características de Fresh. Después de eso, habrá una breve demostración y luego podremos pasar a preguntas y comentarios.

¡Muy bien, empecemos! Entonces, ¿qué es Fresh? Bueno, espera. Primero, necesitamos hablar sobre Deno. Entonces, ¿qué es Deno? Deno es un tiempo de ejecución para JavaScript, TypeScript y WebAssembly, o Wasm, que utiliza V8. Para la web, se ejecuta en el Edge. También puedes usar Deno para crear interfaces de línea de comandos, es decir, CLI. Tiene un linter incorporado, un formateador de código incorporado, un ejecutor de pruebas incorporado, interoperabilidad con node.js a través de especificadores de nodos y interoperabilidad con npm a través de especificadores de npm y CDNs.

¡Muy bien, hablemos de los estándares web! Deno utiliza los estándares web. Por ejemplo, mapas de importación, fetch, solicitud y respuesta. Como dice el pequeño dibujo allí, solo búscalo en MDN. Excelente documentación, pero eso es prácticamente lo que necesitarás consultar la mayor parte del tiempo si estás trabajando con Fresh. Como parte de los estándares web, Deno es parte de WinterCG. Grupo Comunitario de Tiempos de Ejecución Interoperables en la Web. Es un espacio para colaborar en la interoperabilidad de API para tiempos de ejecución de JavaScript. Siéntete libre de leer más sobre WinterCG en wintercg.org.

¡Muy bien, ¿dónde nos quedamos? Suponiendo que tienes Deno instalado, la instalación de Fresh es bastante rápida. Simplemente ejecuta el comando que ves en la presentación de diapositivas aquí. Es 'deno run -A -R' y luego https://fresh.deno.dev y el nombre de tu proyecto. Eso fue mucho que decir. Muy bien. La instalación es bastante rápida y tienes algunas opciones. Puedes elegir Tailwind para los estilos, optar por la integración con VS Code a través de la extensión de Deno para VS Code, y eso es prácticamente todo. Hablaremos más sobre la historia de estilos un poco más adelante en la charla. Para iniciar Fresh, ve a la carpeta raíz del proyecto en una terminal y ejecuta 'deno task start'. No entraremos en detalles en esta charla, pero Deno tiene un ejecutor de tareas incorporado que puedes configurar a través de un archivo deno.json.

Muy bien. Entonces, profundicemos en qué es Fresh. Entonces, ¿qué es Fresh? Es un marco de trabajo web de pila completa que se ejecuta en Deno. Es un marco de trabajo renderizado en el lado del servidor. Tiene renderizado justo a tiempo en el borde. Proporciona soporte para TypeScript de forma nativa, y no hay nada que configurar para comenzar a usarlo. No hay un paso de compilación. No hay JavaScript incluido por defecto. Utiliza la arquitectura de Islas para la interactividad del cliente. Utiliza Preact en el lado del servidor y del cliente. Y hay soporte para JSX gracias a Preact y TypeScript. Si no estás familiarizado con el increíble proyecto Preact, es una alternativa rápida y más pequeña a React con la misma API moderna. Por ahora, solo mencionaremos esto, pero profundizaremos en qué es la arquitectura de Islas un poco más adelante en la charla.

De acuerdo, repasemos algunas de las características de Fresh. Tenemos archivos estáticos de los que hablaremos, rutas y enrutamiento, obtención de datos, middleware, páginas de error, estilos y luego llegaremos a las Islas.

Así que primero tenemos archivos estáticos. Todos los activos estáticos se encuentran en la carpeta Static. Los activos estáticos, aparte de las etiquetas de imagen y fuente, no tienen encabezados de caché establecidos en ellos. Puede establecer los encabezados de caché manualmente o puede utilizar el ayudante de activos incorporado para almacenar en caché automáticamente un activo durante un año. Aquí tienes un ejemplo del ayudante de activos en acción. Tengo esto en mi hoja de estilo. Estoy usando el ayudante de activos y lo que sucede es que genera una URL única que está compuesta por la ruta del archivo de activo, seguida de una cadena de consulta con una clave, guion bajo FRSH, guion bajo C con un valor que es el ID de compilación de la implementación. Y como mencioné, también se establecen los encabezados de control de caché en la respuesta. Así que lo tenemos allí durante un año. Muy bien, profundicemos en las rutas y el enrutamiento. Hay tres tipos de rutas. Está la ruta de controlador, que generalmente se utiliza para las API, la ruta de componente, que se utiliza para las páginas, y luego la ruta híbrida. Y para las rutas híbridas, se utilizan para las páginas que requieren rutas de controlador, por ejemplo, una página de inicio de sesión o una página de búsqueda. Al igual que en otros marcos de trabajo, las rutas también pueden ser dinámicas. Puedes ver en la tabla aquí que tomé de la documentación de Fresh que se admiten muchos tipos de patrones de enrutamiento basados en archivos. Sin embargo, Fresh solo admite el renderizado en el lado del servidor. Por lo tanto, no hay un concepto como get static paths en Next.js o Astro, ya que las páginas nunca se generan estáticamente. Muy bien, veamos la historia de obtención de datos. Para la obtención de datos, tenemos rutas de controlador, que acabo de mencionar, y también podemos usar rutas híbridas para manejar la obtención de datos. Para una ruta de controlador, todo lo que se requiere es exportar una función que reciba dos argumentos, una solicitud y un contexto, y devuelva una respuesta. Entonces, en este caso aquí, tenemos un controlador que utiliza la API de chistes que se incluye con el sitio de demostración de Fresh, y podemos ver aquí que simplemente genera una lista de chistes aleatorios a partir de una matriz, y luego lo devuelve como una respuesta. Para las rutas híbridas, definimos funciones para acciones en una variable exportada llamada controlador. Nombramos las funciones asíncronas en el objeto de controlador según los verbos HTTP. Por ejemplo, get. Como la ruta de controlador en el ejemplo anterior devuelve una respuesta, normalmente en una ruta híbrida, querrás devolver el resultado del método de renderizado del contexto. Piensa en el renderizado del contexto como pasar props renderizadas en el lado del servidor a la página que se está renderizando. Cuando digo props, me refiero a las props de preact o las props de React si eres nuevo en preact. Al observar el ejemplo en la diapositiva, una cosa a tener en cuenta sobre las props y Fresh es que no es props.movies, las props de context.render siempre están en la propiedad props.data.

Entonces, por ejemplo, el array de props de películas es en realidad props.data, no props.data.movies. Eso es muchos puntos en esa charla.

Bien, pasemos al middleware. Nuevamente, como otros marcos de trabajo, Fresh admite middleware. Todos nuestros archivos se llaman middleware.ts con un guion bajo y deben residir en la carpeta de rutas. Se admiten múltiples middlewares. Aunque Deno te anima a usar TypeScript, podrías escribir el middleware en un archivo JavaScript.

Echemos un vistazo a un ejemplo. Digamos que navego a /movie/Top Gun. Dado que estamos accediendo a una ruta de película dinámica, eso significa que estamos usando dos middlewares. Uno en la raíz de la carpeta de rutas y otro en la subcarpeta de películas. En el caso de múltiples middlewares, se ejecuta primero el menos específico. En nuestro ejemplo, eso significa que se ejecuta primero el middleware de la raíz. Agrega un encabezado X-conference con el valor nodeCongress2023. Luego se ejecuta el segundo middleware en la subcarpeta de películas. Agrega un encabezado X-movie-page junto con un encabezado de caché que almacena en caché la página durante 60 segundos. Si navegamos a /movies, podemos ver los dos middlewares dándose un apretón de manos. Podemos ver el resultado en la respuesta, que obtenemos el encabezado de control de caché y obtenemos los otros dos encabezados que proporcionan los middlewares.

Entonces, el X-conference y el X-movie-page. Bien, pasemos a hablar sobre páginas de error. Al igual que otros marcos de trabajo, puedes definir páginas de error personalizadas. Por ejemplo, la diapositiva actual muestra una página personalizada de error 404 o página no encontrada. Estas son rutas de componentes pero tienen props especiales pasados. En el caso de la página 404, tienes acceso a los props de página desconocida cuando se está renderizando la página. Los props de página desconocida te brindan acceso a cosas como la URL de una página que no se encontró. Para una ruta dinámica, llamamos a context.render not found para renderizar la página 404 si la página no existe. Y volviendo a la obtención de datos, cuando estábamos hablando de la obtención de datos, mencioné que normalmente necesitamos devolver el resultado de context.render para rutas híbridas. Eso sigue siendo válido, pero como mencioné, si estás en una página asociada con una ruta dinámica y la página que se está cargando no existe, en su lugar devolvemos context.render not found, y context.render not found luego pasará los props de página desconocida de los que estábamos hablando hace un momento a la página 404.

Muy bien. Pasemos a hablar sobre estilos. Cuando hablé por primera vez sobre Fresh, mencioné que no había un paso de compilación. ¿Cómo afecta esto a la estilización de nuestras aplicaciones? Fresh te brinda la opción de habilitar TWIN, una implementación renderizada en el lado del servidor de Tailwind. Esto es genial si usas Tailwind, pero si los proyectos en los que estás trabajando no usan Tailwind, ¿cuáles son tus opciones? En primer lugar, diría que el CSS moderno es bastante impresionante en estos días, por lo que podrías simplemente usar una buena hoja de estilos. El hecho de que los selectores anidados estén llegando a los navegadores y que solo tengamos variables CSS y otras características como las que tiene CSS, hace que esta sea una opción convincente. También podrías agregar un paso de compilación que incluya los artefactos de compilación de tus herramientas de CSS. Esto se puede lograr con una acción de GitHub u otra forma de automatización. Aunque funcionaría, no se siente correcto incluir los artefactos de compilación en el código base, y también va en contra de una de las promesas de Fresh, que es no tener pasos de compilación. Creo que lo que veremos aquí es innovación por parte de los usuarios, donde es posible que veamos más implementaciones renderizadas en el lado del servidor de cosas como Sass, Post CSS, etc., al igual que el proyecto TWIN. Otra cosa que me encantaría ver en Fresh es el CSS de alcance. Lo tenemos en otros marcos de trabajo como Vue y Svelte. Creo que eso sería una gran adición.

Muy bien, hablemos de las islas. ¿Qué es una isla de todos modos? Lo mencioné brevemente al describir la arquitectura de Fresh, pero ahora profundizaremos un poco más en la arquitectura. En resumen, permite bolsas de interactividad en tu sitio o aplicación. Dejaré este fragmento de una publicación de blog de Jason Miller por un minuto, pero Jason Miller, uno de los colaboradores junto con Katie Seiler-Miller, acuñó el término arquitectura de islas.

En realidad, es apropiado que Jason sea uno de los colaboradores que acuñó este término, ya que también es el creador de Preact, que utiliza Fresh. En la arquitectura de islas, el objetivo es enviar principalmente HTML estático y luego marcar ciertas regiones del modelo de objetos del documento, es decir, el DOM, como disponibles para hidratar, o usar el término de Fresh, revivir. Cuando se carga una página con islas, solo se carga el JavaScript de esas islas. Mencioné que Fresh no sirve ningún JavaScript al cliente de forma predeterminada. Entonces, ¿cómo habilitamos la interactividad del lado del cliente de la que estamos hablando en la arquitectura de islas?

Fresh tiene dos carpetas de componentes. Hay una carpeta de componentes y una carpeta de islas. Los componentes en la carpeta de componentes siempre se renderizarán solo en el lado del servidor, incluso si les agregas interactividad del lado del cliente. Y los componentes en la carpeta de islas se renderizarán en el lado del servidor y, una vez que se cargue la página, se revivirá la interactividad del lado del cliente. Entonces, veamos un componente interactivo clásico, un contador. Tiene un par de botones, si haces clic en más uno, incrementa el contador, y si haces clic en menos uno, decrementa el contador. Y en este caso aquí, tenemos un par.

Entonces, ¿cómo revivimos una isla? Básicamente, lo que sucede es que los componentes que son islas se renderizan en el lado del servidor por Fresh y si revisas el código fuente de la página que se cargó, en realidad verás el marcado renderizado para esa isla o islas en particular. Junto con el marcado renderizado para esas islas, Fresh también agrega un script de tipo aplicación JSON con el ID __FRSH_state. En ese script hay una matriz. En esa matriz, el primer elemento es otra matriz que contiene todas las props para cada isla que está en la página. El segundo elemento en la matriz está actualmente vacío, pero eso es para los plugins. Eso es algo de lo que no vamos a hablar hoy, pero si estás interesado en los plugins, puedes echar un vistazo a la documentación de Fresh.

Como puedes ver aquí, tengo JSX para mi contador y comienza en el lado del servidor donde paso una prop con el valor tres para la prop de inicio y cuando se renderiza en la página, veremos que las props iniciales para ese componente en particular se cargan en la matriz que mencioné. ¿Entonces, cómo se revive? Tenemos ese estado de Fresh que mencioné y una de las cosas que hace Fresh es, junto con el JavaScript relacionado con esa isla en particular, tiene una función revive y esa función revive toma la lista de componentes, por ejemplo, aquí el contador, y también pasa el primer elemento del estado que son todas las props para todas las islas, como mencioné. En el ejemplo anterior solo había una isla, pero si hubiera más de una isla, ¿cómo mapea Fresh correctamente el estado inicial? Si tenemos un par aquí, veremos que simplemente se van agregando a la matriz, pero ¿cómo sabe Fresh que el contador con la prop de inicio de 3 y el contador con la prop de inicio de 5 se mapean correctamente en la matriz allí.

Hablamos de cómo denotar regiones interactivas en el DOM cuando hablamos de la arquitectura de islas. Los componentes de islas en Fresh se renderizan en el lado del servidor, como mencioné, pero también se renderizan con comentarios HTML que los rodean. El comentario tiene el prefijo FRSH seguido del nombre del componente, dos puntos y luego el índice de matriz donde vive el estado del componente de la isla en el estado inicial de todas las islas que se cargaron inicialmente. No importa cuántos componentes de isla diferentes haya o cuántas instancias de cada uno, el índice de matriz se incrementará en cada comentario HTML en función del orden de las islas en el DOM. Una cosa a tener en cuenta es que esto es solo un detalle de implementación, nunca necesitarás gestionarlo tú mismo, simplemente me parece útil entender la tecnología subyacente.

De acuerdo, vamos a pasar a una breve demostración. Así que voy a moverme aquí. Lo que tenemos aquí es... He creado un pequeño sitio de demostración aquí. Tiene algunas páginas, como la página de inicio donde tenemos algunas islas, tres componentes de contador aquí. Cada uno administra su propio estado. Y también tengo una lista de películas. Eso va a la ruta de películas. Y podemos cargar una película, por ejemplo, como Top Gun. Y si abro el panel de red aquí, vamos a actualizar eso de nuevo, y esto tiene dos middlewares en ejecución. Y como dije, estaba el primer middleware en la carpeta raíz de las rutas y podemos ver que tiene el encabezado x-conference que proporciona ese middleware. Y luego el middleware de la subcarpeta agrega el encabezado x-movie-page, así como el control de caché de 60 segundos. De acuerdo, podemos cerrar eso. Y aquí tienes un ejemplo de una página híbrida. Solo voy a agregar una película. Digamos, El Señor de los Anillos. Y le daré una calificación de cinco y lo enviaré.

Para estar en la misma página, la ruta híbrida tiene controladores en el objeto de controlador. En este caso particular, estoy pasando un post, lo que nos permite publicar en la página y agregar la nueva película aquí. Para fines de esta demostración, no utilicé una base de datos real. Solo estoy utilizando una variable, por lo que es una base de datos en memoria. Hablar sobre datos está totalmente fuera del alcance de la charla, pero debes saber que hay mucha gente trabajando en el problema de los datos en el borde.

Bien, vamos a concluir la demostración aquí. Esto es lo que se ve en el código fuente de la página de vista de esa primera página con las tres frutas cítricas de diferentes colores. He eliminado muchas cosas para poder desplazarme por él. Lo primero es que Fresh se está iniciando aquí, eso es lo que es ese script. Puedes ver que la carpeta aquí se basa en el ID de compilación. Luego podemos ver que solo carga mi JavaScript del contador, que es para la isla. Luego tenemos mi estilo, como mencioné, y está utilizando el ayudante de activos y le está dando un ID único, y está en caché durante un año, como mencioné.

Solo quería mostrar brevemente aquí, este es literalmente el código que se renderizó, excepto que eliminé algunos SVG por brevedad, pero podemos ver aquí, por ejemplo, que tengo el primer componente aquí, está indicado con los comentarios HTML, y luego hay un segundo y un tercero. Luego tenemos el estado de Fresh aquí, y podemos ver allí los tres. Y luego tenemos ese método revive aquí abajo, y podemos ver que se está ejecutando aquí, y tenemos nuestro componente de contador, y luego el estado que estamos pasando, que son las props para todo eso. Y eso es prácticamente la demostración.

Bien, volvamos a la presentación de diapositivas. Sí, si estás interesado en la demostración, está implementada en imdeveloper.com/fresh-demo. También puedes ver el código fuente en github.com/nickyt-online/fresh-talk-demo. Y terminaremos con algunos recursos que creo que todos encontrarán útiles. Hay muchas cosas sobre Fresh, Deno, Preact, TypeScript, estándares web y también algunas cosas nuevas con Dino, como la compatibilidad con Node, y también un enlace a la CG de invierno. Para aquellos interesados, la presentación de diapositivas está disponible en imdeveloper.com/fresh. Eso es prácticamente todo. No pudimos cubrir todo en unos 20 minutos, pero espero que esto les haya dado a todos una introducción suficiente para emocionarse con Fresh. Gracias, gente.