Published
- 7 min de lectura
Web de Remix -> Código abierto
Traducido de la entrada de Brooks Lybrand, Developer Relations Manager, en el blog de Remix. Enero 31, 2024.
El equipo de Remix está emocionado de anunciar que todo sitio relacionado al novedoso Framework de Javascript es de código abierto. Invitan a la comunidad a explorar y aprender de aquel código, y quizás considerar contribuir al mismo.
¿Y por qué esto?
Hace más de dos años el Framework de Remix fue hecho de código abierto. Por diez años, Ryan y Michael, parte del equipo, han estado trabajando en software de código abierto. Incluso, cabe decir que react.router.com se halla en un repositorio público. No hace falta decir que los de detrás del Framework son firmes creyentes en el Open Source, en el código abierto.
Entonces, ¿por qué no todos hacen sus sitios web de código abierto? Por buenas razones:
- Hacer a algo de código abierto frecuentemente trae riesgos de seguridad, los cuales involucran filtraciones de datos o de la lógica interna del negocio
- Los repositorios públicos requieren que los responsables de mantenimiento dediquen más tiempo a la resolución de problemas, la revisión de relaciones públicas y la participación en debates sobre solicitudes de funciones y mejoras.
- Generalmente los mantenedores del OSS gastan todo su esfuerzo en hacer bonitas sus librerías y su web, cuando el código que hay detrás de la web es un reverendo espagueti escrito con la intención de que pase y puedan empezar a ganar usuarios (no se habla por experiencia personal ni nada 😅)
Bueno, de todas formas se va a hacer el sitio de código abierto.
El equipo cree que las ventajas superan a los inconvenientes. El código abierto del sitio web les permite ofrecer un sitio Remix del mundo real del que aprender. También da la oportunidad de obtener más fácilmente comentarios y contribuciones de los desarrolladores de buen corazón en la comunidad (gracias Ryan Leichty para pulir nuestros documentos). Además, aunque nuestro sitio web es bastante sencillo, se están haciendo cosas muy interesantes.
Una guía por el sitio web
¿Cómo funciona la página de inicio?
Todavía no lo sé.
Ryan Florence lo escribió y ahora puedes leer el código fuente del componente ScrollExperience de 1500 líneas. O simplemente puedes recorrerla varias veces para ver todas las animaciones bonitas como hago yo.
Una documentación sin SSG (Static Site Generation)
Una de las características únicas del sitio web es que son renderizados la documentación del lado del servidor en el momento de la solicitud, en lugar de utilizar la estrategia más común de generación de sitios estáticos (renderización previa del HTML durante la compilación).
La razón principal por la que se hace esto es para no tener que reconstruir todo el sitio cada vez que es corregido un error tipográfico. De hecho, los documentos de Remix no existen en este repositorio. Puede encontrarlos en la base de código de Remix junto al código fuente de Remix. La documentación es mantenida aquí:
- Para mantenerla cerca del código que está documentando
- Para facilitar la contribución (antes de abrir esta documentación)
- Para que la documentación esté acoplada a versiones específicas de Remix, gracias al historial de git
Este último punto es la otra razón principal por la que la documentación es renderizada por el lado del servidor en lugar de SSG. Así se puede mantener la documentación de cada versión de Remix para siempre. Incluso es posible renderizar la versión más actualizada de la documentación de desarrollo sin volver a desplegar. Imagina reconstruir cada documento para cada versión de Remix cada vez que alguien hace un cambio. Eso sería mucho.
Esto se consigue obteniendo el markdown de GitHub en el loader y renderizando en el servidor la página de documento solicitada en la ruta. Como este contenido no cambia con frecuencia, se utiliza una caché LRU para almacenar los resultados en el servidor durante 5 minutos. También se envía una cabecera Cache-Control con la directiva stale-while-revalidate junto con la respuesta, de forma que cuando haya un documento nuevo, el antiguo se servirá mientras el nuevo se renderiza y se rellena en la CDN para la siguiente solicitud.
return json(
{ doc },
{
headers: {
"Cache-Control": "max-age=300, stale-while-revalidate=604800"
}
}
);Si de vez en cuando odias ir 5 minutos por detrás de las últimas novedades, puedes leer la documentación original o acudir a un terapeuta.
Showcase y Resources
Habrás notado que recientemente se han empezado a añadir algunas páginas más al sitio web:
- Remix Showcase para mostrar las empresas, organizaciones, organizaciones sin fines de lucro y desarrolladores independientes que construyen mejores sitios web con Remix.
- Remix Resources para destacar pilas, plantillas y bibliotecas creadas por la comunidad para la comunidad.
Se tienen muchos planes para seguir mejorando estas páginas, así como añadir más recursos para ayudar a servir a la comunidad. Sin embargo, hasta ahora contribuir con ejemplos a estas páginas sólo ha sido posible con la esperanza de que el equipo central se fije en tu proyecto y lo añada. El equipo aquí está muy contento de poder dar la vuelta a esta situación y hacer que las contribuciones al sitio de Showcase y Resources estén a sólo un clic de distancia.
Vite
Remix.run ya utiliza el nuevo plugin Vite. Se ha actualizado a Vite principalmente para probar el nuevo plugin y asegurarse de que funciona en un sitio real de producción. Hacer remix.run de código abierto significa que cuando se ralentizan las nuevas características, es mucho más fácil mostrarlos en un sitio web de producción y compartir ese conocimiento.
Estos son algunos ejemplos (simplificados) en los que se han eliminado patrones torpes a los que Remix antes obligaba y que Vite ha hecho increíblemente sencillos.
Carga de markdown para entradas de blog
- import path from "path";
- import fs from "fs";
- const dataPath = path.join(__dirname, "..", "data");
- const blogPath = path.join(dataPath, "posts");
+ const postContentsBySlug = Object.fromEntries(
+ Object.entries(
+ import.meta.glob("../../data/posts/*.md", { as: "raw", eager: true }),
+ ).map(([filePath, contents]) => [
+ filePath.replace("../../data/posts/", "").replace(/\.md$/, ""),
+ contents,
+ ]),
+ );
export async function getBlogPost(slug: string): Promise<BlogPost> {
let cached = postsCache.get(slug);
- if (cached) return cached;
- let filePath = path.join(blogPath, slug + ".md");
- let contents: string;
- try {
- contents = (await fs.promises.readFile(filePath)).toString();
- } catch (e) {
+ let contents = postContentsBySlug[slug];
+ if (!contents) {
throw new Response("Not Found", { status: 404, statusText: "Not Found" });
}
}Carga de datos de autor desde un archivo yaml
import yaml from "yaml";
+ import authorsYamlFileContents from "../../data/authors.yml?raw";
- const AUTHORS: BlogAuthor[] = yaml.parse(
- fs.readFileSync(path.join(dataPath, "authors.yml")).toString(),
- )
+ const AUTHORS: BlogAuthor[] = yaml.parse(authorsYamlFileContents);Echa un vistazo a la migración de Vite PR, y mientras estás allí, comprueba lo fácil que fue cambiar el servidor de CJS a ESM.
Cómo contribuir
Esta es la parte que más me entusiasma.
Personalmente, quería contribuir al código abierto años antes de armarme de valor. Aunque esto dice más de mí que otra cosa, sé que habría sido más fácil contribuir a un sitio web de código abierto que a una biblioteca. ¿Por qué? Porque trabajaba en sitios web todo el día en mi trabajo, es lo que ya sabía. No escribía bibliotecas. De hecho, muchos menos desarrolladores web escriben bibliotecas que sitios web.
Por eso me entusiasma que nuestro sitio web sea de código abierto. Creo firmemente que el cambio a contribuir a un sitio web con un repositorio público es mucho más sencillo que contribuir a una biblioteca para muchos desarrolladores. Espero que este anuncio ofrezca a muchos de ustedes una oportunidad más fácil de hacer su primera contribución al código abierto.
De hecho, nos hemos adelantado y hemos seleccionado una serie de buenas primeras issues para facilitar el comienzo. Se trata de ediciones que hemos marcado específicamente como aptas para nuevos colaboradores. Así que, tanto si eres un veterano colaborador de OSS como si estás intentando iniciarte, nos alegra ver que tu perfil de GitHub aparece en la pestaña “Pull request”.
Feliz contribución, no podemos esperar para construir un mejor remix.run juntos.
Brooks Lybrand, Developer Relations Manager.