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

Rate this content
Bookmark

Blitz fue creado como un framework full-stack de React, inspirado en Ruby on Rails, y con el objetivo de hacerte lo más productivo posible. Cuenta con una capa de abstracción de datos "Zero-API", autenticación y autorización integradas, y algunas características más emocionantes. Sin embargo, recientemente decidimos cambiar Blitz a un kit de herramientas independiente del framework, lo que significa un cambio enorme y emocionante para la comunidad de Blitz. Durante esta charla, presentaré los conceptos principales, hablaré sobre el por qué y el cómo del cambio, y te daré un vistazo al futuro de Blitz.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Bleach.js es un marco de desarrollo web full-stack diseñado para hacer que el desarrollo sea lo más agradable y productivo posible. Su objetivo es brindar la mejor experiencia de desarrollo posible a los desarrolladores.

Bleach.js fue creado por Brandon en febrero de 2020 con una gran ayuda de la comunidad de desarrolladores.

Desde su creación, Bleach.js recibió comentarios positivos y alcanzó 11,000 estrellas en GitHub. En 2021, se bifurcó de Next.js para integrar mejor sus características y recientemente se ha transformado en un conjunto de herramientas para ofrecer más flexibilidad y velocidad en el desarrollo.

Bleach 2.0 introduce un enfoque de conjunto de herramientas que permite a los desarrolladores elegir el marco que prefieran y combinarlo con características de Bleach.js. Incluye mejoras como un núcleo CLI, autenticación y autorización mejoradas, generación de código, y adaptadores para envolver funciones GSP y GSSP.

Puedes comenzar usando Bleach.js instalando la versión alfa y utilizando el comando 'Blitz new' para generar una nueva aplicación. Esto configura automáticamente la base de datos y te permite iniciar rápidamente el desarrollo.

Para la nueva versión de Bleach.js, puedes visitar el sitio web canary.blitz.js.com que incluye toda la documentación del nuevo conjunto de herramientas. Para la versión anterior, visita blitz.js.com. También puedes seguir y contribuir al proyecto en su repositorio en GitHub bajo la organización Blitz.js.

Aleksandra Sikora
Aleksandra Sikora
8 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bleach.js es un kit de herramientas diseñado para hacer que el desarrollo web full-stack sea agradable. Está construido sobre Next.js e incluye características como autenticación, autorización, configuración de Prisma, React Query, utilidades, recetas y generación de código. La próxima versión, Blitz 2.0, está en desarrollo. El kit de herramientas Blitz.js expande el framework principal con características adicionales como web sockets, trabajos programados, integración de correo y mejor soporte para aplicaciones móviles. Visita canary.blitz.js.com para obtener documentación sobre el nuevo kit de herramientas y blitz.js.com para la documentación del framework.

1. Introducción a Bleach.js

Short description:

Hoy voy a hablar sobre Bleach.js y cómo hace que el desarrollo web full-stack sea muy fácil. El objetivo principal de Bleach.js era hacer que el desarrollo web full-stack fuera lo más agradable posible. Decidimos tener un conjunto de herramientas en lugar de un marco, para que puedas usar el marco que elijas y algunas o todas las características de Bleach.js. El núcleo del marco era Next.js, con autenticación, autorización, configuración de Prisma, React Query, utilidades, recetas y generación de código. Blitz 2.0 es la próxima versión en la que estamos trabajando.

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.

2. Descripción general del kit de herramientas de Blitz.js

Short description:

El núcleo de Blitz incluye CLI, carga de variables n, complementos, middlewares, generación de código y más. Blitz.js.next proporciona funciones GSP y GSSP para sondas estáticas de git y sondas del lado del servidor. Auf ofrece autenticación, autorización, adaptador de pasaporte y complemento ZeroAPI. El kit de herramientas incluye todas las características del marco y agrega posibilidades como web sockets, trabajos programados, integración de correo y mejor soporte para aplicaciones móviles. Visita canary.blitz.js.com para obtener documentación sobre el nuevo kit de herramientas y blitz.js.com para la documentación del marco.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
WorkshopFree
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.