Cómo Blitz.js hace que el desarrollo web full-stack sea muy fácil

Hola, gracias a todos por unirse. Hoy voy a hablar sobre Bleach.js y cómo hace que el desarrollo web full-stack sea muy fácil. Soy Aleksandra, la mantenedora de Bleach.js. Puedes encontrarme en Twitter, como dice Aleksandra, así que si tienes alguna pregunta después de la charla, no dudes en enviarme un mensaje. Hoy voy a hablar de tres cosas. ¿Cuál es el objetivo de Bleach.js? ¿Por qué se creó en primer lugar? Luego hablaré sobre el marco de Bleach.js y el futuro de Bleach.

Entonces, ¿cuáles son los objetivos? El objetivo principal de Bleach.js era hacer que el desarrollo web full-stack sea lo más agradable posible. Queríamos brindarte la mejor experiencia de desarrollo en el mundo y hacerte lo más productivo posible. Con estos objetivos en mente, veamos cómo los logramos. Vamos a comenzar con una línea de tiempo, como lo que estaba sucediendo durante el desarrollo de Bleach.js, cómo comenzó y hacia dónde se dirige. En febrero de 2020, Bleach.js fue creado por Brandon con una gran ayuda de la comunidad. Luego, en los meses siguientes, recibimos toneladas de comentarios positivos, a la gente le encantó, dijeron que los hacía realmente productivos. Y también alcanzó las 11,000 estrellas en GitHub. El año pasado, en 2021, decidimos bifurcar Next.js porque queríamos ser más flexibles y conectar parte del código de Bleach.js en el código de Next.js. Desafortunadamente, no pudimos avanzar tan rápido como queríamos y las descargas semanales comenzaron a disminuir. Entonces comenzamos a pensar, ¿qué podemos hacer al respecto? ¿Cómo podemos llevar Bleach.js a aún más personas? ¿Y cómo podemos avanzar más rápido de lo que hicimos antes? Fue entonces cuando decidimos, en lugar de tener un marco, tener un conjunto de herramientas. Y en lugar de que tú decidas si usar Bleach.js o Next o Bleach.js o Remix, puedes usar el marco que elijas y algunas o todas las características de Bleach.js. Comenzamos a trabajar en eso a principios de este año y en abril, durante React Miami, Brandon anunció por primera vez el alfa de Bleach 2.0.

Entonces hablemos un poco sobre el marco, cómo se veía. El núcleo del marco era Next.js y luego teníamos autenticación y autorización integradas. Teníamos la configuración de Prisma, React Query, algunas utilidades, como por ejemplo, para analizar tus datos con Zot, teníamos recetas, una capa de API cero, que elimina la necesidad de usar Fetch API. Puedes importar tu código de servidor directamente en tus componentes de front-end. Teníamos generación de código y teníamos el código de la aplicación para que puedas ejecutar blitz new y se genere la nueva aplicación para ti. Así es como se ve. Puedes ejecutar Blitz new, mi nueva aplicación, y luego inicializamos el nuevo proyecto, inicializamos la base de datos y puedes comenzar a desarrollar. Así es como se ve justo después del comando new. Tienes un nuevo proyecto, tienes la autenticación y autorización ya allí. Puedes registrarte y luego iniciar sesión y comenzar a usar tu aplicación.

Así que ahora veamos cómo va a ser Blitz 2.0. Primero, tenemos el núcleo de Blitz. Tendrá CLI, carga de variables n, complementos y middlewares. Aquí es donde estarán las recetas y algunas utilidades. También tendremos generación de código allí. Luego tenemos un adaptador de marco Blitz.js.next, que exportará funciones GSP y GSSP que puedes usar para envolver tus sondas estáticas de git y sondas del lado del servidor en tus páginas. Y también tendrá un envoltorio para rutas de API para poder usar las características de Blitz dentro del código de tus controladores de API. Luego tenemos Auf, que tiene la misma autenticación y autorización que tenía el marco Blitz. También tiene un adaptador de pasaporte para autenticación de terceros y almacenamiento de sesión configurable. También tenemos el complemento para la capa ZeroAPI. Puedes configurar tu cliente de consulta. Exporta funciones similares a React como useQuery y useMutation que puedes usar para los resolutores de Blitz.js. Así que puedes comenzar instalando la versión Alfa y luego ejecutar Blitz new. Esta es la configuración del servidor. En Blitz server TS, declaras qué complementos quieres usar. En este ejemplo, estoy usando el complemento del servidor Alfa. En el cliente, haces casi lo mismo. Declaras qué complementos quieres usar en el cliente. Entonces, en el ejemplo en la pantalla, puedes ver que hay un complemento Alfa y un complemento Blitz RPC.

Bien, así es como se ve esta configuración. Ahora comparemos el marco Blitz y el nuevo kit de herramientas. Todas las características que estaban en el marco también estarán en el kit de herramientas, que es tu capa de API, autenticación, autorización, nuevas plantillas de aplicaciones, la generación de código, recetas. Pero en el kit de herramientas, tenemos muchas más posibilidades. Y hay muchas cosas en las que podemos empezar a trabajar. Como manejar web sockets, como trabajos programados en Chrome, colas de trabajos, integración de correo, integración de facturación, tal vez incluso una capa de datosGraphQL. Y también podemos agregar un mejor soporte para el desarrollo de aplicaciones móviles. Esa fue una breve introducción a Blitz.js. Y si quieres saber más sobre el kit de herramientas, puedes visitar el sitio web canary.blitz.js.com. Y tiene toda la documentación del nuevo kit de herramientas. Y si quieres consultar la antigua documentación del marco, puedes visitar blitz.js.com. Además, puedes consultar nuestro repositorio. Está en la organización Blitz.js bajo Blitz. Muchas gracias. Espero que hayas disfrutado de la conferencia y no dudes en comunicarte si tienes preguntas.