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.

8 min
20 Jun, 2022

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.

Available in English

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Advanced Conference 2021React Advanced Conference 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs!

Simon will introduce all the important parts & guide you through getting started with Blitz, so you'll know if you might want to use it or not.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.