Construye aplicaciones Fullstack en tiempo récord con Blitz.js

Rate this content
Bookmark

Blitz.js es el Framework Fullstack de React. Está fuertemente inspirado en Ruby on Rails y se enfoca en hacerte lo más productivo posible. Está construido sobre Next.js y agrega todas las piezas faltantes que necesitas para construir una aplicación fullstack con una base de datos. La innovación más grande de Blitz es la nueva capa de datos "Zero-API" que abstrae la API para que no tengas que lidiar con REST o GraphQL APIs. Brandon cubrirá todas las partes importantes, para que sepas si quieres usar Blitz o no.

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

FAQ

La principal motivación para crear Blitz.js fue la frustración con la complejidad y el conglomerado innecesario al construir aplicaciones de pila completa con React, incluyendo la gestión de APIs REST, GraphQL, múltiples servidores y la gestión de estado.

Blitz.js es un framework monolítico para aplicaciones de pila completa basadas en React. Sus principales características incluyen la eliminación de la capa de API, permitiendo una interacción más directa y sencilla con la base de datos, y una arquitectura que simplifica el desarrollo al centrarse en una sola cosa para pensar, construir e implementar.

El enfoque monolítico en Blitz.js es importante porque simplifica el desarrollo al mantener todas las partes de la aplicación juntas y cohesionadas, lo que resulta en un proceso de construcción e implementación más simple y un aumento en la productidad.

En Blitz.js, la capa de API se eliminó al permitir que las funciones que se ejecutan en el servidor interactúen directamente con la base de datos, y luego se importan directamente en el código del frontend. El framework maneja la integración, haciendo que parezca como si no hubiera una capa de API.

El desarrollo de Blitz.js fue inspirado por las experiencias previas del creador con Ruby on Rails y su enfoque monolítico, así como por la creciente frustración con la complejidad en el desarrollo de aplicaciones de pila completa con React.

Blitz.js ofrece ventajas como una mayor simplicidad al ser monolítico, mayor productividad al eliminar la necesidad de manejar una API separada, y una integración más directa y sencilla con la base de datos, lo que reduce la complejidad y el tiempo de desarrollo.

Brandon Bayer
Brandon Bayer
32 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador quería crear la mejor experiencia de desarrollo para aplicaciones fullstack de React simplificando el proceso de desarrollo y eliminando la capa de API. Se inspiraron en el renderizado del lado del servidor en Ruby on Rails y querían lograr algo similar con React. Anunciaron Blitz con un prototipo renderizado en el lado del servidor pero querían mejorarlo. Visualizaron una solución simple donde una función del servidor se comunica directamente con la base de datos y se importa en el código del frontend, con el framework manejando la capa de API.

1. Building the Best Developer Experience

Short description:

Quería crear la mejor experiencia posible para desarrolladores en aplicaciones de React de pila completa. Tenía que ser monolítico, simplificando el proceso de desarrollo al tener una sola cosa en la que pensar, construir y implementar. También quería eliminar la capa de API en las aplicaciones de React, que a menudo agrega complejidad y ralentiza el desarrollo. Me inspiré en el renderizado del lado del servidor en Ruby on Rails y quería lograr algo similar con React. Anuncié Blitz con un prototipo inicial renderizado en el lado del servidor, pero no quedé satisfecho. Quería amar lo que usaba en mi trabajo diario. Así que imaginé una solución simple de una función en el servidor que se comunica directamente con la base de datos, importada directamente en el código del front-end. El framework se encargaría de la capa de API, facilitando el desarrollo para el usuario.

hola. Estoy muy emocionado de mostrarte blitz.js. Vamos a ello. Estuve construyendo aplicaciones de react durante varios años, aplicaciones de pila completa de react, y felizmente soporté la complejidad y la lucha requerida para hacerlo. Y lo hice porque me encantaba construir interfaces de usuario con react más que cualquier otra forma.

Pero la luna de miel terminó y me frustré cada vez más con toda la complejidad. Cosas como APIs REST, APIs graphQL, múltiples servidores, implementaciones, gestión de estado, configuración, bibliotecas, herramientas, todo, cualquier cosa que se interpusiera en el camino de construir características agotaba mi moral. Realmente quería volver a amar el desarrollo de pila completa. Quería ser extremadamente productivo de nuevo. Quería centrarme en construir características en lugar de toda esta otra configuración y conglomerado innecesario en mi aplicación.

Así que decidí que ya era suficiente y me propuse construir la mejor experiencia para desarrolladores posible en aplicaciones de pila completa de react. Así que había dos cosas que realmente quería tener para esta experiencia. En primer lugar, tenía que ser monolítico. Monolítico significa que hay una sola cosa en la que pensar, una sola cosa en la que construir, una sola cosa en la que implementar. Todo está junto y cohesionado, y es mucho más simple. Me adentré en el desarrollo web a través de Ruby on Rails, que es monolítico. Y conozco los beneficios de productividad que se obtienen de eso. Y quería volver a eso. En segundo lugar, quería eliminar la API. La capa de API en las aplicaciones de React es una de las mayores fuentes de complejidad, confusión, dolor de cabeza, angustia, simplemente dolor. Y así quería deshacerme de eso. Es increíble. No nos damos cuenta de cuánto nos ralentiza esa capa de API hasta que ya no la tenemos. Y luego dices, wow, esto es increíble. Y así que sabía cómo era eso gracias a Ruby on Rails, no hay API, puedes comunicarte directamente con tu base de datos desde tu vista si lo deseas, no se recomienda, pero puedes hacerlo. Y esto era muy importante.

Pero, ¿cómo puedes lograr esto con React? En ese momento, cuando comencé con Blitz. Hace unos 14 o 15 meses, estaba pensando cómo podríamos hacer esto. La única forma que conocía era el renderizado del lado del servidor. Y así, bueno, pensé que podríamos hacer esto. En ese momento, Next.js acababa de agregar el obtener props del lado del servidor y parecía que sería un buen enfoque. Así que cuando anuncié Blitz por primera vez, dije, bien, aquí está. Lo que es, tenía un prototipo inicial que se renderizaba en el lado del servidor, pero no me encantaba, no me encantaba. Y eso era importante para mí. Quería, quería amar lo que estoy usando en mi día, en mi trabajo diario, ¿sabes? Así que yo y los otros primeros colaboradores de Blitz estábamos discutiendo esto, hablando de cómo se vería la arquitectura. ¿Sería un modelo vista controlador? ¿Sería, qué sería? Y un día estaba tumbado en una hamaca en Tailandia, reflexionando sobre esto y me pregunté, ¿cómo sería esto si fuera fácil? Mientras estaba allí soñando con lo que podría ser, ¿qué sería fácil? Tuve esta imagen en mi imaginación de solo una función que se ejecuta en el servidor, que se comunica con la base de datos e importa directamente esa función en mi código del front-end, mis componentes de react. Y luego el framework haría que esa cosa funcionara mágicamente, realmente pondría una capa de API allí. Pero el usuario no tendría que lidiar con eso. Y así pensé, wow, esa es una idea genial. Me pregunto si puedo hacer que funcione. Y resulta que lo logramos.

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

Un vistazo al futuro del desarrollo full-stack con Blitz.js
Node Congress 2022Node Congress 2022
32 min
Un vistazo al futuro del desarrollo full-stack con Blitz.js
Today's Talk focused on the future of full-stack web development with Blitz.js. Blitz is a React framework built on top of Next.js, offering direct database access and authentication with authorization. The core features of Blitz include the zero-API layer and the ability to run server code directly from the frontend. The future of Blitz includes expanding to other frameworks and runtime environments. The new Blitz toolkit will be decoupled from any specific framework, allowing developers to choose their preferred foundation. It will retain the core value of Blitz while adding additional features like JWT authentication and advanced data-aware authorization. The migration to the new toolkit will be seamless for existing Blitz projects. The Blitz toolkit will have a plugin system for customization and support multiple resolvers. The Blitz project is currently going through a pivot and will focus on the Blitz toolkit. The goal is to release the toolkit by the end of March. The most exciting part of the toolkit is the plugin system design that allows users to customize their experience.
Cómo Blitz.js hace que el desarrollo web full-stack sea muy fácil
JSNation 2022JSNation 2022
8 min
Cómo Blitz.js hace que el desarrollo web full-stack sea muy fácil
Bleach.js is a toolkit designed to make full-stack web development enjoyable. It is built on top of Next.js and includes features like authentication, authorization, Prisma setup, React Query, utilities, recipes, and code scaffolding. The upcoming version, Blitz 2.0, is being worked on. Blitz.js toolkit expands on the core framework with additional features like web sockets, scheduled jobs, mailers integration, and better mobile app support. Visit canary.blitz.js.com for documentation on the new toolkit and blitz.js.com for framework documentation.
Blitz.js - El marco de trabajo React Fullstack
React Summit 2020React Summit 2020
32 min
Blitz.js - El marco de trabajo React Fullstack
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
El Amanecer de una Nueva Era para React Fullstack
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
El Amanecer de una Nueva Era para React Fullstack
React has evolved over the years, introducing breakthroughs like the declarative component model and React hooks. Create React App and Next.js abstracted away webpack config and routing, improving developer productivity. GraphQL backend as a service platforms made it easy to set up a backend without extensive knowledge. Blitz.js and Redwood.js are game-changing batteries included frameworks for full stack React development. They aim to make backend development easier for front end developers and optimize full stack productivity.

Workshops on related topic

Construye aplicaciones Fullstack en tiempo récord con Blitz.js
React Advanced 2021React Advanced 2021
67 min
Construye aplicaciones Fullstack en tiempo récord con Blitz.js
Workshop
Simon Knott
Simon Knott
Blitz.js es el Framework Fullstack de React. Está fuertemente inspirado en Ruby on Rails y se enfoca en hacerte lo más productivo posible. Está construido sobre Next.js y agrega todas las piezas faltantes que necesitas para construir una aplicación fullstack con una base de datos. La mayor innovación de Blitz es la nueva capa de datos "Zero-API" que abstrae la API para que no tengas que lidiar con APIs REST o GraphQL!

Simon presentará todas las partes importantes y te guiará en cómo empezar con Blitz, para que puedas decidir si quieres usarlo o no.