Blitz.js - El marco de trabajo React Fullstack

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

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.

3. Blitz API Layer and Architecture

Short description:

Abstraemos la capa de API en un paso de compilación, reemplazándola por una API HTTP en tiempo de compilación. Blitz utiliza consultas y mutaciones, funciones asincrónicas de JavaScript simples que se ejecutan en el servidor. Siempre puedes agregar una API a una aplicación Blitz, ya que tenemos menos restricciones que Next.js. La arquitectura permite tanto páginas renderizadas en el lado del servidor como en el lado del cliente, utilizando el mismo código del servidor. La convención sobre la configuración significa que la mayoría de la configuración se realiza por ti, lo que ahorra tiempo al comenzar un nuevo proyecto.

Y en séptimo lugar, community sobre código. Bien, hablemos un poco de esta capa de API y veamos cómo lo hacemos y cómo funciona. Abstraemos la API en un paso de compilación. Entonces, mientras desarrollas tu aplicación, como mencioné, no haces nada relacionado con la API, simplemente importas las funciones del servidor en tu frontend y luego en tiempo de compilación las reemplazamos por una API HTTP. Y así obtienes renderizado en el lado del cliente, pero sin ninguna complicación de la API.

Y cómo haces eso en una aplicación Blitz es lo que llamamos consultas y mutaciones. Ahora esto no tiene nada que ver con GraphQL, simplemente usamos la misma nomenclatura y son funciones asincrónicas JavaScript simples que siempre se ejecutan en el servidor. Si estás familiarizado con Ruby y Rails, o Laravel, el concepto de controlador, básicamente se reemplaza por consultas y mutaciones. Por supuesto, siempre puedes agregar una API a una aplicación Blitz porque no tenemos ninguna restricción que te impongamos. Así que somos 100% compatibles con Next.js. De hecho, tenemos menos restricciones que Next.js. Así que no tienes que preocuparte de que Blitz se interponga en tu camino. Muy bien, veamos aquí un diagrama de arquitectura para darte una idea aproximada de cómo encaja todo esto. A lo largo de la parte superior está el código del lado del cliente, a lo largo de la parte inferior está el código del lado del servidor. Y las cajas moradas son páginas, páginas de React. Y puedes ver que en una sola aplicación puedes tener una página renderizada en el lado del servidor y una página renderizada en el lado del cliente una al lado de la otra. Y pueden usar el mismo código del servidor. Las cajas verdes en la parte inferior son una consulta y una mutación. Y ambas páginas usan la misma consulta. Y luego, en el momento de la compilación, esta capa intermedia se inserta automáticamente para ti, que es una API JSON HTTP. Por lo tanto, todas tus consultas y mutaciones están expuestas en una URL única. Y puedes usarla directamente para aplicaciones móviles o terceros o cualquier otra cosa.

Bien. Hablemos de la convención sobre la configuración. Esto significa que, de forma predeterminada, las cosas simplemente funcionan. Y no significa que no haya configuración. Simplemente significa que la configuración es opcional. Por lo tanto, la mayoría de las cosas aburridas están completamente hechas por ti desde el principio. Y especialmente puedes ver mucho de esto como un principio cuando generas una nueva aplicación. Porque tiene muchas cosas configuradas para ti, básicamente todas las cosas que configurarías en la primera semana aproximadamente de un nuevo proyecto.

4. Configuración de Autenticación y Autorización en Blitz

Short description:

Incluimos ESLint, Gear, Jest, Husky githooks y más, ya configurados para ti. La autenticación y autorización están configuradas por defecto en las nuevas aplicaciones, lo que te permite registrarte e iniciar sesión como usuario de inmediato. Agregar inicio de sesión social es fácil con el adaptador Passport.JS.

Todo eso está hecho. Así que incluimos ESLint, Gear, Jest, Husky githooks y varias otras cosas ya configuradas para ti. Ahora, lo más importante y realmente impresionante es que la autenticación y autorización están configuradas por defecto en las nuevas aplicaciones. Esto significa que cuando ejecutas 'Blitz new' con el nombre de tu aplicación y generas una nueva aplicación, puedes registrarte e iniciar sesión como usuario de inmediato. ¿Y no es eso increíble? No tienes que hacer nunca más cosas de autenticación para tantos proyectos porque lo obtienes de forma predeterminada con Blitz. Y luego, si quieres agregar inicio de sesión social, tenemos un adaptador de Passport.JS que puedes agregar fácilmente en un solo archivo, y de manera muy sencilla agregar inicio de sesión con GitHub u cualquier otro tipo de autenticación para la cual haya un adaptador de Passport.js disponible.

5. Código: Mutación de Registro y Consulta de Proyecto Git

Short description:

Esta parte cubre una mutación de registro que se ejecuta en el servidor, utilizando Zod para la validación de entrada y Prisma 2 para las operaciones de base de datos. También explica cómo utilizar esta función en un formulario de registro y la simplicidad del proceso. Otro tema discutido es la consulta de proyectos de git.

Bien, vamos a ver algo de código. Muy bien, entonces esta es una mutación de registro que siempre se ejecuta en el servidor. Y básicamente esto es lo que obtendrás en una nueva aplicación de forma predeterminada. Esto se generará para ti. Entonces, puedes ver que exportamos una función asincrónica predeterminada. Y el primer argumento de eso es el argumento de la mutación. Y el segundo es un parámetro de contexto. Y este parámetro de contexto es proporcionado por el middleware y Blitz. Y por defecto tienes un middleware configurado, que es el middleware de sesión. Y eso es una sesión integrada de gestión de Blitz. Ok, y dentro de esta mutación, lo primero que vamos a hacer es validar la entrada. Y usamos una biblioteca llamada Zod que es realmente increíble tanto para runtime validation como para los tipos de TypeScript. Así que tienes la garantía de que después de esta línea, el correo electrónico y la contraseña son cadenas, y la contraseña tiene una longitud mínima. Ok, y luego vamos a cifrar la contraseña y luego vamos a crear un usuario en la database. Y este objeto db es proporcionado por Prisma 2. Y así puedes ver lo fácil que es crear un usuario. Así que correo electrónico, una contraseña, y obtienes ese usuario de vuelta. Y luego, en segundo lugar, lo último que hacemos antes de devolver es crear una nueva sesión, que es cómo inicias sesión. Y puedes establecer el ID de usuario, roles, cualquier otra cosa que necesites allí para usar en el frontend. Ok, bastante simple. Ahora, ¿cómo lo usamos? Bueno, importas esta función directamente en tu componente. Y así aquí está el formulario de registro. Y puedes ver que importamos, está en la 5ª línea creo, importamos esa función que acabamos de ver. Y la pasamos al gancho de uso de mutación dentro del componente. Y luego simplemente podemos usar esa mutación dentro del gancho de envío propio. Y simplemente lo llamas esperar como una función regular allí. Y simplemente funciona para ti. Muy elegante. Muy bien, veamos otro. Esta es una consulta de proyecto git.

6. User Authentication, Community, and Contributions

Short description:

En esta parte, discutimos cómo garantizar la autenticación y autorización de usuarios en Blitz. También cubrimos el uso del gancho useQuery, que simplifica el proceso de obtención de datos. Comenzar con Blitz es tan fácil como instalarlo globalmente como una CLI y ejecutar Blitz new para generar tu aplicación. Enfatizamos la importancia de la comunidad y tratar a cada persona con dignidad y valor. Invitamos contribuciones en forma de código, documentación, tutoriales y más. También se agradecen las donaciones y patrocinios.

Entonces, puedes ver nuevamente que obtenemos algunas entradas y luego el parámetro de contexto. Y lo primero que hacemos en este caso es llamar a session.authorized. Y esto se asegurará de que el usuario haya iniciado sesión. Si no lo está, lanzará un error. Y ese error se propagará hasta el frontend y mostrará un formulario de inicio de sesión si no han iniciado sesión o lo mostrará en una página no autorizada si no cumplen con la regla requerida. Y, por supuesto, puedes personalizarlo como quieras. Pero esa es la configuración predeterminada. Entonces encontramos el proyecto y si no lo encontramos, no obtenemos el proyecto y lanzamos un error de no encontrado y nuevamente eso se propaga al frontend y muestra una página 404.

Bien, usemos esto. Simplemente importamos esta función en tu componente. Y dentro de este componente de proyecto, lo primero que hacemos es obtener el parámetro de la ruta. Entonces esto es project ideas. Un parámetro dinámico que obtienes de la URL y luego tenemos un gancho useQuery al que le pasas esa función de consulta que acabamos de ver, se la pasas a useQuery y luego el segundo parámetro es el argumento donde id es igual al id de esta ruta y luego obtienes eso y simplemente lo renderizas. Ahora, una cosa a tener en cuenta aquí es que tenemos el modo concurrente habilitado en Blitz de forma predeterminada, por lo que estás usando suspense, que es realmente increíble. Entonces puedes ver en este componente que no tenemos todo este baile de if else de si está cargando muestra la carga, si hay un error muestra el error, si hay algo más muestra algo, lo cual es muy simple y realmente genial. Y luego, en el componente de página hacia la mitad inferior de la pantalla, puedes ver que tenemos el componente suspense y el fallback para el error, por lo que es una API realmente agradable. UseQuery se basa en react-query y react-query proporciona muchas cosas increíbles que obtienes de forma predeterminada aquí, como el almacenamiento en caché de todos tus datos del servidor, la validación, la actualización, todas estas cosas realmente poderosas y simplemente las obtienes de forma predeterminada.

De acuerdo, ¿cómo empiezas con Blitz? Bueno, es bastante sencillo, solo hay dos comandos y lo primero es instalar Blitz globalmente como una CLI y luego, en segundo lugar, ejecutar Blitz new y pasarle el nombre de tu aplicación y eso es todo. Y simplemente generará tu aplicación, instalará tus dependencias, etc., y luego, como mencioné, puedes registrarte e iniciar sesión de inmediato como usuario y es increíble.

Bien, hablemos de la comunidad en lugar del código, este es uno de nuestros principios fundamentales. Las personas son mucho más importantes que cualquier otra cosa y estos son principios que valoramos mucho en la comunidad de Blitz, pero también son principios que nosotros, como comunidad tecnológica en general, realmente abrazamos y vivimos. En segundo lugar, tratamos a cada persona con dignidad y valor, independientemente de quiénes sean, cuáles sean sus creencias, cada persona merece dignidad y valor. Todos estamos juntos en esto, todos queremos ser productivos, todos queremos divertirnos en nuestros trabajos y todos somos más similares de lo que somos diferentes, por lo que podemos y debemos resolver problemas juntos. Tenemos una página completa en nuestra documentación vinculada aquí que detalla cómo opera la comunidad de Blitz, repasaremos prácticamente todo para que puedas tener una buena idea si quieres involucrarte en la comunidad de Blitz o no, si quieres ver cómo funcionan las cosas, ese es un buen lugar para hacerlo.

De acuerdo, ahora hablemos de cómo puedes contribuir a Blitz. Necesitamos tu ayuda, nos encanta toda la ayuda que podamos obtener, tenemos muchas características en nuestro repositorio de GitHub listas para trabajar, pero simplemente están esperando a que alguien trabaje en ellas. Estoy trabajando principalmente a tiempo completo en Blitz y luego haciendo consultoría en el lado. Hasta ahora, estoy contribuyendo con la mayor parte, pero nos encantaría que cualquier otra persona ayudara en su tiempo libre tanto como pueda. Apreciamos cualquier tipo de contribución, ya sea código, documentación, mejorar la documentación, tutoriales, videos, publicaciones de blog, cualquier cosa que se te ocurra. En segundo lugar, se agradecen las donaciones y patrocinios, mi objetivo es trabajar a tiempo completo en Blitz sin tener que hacer consultoría en el lado y luego, además de eso, me encantaría pagar a otras personas para que trabajen a tiempo completo en Blitz también. Me encantaría cualquier tipo de donación o patrocinio que puedas brindarnos a través de GitHub. Hay un botón en nuestro repositorio de GitHub.

QnA

Blitz Documentation and Community

Short description:

El mejor lugar para comenzar con Blitz es la documentación de blitzjs.com. Sigue a Flybear y Blitzjs en Twitter para obtener más actualizaciones. No dudes en comunicarte si tienes alguna pregunta o quieres compartir tu experiencia con Blitz. El plan actual es cambiar al estado beta en la próxima semana o dos, con el objetivo de alcanzar la versión 1.0 para finales de este año o principios del próximo año. La comunidad de Blitz está compuesta por miembros del equipo central, mantenedores y un gran número de colaboradores. Mantener Blitz implica dedicar aproximadamente 30 horas por semana en promedio, además de trabajar como consultor. Un día típico incluye responder preguntas en Blitz Slack y trabajar en el desarrollo de Blitz.

Y luego, en segundo lugar, el mejor lugar para comenzar aquí es esta documentation de blitzjs.com, que está enlazada aquí. Así concluye el final de mi presentación. blitzjs.com es el mejor lugar para ir a comenzar allí, puedes seguirme en Twitter como Flybear y también a Blitzjs en Twitter. Me encantaría responder tus preguntas ahora y en cualquier momento más tarde en Twitter, cualquier cosa, solo contáctame, estaré encantado de ayudar a responder preguntas y me encantaría que probaras Blitz y me cuentes cómo te va. Muchas gracias.

Increíble, bienvenido. Muchas gracias por tu charla. Voy a pasar directamente a algunas preguntas. En primer lugar, felicidades por Blitz, parece que va muy bien. ¿Cuándo será la versión 1.0? Así que actualmente lo estamos discutiendo. Actualmente estamos en estado alpha, pero estamos discutiendo cambiar al estado beta probablemente en una o dos semanas. Así que nos estamos acercando. Ahora que básicamente estamos casi en estado beta, nos enfocamos en pulir los detalles, solucionar errores, agregar más pruebas y todas esas cosas para llegar a la versión 1.0. Así que no hay cambios importantes planeados. Con suerte, hacia finales de este año o principios del próximo año, seremos 1.0, veremos cómo se desarrolla. Hablaste un poco sobre la comunidad, pero ¿podrías contarnos un poco más sobre quiénes están involucrados y cómo lo estás gestionando? Claro. Además de mí, hay otros dos miembros del equipo central, Rudy y Dylan. Y luego creo que ahora tenemos alrededor de tres mantenedores de nivel dos, y los mantenedores de nivel dos tienen la responsabilidad de una parte específica del código y ayudan a gestionar la revisión de las solicitudes de extracción y su fusión. Luego hay alrededor de ocho mantenedores de nivel uno que nos ayudan en la comunidad, respondiendo preguntas, etc. Y luego hay una gran cantidad de otros colaboradores. Creo que ahora somos más de 120 personas en total que han contribuido de alguna manera a Blitz, ya sea con código, documentación, etc. Así que es una gran comunidad. Todos nos divertimos mucho y cualquier persona es bienvenida para venir y ayudar a contribuir.

Esto es realmente increíble. Estás dedicando tiempo completo a esto, creo que mencionaste. ¿Cómo es la vida como mantenedor en el código abierto? Claro. Actualmente, dedico aproximadamente 30 horas por semana en promedio a Blitz y luego otras 20 o 25 por semana haciendo consultoría para mantenerme. Así que un día típico se ve así. Me despierto, reviso Blitz Slack y respondo preguntas, reviso algunas cosas y luego hago trabajo de consultoría para pasar la primera parte del día, y cuando me aburro de eso, cambio y hago cosas de Blitz durante el resto de la tarde.

Blitz Resources, API Compatibility, and Future

Short description:

Algunos de la audiencia quieren saber si tú o tu comunidad tienen buenos recursos para alguien que tal vez no haya contribuido antes al código abierto y quiera comenzar. Tenemos una página de Cómo Contribuir en nuestra documentación y tratamos de explicarlo de manera muy clara. Ese es el mejor lugar para comenzar y luego te guiamos sobre cómo clonar el repositorio de Blitz y qué tipo de cosas puedes trabajar. Tenemos una serie de problemas etiquetados como listos para trabajar y también los etiquetamos como buen primer problema y buen segundo problema. Así que esos son buenos lugares para ver, ok, esto es algo que puedo hacer. ¿Cómo te involucraste en Blitz? ¿Tuviste una mala experiencia con una API y dijiste que nunca más querías hacer esto? Comencé a desarrollar aplicaciones web con Ruby on Rails en 2014. Aprendí Ruby on Rails y fue bastante fácil hacer cosas de pila completa. Luego pasé a React y me encantó, pero luego tuvimos toda esa capa de API que lo hace mucho más complejo que Ruby on Rails. Finalmente, decidí que era suficiente y necesitábamos tener ese mismo tipo de experiencia fácil y simple de pila completa que obtienes con Ruby on Rails o Laravel o Django y llevarlo a React. ¿Es Blitz.js adecuado si tienes una API compartida que es consumida por múltiples plataformas, como iOS, Android, Nativo y JavaScript? Sí, absolutamente puedes hacer eso con Blitz. Puedes hacerlo como lo harías normalmente con Next.js, por ejemplo, simplemente conectándote a la API desde el cliente. Otra forma de hacerlo es usar consultas y mutaciones de Blitz y comunicarte con la API desde el servidor y luego usar la capa de datos de la API de Blitz para gestionarlo. ¿Hay algo para lo que Blitz no sea adecuado y cuándo no lo usarías? Blitz probablemente no sea adecuado para construir algo tan masivo como el núcleo de Facebook. Pero es realmente genial para prototipar en este momento y para creadores, emprendedores independientes y nuevas startups. ¿Tienes alguna visión futura para Blitz, como cómo se vería una versión 2.0 o una 5? Buena pregunta.

Eso es increíble. Algunos de la audiencia quieren saber si tú o tu comunidad tienen buenos recursos para alguien que tal vez no haya contribuido antes al código abierto y quiera comenzar. Tenemos una página de Cómo Contribuir en nuestra documentación y tratamos de explicarlo de manera muy clara, como primer paso, tenemos un enlace al video de Kent C. Dodd en egghead sobre cómo comenzar con el código abierto. Así que ese es el mejor lugar para comenzar y luego te guiamos sobre cómo clonar el repositorio de Blitz y qué tipo de cosas puedes trabajar. Tenemos una serie de problemas etiquetados como listos para trabajar y también los etiquetamos como buen primer problema y buen segundo problema, y muchas veces los buenos primeros problemas son realmente fáciles, como cambiar una palabra o algo muy simple, muchas veces se solucionan en una hora desde que los publicamos, así que solo tienes que estar atento al repositorio. Eso es genial, apuesto a que algunos otros mantenedores están un poco celosos en este momento. ¿Cómo te involucraste en Blitz? ¿Tuviste una mala experiencia con una API y dijiste que nunca más querías hacer esto? Así que hablé un poco de eso en la charla, pero comencé a desarrollar aplicaciones web con Ruby on Rails en 2014, creo que fue cuando comencé a aprender programación web porque antes hacía C y C++. Aprendí Ruby on Rails y fue bastante fácil hacer cosas de pila completa, luego pasé a React y me encantó, pero luego tuvimos toda esa capa de API que lo hace mucho más complejo que Ruby on Rails, y finalmente decidí que era suficiente y necesitábamos tener ese mismo tipo de experiencia fácil y simple de pila completa que obtienes con Ruby on Rails o Laravel o Django y llevarlo a React. ¿Extrañaste Ruby on Rails? Sí y no. Hay muchas cosas que me gustaban de Ruby on Rails, especialmente cómo no hay una API allí, pero también hay muchas cosas que no me gustaban. Me gusta JavaScript y TypeScript mucho más que Ruby, así que mi objetivo es tomar todo lo bueno de Rails en mi opinión y dejar fuera todo lo malo. Creo que lo hemos logrado bastante bien. La semana pasada, uno de los desarrolladores de Blitz había estado usando Blitz durante un par de meses y dijo que había estado desarrollando aplicaciones de Ruby on Rails profesionalmente durante 10 años y ahora, después de solo unos meses con Blitz, ya es 10 veces más productivo que nunca con Ruby on Rails. Así que eso es algo sorprendente. Eso es genial, sí. Genial. Bueno, tenemos una pregunta de Oakley en el chat, ¿es Blitz.js adecuado si tienes una API compartida que es consumida por múltiples plataformas, como iOS, Android, Nativo y JavaScript? Sí, así que supongo que tienes una API existente a la que quieres conectarte y absolutamente puedes hacer eso con Blitz. Puedes hacerlo como lo harías normalmente con Next.js, por ejemplo, simplemente conectándote a la API desde el cliente, o la otra forma de hacerlo es usar consultas y mutaciones de Blitz y comunicarte con la API desde el servidor y luego usar la capa de datos de la API de Blitz para gestionarlo, y al hacerlo, puedes usar la gestión de sesiones de Blitz, que es muy fácil e integrada en lugar de tener tu propia autenticación de alguna manera. Así que depende totalmente de ti, totalmente flexible. Eso es bueno. La flexibilidad es importante. No sé si te hacen esta pregunta con frecuencia, pero es un clásico. ¿Hay algo para lo que Blitz no sea adecuado y cuándo no lo usarías? Nuestra especie de lema o objetivo es ser el framework para el 99% de nosotros que trabajamos en empresas con menos de 100 empleados. Así que Blitz probablemente no sea adecuado para construir algo tan masivo como el núcleo de Facebook. Simplemente es demasiado complejo para algo tan grande, pero puedes comenzar la próxima Facebook con Blitz y definitivamente crecerá contigo y terminarás necesitando crear otros servicios alrededor.

Blitz Future and Updates

Short description:

Blitz es excelente para prototipar y construir aplicaciones SaaS de producción. La visión es llevar la experiencia Zero API a dispositivos móviles, permitiendo una aplicación multiplataforma sin problemas. Next.js se enfoca en soluciones universales de nivel inferior, mientras que Blitz es más opinativo con una capa de base de datos. Las actualizaciones en Blitz se manejan mediante la actualización de la dependencia de Blitz.

Eso. Pero es realmente genial para prototipar en este momento y también tenemos muchas personas que están construyendo aplicaciones SaaS de producción. Entonces, cualquier tipo de aplicación en la que necesites tener un inicio de sesión, una base de datos y te conectes a ella, es realmente genial para eso. Y especialmente para creadores, emprendedores independientes y nuevas startups, es realmente genial. Genial. ¿Tienes, tal vez no oficialmente, pero en tu cabeza, una buena visión futura para Blitz? ¿Cómo se vería una versión 2.0 o una 5? Buena pregunta. Lo más importante, y realmente lo principal en lo que tengo una visión, es tener la misma experiencia Zero API que tenemos ahora con la web y llevar eso a dispositivos móviles, por ejemplo, con React Native. Hoy en día puedes usar Blitz con aplicaciones móviles. Puedes conectarte a los puntos finales de la API generada y usarla normalmente. Tenemos algunas personas que están trabajando en eso. No tienes esa experiencia Zero API. Sigues haciendo las llamadas o lo que necesites hacer desde el móvil. Lo primero que podemos hacer para eso es generar un cliente de API y eso es relativamente sencillo. Podemos hacerlo para varios lenguajes diferentes, por lo que facilita tener un cliente con tipos y comunicarse fácilmente con el backend de Blitz. Luego, incluso más allá de eso, quiero tener un soporte donde tengas un monorepo en el que tengas tu aplicación web Blitz normal y también una aplicación React Native en el mismo repositorio, y luego puedes importar tus consultas y mutaciones de Blitz directamente en tu código React Native y luego lo cambiaríamos en tiempo de compilación para que sea el mismo tipo de cliente de API que hacemos con la web. Así que queremos llevar eso a dispositivos móviles. Estoy bastante seguro de que eso es posible, podemos hacerlo de alguna manera, pero eso definitivamente está un poco más adelante en el roadmap, pero eso sería realmente genial para que tengas esta aplicación multiplataforma completa, aplicación web, aplicación móvil, sin lidiar con REST o GraphQL o cualquier otra cosa. Blitz en todas partes. Eso es el espíritu, ¿verdad? Metin del chat quiere saber, ¿alguna vez has considerado agregar algunas de estas características a Next.js, ya que también es de código abierto? El equipo de Next.js es bastante claro al respecto, están resolviendo los problemas, el alcance en el que están ahora, quieren mantenerlo, donde es relativamente mínimo y están resolviendo problemas que son prácticamente universales, como cosas de nivel inferior, trabajando en RFC para internacionalización, RFC para un componente de optimización de imágenes. Entonces, estas son cosas fundamentales de nivel inferior, pero donde Blitz es un poco más opinativo. Tenemos la capa de base de datos, la capa de datos de pila completa. Entonces, no quieren ir por ese camino de opiniones. Creo que funciona bien porque hay muchas personas que quieren ese nivel inferior y quieren traer todas sus propias opiniones y crear su pila perfecta al final. Pero también hay otras personas para las que Blitz es bueno, que no quieren pasar una o dos semanas eligiendo bibliotecas y configurando cosas y conectándolas. Solo quieren construir algo. Bastante justo. Dennis quiere saber, estoy un poco curioso acerca de cómo se manejarían las actualizaciones de Blitz en el proyecto que utiliza Blitz. Como si en algún momento se va a cambiar alguna biblioteca subyacente. Ahora mismo, Blitz, hay una dependencia, actualizas Blitz y listo.

Blitz Editing Changes, Release Cycle, and Recipes

Short description:

Ahora puedes realizar cambios de edición y consultar las notas de lanzamiento para obtener actualizaciones. Después de alcanzar la versión 1.0, se implementará un ciclo de lanzamiento estable y predecible inspirado en Ember. Las Recetas de Blitz permiten una fácil instalación de código de terceros y hay planes para habilitar actualizaciones automáticas con 'blitz install blitz'. Gracias, Brandon, por unirte a nosotros.

Ahora puedes realizar algunos cambios de edición, que ocasionalmente hay. Solo tienes que consultar las notas de lanzamiento y realizar ese cambio. Luego, después de llegar a la versión 1.0, vamos a implementar un ciclo de lanzamiento realmente estable y predecible inspirado en Ember. Como lo hace Ember, cada seis semanas hay un nuevo lanzamiento estable. Luego también hay un lanzamiento LTS que se lanza cada seis meses. El próximo lanzamiento está en beta durante seis semanas. Eso es estable y es poco probable que tenga errores en la versión final. Y los cambios que rompen la compatibilidad se manejan correctamente con deprecaciones. Planeamos hacer eso.

También tenemos algo llamado Recetas de Blitz, que creo que no mencioné en mi charla. Es un comando para instalar cualquier tipo de código de terceros. Puedes hacer blitz install TEOWIN, blitz install Chakra, blitz install Emotion. Tenemos algunas de esas, todavía las estamos desarrollando. Eso es otra cosa realmente increíble. A donde iba con eso es que eventualmente podríamos tener blitz install blitz. Y actualizaría blitz automáticamente por ti. Eso es realmente genial. Se nos acabó el tiempo, Brandon, pero muchas gracias por pasar por aquí. Todos pueden encontrar a Brandon en el Discourse o más tarde en las salas. ¡Gracias! ¡Gracias! www.microsoft.com www.microsoft.com www.microsoft.com Microsoft www.microsoft.com Microsoft www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com

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 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
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.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
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.

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 Workshop
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 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
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.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
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.