Blitz.js - El marco de trabajo React Fullstack

Rate this content
Bookmark

Blitz es un marco de trabajo hiper productivo para construir aplicaciones React Fullstack. Aprenderás por qué creé Blitz, sus ventajas y desventajas, cómo te hace tan productivo y en qué casos deberías considerar usar Blitz.

FAQ

Blitz es un framework de desarrollo para aplicaciones de React de pila completa que busca simplificar el desarrollo eliminando la necesidad de una API separada. Su objetivo principal es mejorar la productividad, permitiendo que los desarrolladores se enfoquen en construir características sin gestionar múltiples servicios o servidores.

Blitz utiliza Prisma 2 para la comunicación con la base de datos, lo cual permite definir un esquema y generar un cliente de TypeScript, facilitando el acceso tipado a la base de datos y asegurando que los tipos fluyan desde el backend hasta el frontend.

El modelo monolítico de Blitz simplifica el desarrollo y la implementación al mantener todo el código en una sola base, reduciendo la complejidad. Además, es escalable, ya que puede ser desplegado en un entorno serverless, donde cada función puede escalar de manera independiente.

Blitz abstrae la API durante el paso de compilación, permitiendo a los desarrolladores importar directamente funciones del servidor en los componentes de React. En tiempo de compilación, estas funciones son reemplazadas por una API HTTP, simplificando el proceso sin manejar llamadas fetch o endpoints.

En Blitz, las consultas y mutaciones son funciones JavaScript asincrónicas que siempre se ejecutan en el servidor. Estas funciones reemplazan el concepto de controladores y facilitan la manipulación de datos sin la necesidad de una API tradicional.

Blitz tiene configuración de autenticación y autorización por defecto en las nuevas aplicaciones, permitiendo a los usuarios registrarse e iniciar sesión de inmediato. Además, ofrece facilidades para agregar autenticación social mediante un adaptador de Passport.js.

Sí, Blitz es 100% compatible con Next.js y ofrece incluso menos restricciones que Next.js, permitiendo a los desarrolladores integrar y utilizar características de Next.js dentro de aplicaciones Blitz sin complicaciones.

Brandon Bayer
Brandon Bayer
32 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Blitz es un marco de trabajo para construir aplicaciones React Fullstack con una arquitectura monolítica y sin capa de API. Utiliza Next.js y Prisma 2 y sigue la convención sobre configuración. La autenticación y autorización se configuran por defecto, y agregar inicio de sesión social es fácil. La comunidad de Blitz enfatiza la inclusividad y da la bienvenida a las contribuciones. El futuro de Blitz incluye un ciclo de lanzamiento estable y la visión de llevar la experiencia Zero API a los dispositivos móviles.

1. Introducción a Blitz y aplicaciones de React de pila completa

Short description:

¡Hola a todos! Hoy voy a hablar sobre Blitz y la construcción de aplicaciones de React de pila completa. Quería volver a amar el desarrollo web de pila completa y ser extremadamente productivo. Para lograr esto, sabía que necesitaba una arquitectura monolítica y sin capa de API. Inicialmente, pensé que la representación del lado del servidor era la solución, pero quería algo aún más fácil. Fue entonces cuando me di cuenta de que podía escribir funciones del lado del servidor e importarlas directamente en los componentes de React.

♪ Hola a todos, es muy emocionante comenzar el segundo día de la Cumbre de React. Tuvimos charlas increíbles ayer y estoy emocionado de hablar esta mañana sobre Blitz y la construcción de aplicaciones de React de pila completa. Así que vamos a ello.

Estuve construyendo aplicaciones de React de pila completa durante algunos años. Y felizmente soporté la complejidad y la lucha requerida para hacerlo. Y lo hice porque amaba 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 REST, con las API de GraphQL, con el árbol de estado de Momex y una serie de otros servicios y bibliotecas de API, gestionando múltiples servidores, gestionando múltiples implementaciones, etc. Cualquier cosa que se interpusiera en mi camino para construir características agotaba lentamente mi moral.

Realmente quería volver a amar el desarrollo web de pila completa. Quería ser extremadamente productivo nuevamente en la construcción de aplicaciones de pila completa. Quería centrarme en construir características en lugar de mover datos por todo el universo. Así que decidí que ya era suficiente y me propuse construir la mejor experiencia de desarrollo posible para aplicaciones de React de pila completa. Bueno, había dos cosas fundamentales que debía tener en su lugar para lograr la experiencia de desarrollo que quería. En primer lugar, debía ser monolítico. Y un monolito significa que solo hay una cosa. Todo está junto en una sola cosa, por lo que solo hay una cosa para desarrollar, solo hay una cosa para implementar, solo hay una cosa para pensar en toda su arquitectura. Y un monolito es realmente increíble. Y en mi experiencia con Ruby on Rails, llegué a apreciar realmente los beneficios de un monolito. En segundo lugar, no hay API. La capa de API en las aplicaciones de React es la mayor fuente de complejidad, dolor de cabeza, angustia, agujeros en la pared. Oh, vaya Brandon, eso es demasiado, te ralentiza más de lo que piensas. Y sabía que tenía que deshacerme de eso de alguna manera. Vale Brandon, eso suena genial, pero ¿cómo lo vamos a hacer? ¿Significa que tenemos que volver a 2004 y hacer representación del lado del servidor? Así lo pensé. Y estaba dispuesto a aceptarlo. Porque quería esta experiencia de desarrollo, sin la API, tanto que estaba dispuesto a seguir ese camino. De hecho, cuando anuncié por primera vez que estaba trabajando en Blitz, el prototipo inicial era de representación del lado del servidor. Pero los primeros colaboradores de Blitz y yo estábamos tratando de descubrir cómo sería realmente la arquitectura de Blitz. Exploramos todo tipo de cosas, modelo-vista-controlador, básicamente todo bajo el sol. Un día, estaba tumbado en una hamaca en Tailandia, pensando en esto, y me pregunté cómo sería esto si fuera fácil. Así que pensé en eso por un momento y me di cuenta de que si fuera fácil, podrías escribir funciones que se ejecuten en el servidor y luego importarlas directamente en tus componentes de React y usarlas directamente. Así que podrías usarlas sin hacer llamadas fetch o puntos finales de API o HTTP o algo así.

2. Factores clave, características y principios de Blitz

Short description:

Simplemente funcionaría. Y pensé, wow, eso es bastante impresionante. Esto podría ser un cambio de juego. Y resultó serlo. Ahora conoces el factor más importante que define lo que es Blitz. Next.js es un marco maravilloso que es rápido, flexible, eficiente y proporciona una gran experiencia para los desarrolladores. Prisma 2 es la forma moderna de acceder a las bases de datos, con un esquema agradable, migraciones declarativas y acceso a la base de datos completamente tipado. Blitz tiene tres factores clave: pila completa y monolítica, no se requiere una API y convención sobre configuración. También tiene siete características y principios principales: escalabilidad, no se requiere una API, convención sobre configuración, opiniones flexibles, fácil de comenzar y escalar, y estabilidad.

Simplemente funcionaría. Y pensé, wow, eso es bastante impresionante. Esto podría ser un cambio de juego. Y resultó serlo.

Bien. Ahora conoces el factor más importante que define lo que es Blitz, así que hablemos de los otros dos. Mencioné que estaba frustrado con el desarrolloweb de pila completa en realidad, pero durante todo ese tiempo hubo una cosa que constantemente se destacaba entre el desorden, y eso era Next.js. Next es un marco maravilloso. Es rápido, flexible y eficiente y proporciona una buena experiencia para los desarrolladores. Y fue tan claro que era algo perfecto para construir encima y agregar todas las otras cosas que necesitas para el desarrolloweb de pila completa.

Bien, ahora necesitamos una forma de comunicarnos con la base de datos. Y en febrero, cuando comencé con Blitz, Prisma 2 acababa de salir en beta, y era obvio que esta sería la forma moderna de acceder a las bases de datos. Y si no conoces Prisma 2, es genial porque tienes un esquema realmente agradable que puedes definir y tener migraciones declarativas a partir de ese esquema. Generas un cliente de TypeScript a partir de ese esquema, por lo que tienes acceso a la base de datos completamente tipado. Y luego en Blitz, esos tipos pueden fluir hasta tu frontend. Por lo tanto, todo está completamente tipado de principio a fin.

Muy bien, esos son los tres factores clave de lo que es Blitz. Hablemos de las siete características y principios fundamentales que definen todo lo demás que hacemos. Entonces, pila completa y monolítica, ya he mencionado eso. Quiero mencionar que un monolito moderno escala mucho mejor que, por ejemplo, Ruby on Rails. Y eso se debe a que puedes implementar Blitz en un entorno serverless. No solo en un servidor, puedes hacer ambas cosas. Pero si lo implementas serverless, todos tus puntos finales del servidor pueden escalar de forma independiente como funciones serverless. Por lo tanto, el tema de la escalabilidad con un monolito simplemente desaparece. Eso es realmente impresionante. En segundo lugar, no se requiere una API. En tercer lugar, convención sobre configuración. En cuarto lugar, opiniones flexibles en comparación con opiniones fuertes que son difíciles de contradecir. En quinto lugar, fácil de comenzar, fácil de escalar. En sexto lugar, estabilidad.

QnA

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

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React
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 es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.
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
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn