¡Construye Tu Framework Web Desde Cero!

Hola. Estoy muy emocionado de hablar hoy en JS Nation. El título de mi charla es, Construye tu propio marco web desde cero. Mi nombre es Yusuke. Me encanta construir marcos web. Trabajo en Cloudflare como defensor de desarrolladores. Soy el creador de Hono.

Esta es la agenda de hoy. Crear marcos web es divertido. Vamos a crear un marco web. Antes de hablar sobre qué es un marco web, aquí hay algunas cosas que deberías saber. Este marco está construido con JavaScript y TypeScript. Funciona en Cloudflow.

Veamos un ejemplo sin un marco. Esta es la aplicación web más pequeña que puedes escribir. Simplemente devuelves una respuesta desde la función fetch. Puedes aprender el mismo código en diferentes entornos de ejecución. Por ejemplo, Cloudflare tiene Deno o BAN. Simplemente ejecuta uno de estos comandos.

Esto es lo que ves en tu navegador cuando estás usando Angular. Simplemente ve a localhost 8787 y muestra hello. Funciona igual en Deno o BAN, también.

Pero en la aplicación, las cosas se vuelven complejas muy rápidamente. Por ejemplo, necesitas enrutamiento. Como obtener barra o publicar barra publicar. Tienes que manejar todo eso tú mismo.

Y esto es lo que sucede. Si escribes todo a mano, tu código se vuelve largo y difícil de leer. Demasiadas condiciones. Entonces, escribir todo manualmente se vuelve demasiado perverso.

En su lugar, pensemos, ¿qué necesitamos en un framework? Enrutamiento, parámetros, diferentes tipos de respuesta, etcétera. Permíteme explicarlos uno por uno. Primero, el framework necesita decidir qué hacer basado en la ruta de la URL y el método. Por ejemplo, get slash, post slash post. El framework necesita extraer los valores de la URL. Como parámetros en la ruta. El framework podría devolver texto, JSON, HTML, o incluso hacer una reescritura dependiendo de la situación. El framework también necesita manejar blocs de notas y errores. Y en aplicaciones del mundo real, los derechos futuros, la autenticación, cross-origin, y la seguridad son esenciales. Este es el mismo ejemplo de antes. Pero escrito en Hono. Es mucho más corto y legible y fácil de mantener. Este es el beneficio de usar un framework. Así que, este es el framework. Es corto, fácil y muy legible. Con él, puedes construir una aplicación realmente rápido e incluso escala bien cuando tu aplicación crece. Puedes usar Hono, pero construyamos uno tú mismo. De esa manera, puedes ver cómo funciona por dentro y puedes ver que construir tu propio framework es realmente divertido.

A continuación, hablemos sobre devolver respuestas. Aquí está nuestro primer paso. Hagamos una función llamada create app. Es solo un objeto con el método fetch. Y este método devuelve una respuesta. Esta es la estructura más simple para un framework. Llamamos a create app. Y devuelve un objeto. Este objeto tiene este método fetch. Así que, cuando llega la solicitud, irá a fetch y obtenemos la respuesta.

Y puedes personalizarlo. Establecer headers, establecer status. Y también puedes usar métodos estáticos como response.json o response.redirect.

Cuando construimos un framework, lo más básico es tomar una request y devolver response. Para hacer esto, necesitamos una función. La llamamos handler. El usuario puede definir un handler usando este setter. El handler es la palabra internamente y el código fetch.

Si no hay handler, el framework no devuelve uno. Así es como funciona en el código. Este es el handler definido. Y este es el setter del handler. Almacena la función handler dentro.

Y este es el setter del handler. Almacena la función handler dentro. Cuando llega una solicitud, llama al handler. Si no se establece un handler, no devuelve uno. Podemos definir un handler usando app.handler. Este handler simplemente devuelve una nueva respuesta. Como no establecimos status y headers, define que el status es 200 y el tipo de contenido es text slash frame. Y si quieres devolver HTM, solo establece el tipo de contenido como text slash HTML.

Y puedes personalizar el status. Puedes usar métodos estáticos como response.json. Esto devuelve una respuesta JSON con los headers correctos. Si quieres redirigir, solo usa response.

redirect. Esto devuelve una respuesta de redirección. Así es como devolvemos la respuesta.

Podemos personalizar cosas como status y headers. Y también tenemos algunos métodos auxiliares para facilitarlo. Pasemos al enrutamiento. Hasta ahora, el framework ha estado manejando solo una ruta.

Pero en una aplicación del mundo real, necesita devolver diferentes respuestas dependiendo del path y el método. Por ejemplo, get slash debería devolver la página principal. Get slash welcome debería devolver la página de bienvenida. Post slash post debería crear un nuevo post. Para hacer eso, usamos el patrón de URL.

Esta es la API. Funciona en Cloudflare, Cardino, y Node.js. Puedes usar comodines y parámetros de ruta.

Su sintaxis se basa en path to regex que se utiliza en Express. Podemos crear un patrón usando new URL con path name. Esto establece path name como slash post slash colon ID. Cuando probamos con slash, devuelve primero. Pero slash post slash uno a tres coincidencias. Entonces, devuelve true.

Ahora estamos listos para agregar enrutamiento con patrón de URL. Vamos a hacer un framework con enrutamiento. Definimos el tipo de ruta que incluye el método HTTP y el patrón de URL y la función del handler. Ahora, actualizamos la función create app. Devuelve el objeto app que tiene dos métodos, on y fetch. Definimos el método on. Toma el método, path, handler, y los almacena como una ruta usando el patrón de URL.

El método fetch recorre todas las rutas. Verifica si el método y la URL coinciden con la ruta. Si coinciden, llama al handler. Si no coinciden, devuelve no encontrado. Así es como usas la función de enrutamiento que acabamos de construir. Defines método, path, y handler usando el método on. Construimos el manejo de respuestas y el enrutamiento. Ahora, asegurémonos de que funcionen como se espera. Escribamos algunas pruebas. Para probar nuestra aplicación, podemos crear una solicitud y pasarla a app.

Escribamos algunas pruebas. Para probar nuestra aplicación, podemos crear una solicitud y pasarla a app.fetch. La aplicación devuelve un objeto de respuesta. Entonces, podemos verificar su contenido, como el estado o el cuerpo. Aquí hay una prueba básica. Nosotros registramos las rutas, luego creamos una solicitud y la pasamos a app.fetch. Obtenemos la respuesta. Podemos verificar el estado y el cuerpo.

Lo interesante es que no necesitas ejecutar el servidor en localhost. Es solo una llamada de función regular. Por ejemplo, puedes probarlo. Por cierto, Hono tiene más de 20,000 líneas de código de prueba, y la mayoría de ellas siguen el mismo patrón. Ahora tenemos enrutamiento en nuestro framework.

Definimos rutas usando on, las emparejamos con el patrón de URL, las manejamos en fetch, y podemos probarlo. A continuación, obtengamos datos de la solicitud. Cuando manejamos una solicitud, a menudo necesitamos obtener información de la URL, como pass o cadenas de consulta. Veamos cómo hacerlo. Podemos usar el objeto de solicitud para obtener la URL. Simplemente pasando la propiedad URL al constructor de URL para pasarla. Podemos obtener acceso, podemos acceder a la propiedad del nombre de pass. Podemos usar URL pattern.exec para obtener el resultado de la coincidencia.

Luego obtenemos el parámetro pass ID, 123, de los grupos match.passname. Usamos URL search params para obtener parámetros de consulta, como página 4, 5, 6. Queremos pasar cosas como la solicitud y la información de coincidencia al manejador. En lugar de pasarlos por separado, los envolvemos en un solo objeto. Este objeto se llama contexto, y es fácil de extender más tarde. Así es como definimos el tipo de contexto. Incluye la solicitud y el resultado de la coincidencia. Luego usamos eso como la entrada para la función del manejador.

En fetch, encontramos la ruta que coincide con la URL y el método. Creamos el contexto y lo pasamos al manejador. Así es como usamos el contexto en el manejador DR. Dentro del contexto, tenemos el resultado de la coincidencia de este es el resultado del patrón de URL, usando eso, podemos obtener el parámetro pass y el parámetro de consulta. Resumiré esta sección. Podemos obtener datos de las solicitudes ejecutando URL.exec. De este resultado de coincidencia, podemos obtener tanto los parámetros pass como los de consulta. Luego los pasamos al manejador dentro del contexto.

Ahora hagamos nuestro framework más poderoso agregando middleware. El middleware actúa antes y después del manejador. Puede cambiar la solicitud o la respuesta, y puedes reutilizarlo en diferentes rutas. Aquí hay algunos ejemplos de middleware. Estos son de Hono, y muestran cuán poderoso y reutilizable puede ser el middleware. Desde autenticación hasta validación y almacenamiento en caché, el middleware puede hacer mucho. A veces el middleware necesita almacenar algunos valores o cambiar la respuesta antes de devolverla. Así que, extendamos el contexto para que eso sea posible. Agregamos dos campos más al contexto. Esto nos permite modificar la respuesta antes de devolverla. Y este bars es un lugar para almacenar valores a través del middleware. Pasamos ambas listas al contexto. Definimos listas antes del bucle para que el manejador pueda actualizar. Y devolvemos la respuesta después del bucle.

Aquí es cómo usamos listas y bar en la práctica. El primer middleware inicia valores en bars. El manejador principal crea la respuesta usando el valor almacenado. Este, el último middleware, modifica la respuesta antes de devolverla. Middleware es una función que actúa antes y después del manejador. Puede usarse para modificar solicitudes, la respuesta, o agregar valores útiles. Y diseñamos el objeto de contexto para contener los datos clave que el manejador necesita, como solicitudes, el objeto de respuesta, y valores personalizados.

Agreguemos la función de helper a nuestro framework. Un helper es una función reutilizable que proporciona lógica útil, como renderizar HTML. Recibe contexto para que pueda acceder a cosas como solicitudes o respuesta. Estos son ejemplos de Hono. Puedes ver que tiene muchos helpers integrados, como cookies, Jot, HTML, y más. Definamos helpers en nuestro framework. Extendemos el tipo de contexto con el objeto helper. La aplicación tendrá mapas de helpers. Cada helper es una función que recibe contexto y los parámetros del helper.

Luego en fetch, pasamos el helper al contexto. Ahora, instantáneamente en el Handler, puedes acceder a él como C.helper. Aquí está cómo definir un helper llamado HTML. Y así es cómo usarlo en el Handler. Puedes llamar a C.helper o HTML para devolver una nueva respuesta con contenido HTML. Si configuras la propiedad types, TypeScript te dará autocompletado para tus helpers. Es una pequeña función, pero mejora mucho la DX. Resumamos la función de helper. Un helper es una función reutilizable que recibe contexto. Los defines en nuestra aplicación create y accedes a ellos usando C.helper. Dentro de tu Handler, si defines los tipos correctamente, obtienes autocompletado y tipos de forma segura. Veamos algunos ejemplos prácticos usando nuestro framework. Aquí, obtenemos el parámetro de ruta ID y el parámetro de consulta page. Luego devolvemos una respuesta JSON usando response.json.

Aquí, convertimos la lógica de parámetros en helpers. Dentro de los resultados, simplemente llamamos a C.helper params o C.helper search params. Esto hace que el Handler sea más limpio y la lógica del helper reutilizable. Este ejemplo combina múltiples características. Definimos HTML helper y establecemos valores en middleware y luego usamos ambos en el Handler. Después de eso, otro middleware modifica los response helpers. Esto muestra cómo los helpers, contextos y middleware trabajan juntos.

Esto es muy interesante. Este helper permite hacer server-side rendering con React. Utiliza render para leer un stream y devolver una respuesta HTML. Ahora, puedes usar JSX directamente en tu Handler. Ahora hemos completado todos los pasos. Así que, has construido lo básico, pero hay más que podrías hacer. Puedes mejorar middleware y helpers o incluso integrarte con proyectos reales como Hono.

Vamos a concluir. Has construido tu propio framework web. La aplicación con tu framework puede devolver respuestas, definir rutas, obtener datos de la solicitud e incluso usar middleware y helpers. Acabas de reinventar la rueda, pero construir tu framework web es realmente divertido. Eso es todo. Muchas gracias.