Remix y Vite

Basado en la entrada de blog respectiva en el sitio oficial de Remix, el framework.

Fue anunciado el 31 de octubre del 2023 el soporte experimental para el nuevo Remix versión 2.0 para Vite por Pedro Cattori, Staff Developer, y Mark Dalgleish, también Staff Developer.

Con tal de usarlo, es necesario cualquiera de los comandos

# servidor minimo
npx create-remix@latest --template remix-run/remix/templates/unstable-vite

# servidor custom con Express
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

Con el nuevo entorno de desarrollo de Vite, que como sabemos utiliza como bundler a esbuild, programar con este framework se volverá una experiencia más agradable para el dev.

La velocidad que nos brinda Vite es invaluable. Esto se comentó sobre los tests llevados a cabo por los desarroladores para verificar esta afirmación:\

Bueno, hicimos unas pruebas rápidas en el  Indie Stack con una MacBook Pro M1 Max y esto fue lo que obtuvimos:
- 10 veces más veloz en HMR (Hot Module Replacement)
- 5 veces más veloz en HDR (Hot Data Revalidation)

Nos comunican que Remix ya no es dueño de todo su entorno; ahora, este framework que alguna vez (en parte sigue siendo) su mismo compilador ahora representa un plugin individual de Vite.\

// vite.config.ts
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
	plugins: [remix()]
});

Se puede intuir que la maniobra nos trae algunas ventajas interesantes que podrían hacer de Remix un framework más competitivo frente a su más que obvia competencia, Next. Cabe añadir que Next.js, hasta el momento, no soporta a Vite tanto como “servidor personalizado” o build tool (Rakesh Purohit).

El catálogo de plugins oficiales y comunitarios para una variedad de funcionalidades es interesante en el sentido que el framework releva un poco su capacidad de ser “framework” (marco de trabajo), ya que puede depender de plugins externos al mismo para importar determinados SVGs como componentes, o crear alías para rutas de tsconfig u otros archivos de configuración relevantes, en el caso de esta funcionalidad experimental de Remix, por supuesto.

Posteriormente, se nos son listados beneficios de usar Vite con Remix:

- Arraque casi instántaneo. Vite compila con forma de carga diferida el código de tu app en tiempo real, así que el servidor de desarrollo puede arrancar inmediatamente.
- Dependencias pre-bundled: Vite solo procesa las dependencias una vez; por lo tanto, librerías pesadas como Material UI y Ant Design no se vuelven cargas para las rebuilds o las actualizaciones en demanda.
- Actualizaciones en demanda incrementales. Vite rastrea las dependencias para que solo necesite reprocesar el código de la app que dependa de cambios (estados).
- Uso de memoria reducido. Vite entiende import y puede invalidar modulos obsoletos en el server de forma eficiente sin depender en trucos que consumen mucha memoria con tal de traspasar la cache del import. Esto debería eliminar errores de fuera de memoria durante el desarrollo.
- Paritición de CSS automática. La partición de CSS hecha por Vite solo carga los estilos necesarios para la página que se está observando.
- Resiliencia del estado del navegador mejorada durante HMR. El runtime de Vite y el marco límite de errores asegura que el estado del navegador se mantenga intacto incluso con la presencia de errores de servidor.
- Actualizantes en demanda del servidor. Los cambios de código que afectan al servidor son inmediatamente reflejados en el servidor actual sin necesidad de reinicar y sin algún truco que involucre global.
- Interoperabilidad de EcmaScript Modules y Common JS. Si escribes en ESM, Vite produce en ESM. Tus dependencias puede estar en ESM o CJS. Vite se encarga del resto.
- Typescript para todos tus archivos. Nada de archivos .js o .mjs que se necesitan en la carpeta principal de tu proyecto. Usa vite.config.ts e incluso corre el servidor custom via tsx.server.ts o node --loader tsm server.ts
- Workspaces. Compatabilidad con workspaces mejorada para monorepos. Utilizalo con cualquier manejador de paquetes soportado por Vita: npm, yarn, pnpm, etc.
- Targets para compatibilidad de navegadores. Usa el build.target construido en Vite o un plugin para soporte de navegadores.

Los developers responden que no empezaron usando Vite debido a que en el momento en que se creaba la primera release estable para Remix, no había una de Vite. El desarrollo de Remix comenzó en julio del 2020, y la estabilidad de Vite solo llegó en febrero de 2021.

Añadiendo a esto, existieron otras tres problemas que impedían la añadidura de Vite

- Soporte estable para Server Side Rendering
- Soporte para runtimes no basados en Node (Deno, Cloudflare)
- HMR fullstack, que reconozca al server

Antes de la llegada de esta funcionalidad experimental, el compilador estrella para Remix pasó de Rollup a esbuild, como indican, en marzo de 2021.

Sin embargo, en el transcurso de poco más de dos años, Vite anunció soporte para Server Side Rendering, y Deno después se hizo compatible con Vite. La solución para el tercer problema llegó en mayo de 2023 con el HDR y React dejando de recomendar Create React App (por fin).

El equipo detrás de Remix se dio cuenta que estaban implementado features más allá de esbuild que para entonces ya estaban totalmente construidas con Vite, con un sistema de caching para modulos, rastreo de dependencias, entre otras cosas.

La desventaja que persiste es que Cloudflare sigue sin soportar este experimento. Parece que los devs están actualmente cooperando con el equipo de CloudFlare para traer está parte ausente antes de que el plugin de Remix en Vita sea una realidad en la nueva release estable.

Estos fueron inspiraciones para la forma en la cual implementar soporte para Vite:

- Astro
- SolidStart
- SvelteKit