Un vistazo al futuro del desarrollo fullstack con Blitz.js

Rate this content
Bookmark

Blitz fue creado como un framework fullstack de React, inspirado en Ru 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 listas para usar, y algunas características más emocionantes. Sin embargo, recientemente decidimos cambiar Blitz a un conjunto de herramientas agnóstico de 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.


Puedes ver las diapositivas de la charla de Aleksandra aquí.

32 min
18 Feb, 2022

Video Summary and Transcription

La charla de hoy presentó Bleeds.js, un framework fullstack de React construido sobre Next.js. Elimina la necesidad de una capa de API, permitiendo que el código del servidor se ejecute directamente desde el frontend. El framework Blitz está cambiando hacia un conjunto de herramientas agnóstico de framework para atraer a más personas a Bleeds y desacoplarlo de cualquier tiempo de ejecución específico. El nuevo conjunto de herramientas de Bleed incluirá características principales como una capa de datos de API cero y autenticación, con características adicionales como autenticación JWT y autorización avanzada basada en datos. La audiencia mostró interés en el concepto de cambio de Blitz y la fecha estimada para el lanzamiento estable 1.0 es finales de marzo.

Available in English

1. Introducción a Bleeds.js

Short description:

Hoy hablaré sobre el futuro del desarrollo web full-stack con Bleeds.js. Bleeds es un framework de React full-stack construido sobre Next.js. Incluye acceso directo a la base de datos, middlewares, autenticación con autorización. Uno de los conceptos principales es que Bleeds es monolítico. La característica más importante es la capa de API cero, que te permite ejecutar código del servidor directamente desde tu frontend.

Hoy hablaré sobre el futuro del desarrollo web full-stack con Bleeds.js. Te presentaré lo que Bleeds es actualmente y te daré un vistazo de lo que será en el futuro. Mi nombre es Aleksandra y actualmente estoy manteniendo Bleeds, y anteriormente lideré un equipo de la consola de Hasura. Puedes encontrarme en GitHub y Twitter, y también puedes visitar mi sitio web personal.

La agenda para hoy es hablar sobre el pasado, el estado actual y el futuro de Bleeds. Repasaremos los conceptos y características principales, y luego explicaré nuestros planes y en qué estamos trabajando actualmente. Algunos de ustedes pueden haber oído hablar de Bleeds, o tal vez incluso lo hayan usado en sus proyectos. Para aquellos que no lo conocen, Bleeds es un framework de React full-stack. Fue fuertemente inspirado por Ruby on Rails, y construido con la motivación de empoderar a los desarrolladores y brindarles la mejor experiencia posible para construir aplicaciones full-stack y React. Bleeds se construye sobre Next.js. Next es un framework principalmente enfocado en el frontend, donde Bleeds agrega todas las características y funcionalidades faltantes que lo convierten en un framework full-stack. Incluye acceso directo a la base de datos, middlewares, autenticación con autorización. Para el acceso a la base de datos, Bleeds utiliza Prisma, de forma predeterminada. Es un framework con baterías incluidas, lo que significa que todas las cosas aburridas como Slint, Pretier, Husky, TypeScript, Jest, ya están configuradas para ti. Puedes ir directamente a escribir la lógica de negocio y lanzar tus productos.

Uno de los conceptos principales es que Bleeds es monolítico. Esto significa que puedes pensar en tu aplicación como una entidad única. Solo hay una cosa para desarrollar, implementar y tener en cuenta. Ahora, hablemos de algunas de las características principales. La más importante es la capa de API cero. Si estás usando React, requiere que tengas una API REST o GraphQL para conectarte a la base de datos o realizar alguna lógica de negocio que se debe realizar en el servidor. Necesitas una API, incluso si no va a ser utilizada por terceros aparte de tu propia aplicación. Los tiempos de compilación también son una fuente de complejidad y a veces se pueden evitar. BLEEDS te permite ejecutar código del servidor directamente desde tu frontend. ¿Cómo sucede esto? BLEEDS abstrae la API en un paso de compilación. Puedes usar la función SERVER en tu frontend y BLEEDS reemplazará la importación con una llamada HTTP en tiempo de compilación. Las funciones del servidor se llaman resolutores de BLEEDS y tenemos consultas y mutaciones. Sin embargo, son solo funciones JavaScript simples, que siempre se ejecutarán solo en el servidor. También puedes agregar tu propia API si es necesario, y BLEEDS no te impedirá hacerlo. Echemos un vistazo al diagrama de arquitectura.

2. BLEEDS Server Code and Queries

Short description:

En la parte superior, tenemos código del cliente y en la parte inferior tenemos código del servidor. Con BLEEDS, 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. La capa intermedia es una API JSON generada automáticamente que expone cada consulta y mutación en una URL única. Utilizamos Prisma para encontrar el proyecto con un ID dado en la base de datos. En un componente, utilizamos la función useQuery para las consultas y la función useMutation para las mutaciones.

En la parte superior, tenemos código del cliente y en la parte inferior tenemos código del servidor. En particular, tenemos una consulta y una mutación en la parte inferior. En tu 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. Con BLEEDS, pueden utilizar el mismo código del servidor. En el momento de compilación, se genera e inserta la capa intermedia automáticamente para ti.

La capa intermedia es esta API JSON generada automáticamente en el diagrama. Cada consulta y mutación se expone en una URL única, lo que significa que también puedes llamar a esas URLs directamente, por ejemplo, desde una aplicación móvil. Aquí tenemos una muestra de consulta de BLEEDS, se llama GetProject. Y veamos qué sucede aquí. Usamos eso para definir la forma de los parámetros de la consulta. Luego analizamos la entrada para asegurarnos de que sea lo que queremos. Más adelante, hay una llamada a la database, aquí usamos Prisma. Y con esta llamada, intentamos encontrar el proyecto con un ID dado. Al final, la consulta devuelve el proyecto que estábamos buscando en la database.

En un componente, lo pasamos a una función useQuery importada de Blitz. Está construida sobre React Query, que es una gran biblioteca que proporciona almacenamiento en caché, sondeo, una gran experiencia de desarrollo y muchas, muchas más características. Ahora veamos un ejemplo de mutación. No es muy diferente de la función anterior. También definimos la forma de la entrada, la analizamos, nos conectamos a la database para crear un nuevo objeto y al final, devolvemos el proyecto recién creado. En un componente de React, pasamos esta función a una useMutation y luego la usamos al enviar un formulario.

3. Blitz Características y Futuro

Short description:

Blitz proporciona autenticación y autorización listas para usar, incluido un adaptador Passport.js para inicio de sesión de terceros. La mutación de registro maneja el hash de contraseñas, la creación de usuarios y la autenticación de sesión. El andamiaje de código en Blitz genera modelos, resolutores, páginas y componentes de formulario. Las recetas permiten la fácil extensión de aplicaciones con bibliotecas de interfaz de usuario y herramientas de registro de implementación. Blitz también introduce rutas seguras por tipo, lo que permite hacer referencia por nombre en lugar de URL. Para comenzar con Blitz, instálalo globalmente y usa el comando Blitz new. El futuro de Blitz incluye un cambio a un conjunto de herramientas independiente del marco, expandiéndose más allá de los usuarios de Next.js a Remix, Speltkit, Nuxt y más.

Otra gran ventaja de Blitz es que tiene autenticación y autorización listas para usar. Después de crear una nueva aplicación, puedes registrarte e iniciar sesión al instante. Todo el código necesario para crear nuevas cuentas para iniciar sesión y cerrar sesión ya está generado para ti. También hay un adaptador Passport.js, que te permite agregar un inicio de sesión de terceros.

Aquí podemos ver la mutación de registro proporcionada en los proyectos de Blitz. Este código ya está presente después de crear una nueva aplicación de Blitz. Entonces, ¿qué tenemos aquí? Hashamos la contraseña con una utilidad segura de contraseñas importada de Blitz. Luego creamos un nuevo usuario en la base de datos, pasamos los valores de la mutación y pasamos la contraseña hashada. Como siguiente paso, creamos una nueva sesión autenticada. El objeto CTX es el segundo argumento de los resolutores de Blitz y es proporcionado por el middleware de sesión y el middleware de sesión está configurado por defecto en tus aplicaciones. En nuestras consultas y mutaciones, también necesitamos poder restringir el acceso al código del servidor. Para eso, podemos usar, por ejemplo, esta es uno de los métodos, podemos usar la función de autorización. Entonces, si el usuario no está autenticado o no está autorizado para acceder a un recurso, lanzará un error.

Blitz también cuenta con andamiaje de código. Puedes usar la línea de comandos de Blitz para generar modelos, resolutores y páginas. Por ejemplo, con el comando Blitz generate all project, creamos páginas para listar, agregar y editar nuevos También creará un nuevo componente de formulario para crear nuevos proyectos. Y finalmente, generará todas las consultas y mutaciones necesarias. Luego tenemos recetas, que fueron en su mayoría inspiradas por Gatsby, y nos proporcionan una forma fácil de extender nuestras aplicaciones. Tenemos un montón de recetas en Blitz, y nos permiten, por ejemplo, agregar bibliotecas de interfaz de usuario, herramientas de registro de implementación y algunas cosas más.

Entonces, otra característica genial que Blitz introdujo son las rutas seguras por tipo. Digamos que tienes una página llamada Página de Productos. En una página diferente, puedes importar el objeto de rutas de Blitz, y luego puedes hacer referencia a la Página de Productos por nombre en lugar de proporcionar una cadena con una URL. Entonces, si quieres comenzar con Blitz, puedes instalarlo globalmente y luego ejecutar el comando Blitz new. Deberás proporcionar un nombre para tu proyecto, y luego te hará algunas preguntas. Por ejemplo, si prefieres JavaScript o TypeScript, qué biblioteca de formularios quieres usar y cuál es tu administrador de paquetes preferido. Hasta ahora, he estado hablando principalmente sobre el marco de Blitz tal como es ahora. Pero ahora, déjame hablarte sobre el futuro de Blitz Toolkit. A finales del año pasado, Brandon, el creador de Blitz, anunció el cambio de rumbo de Blitz. El plan es pasar a un conjunto de herramientas independiente del marco que conserve toda la experiencia de desarrollo que Blitz tiene y todas las características que los desarrolladores aman de Blitz. Pero queremos llevarlo no solo a los usuarios de Next.js, sino también a Remix, Speltkit, Nuxt y otros más.

4. The Pivot and Objectives

Short description:

Esta fue una decisión y un cambio enormes para la comunidad de Blitz. La retroalimentación fue muy positiva, con la mayoría de las personas de acuerdo en que era la mejor dirección para Blitz. Blitz ha experimentado un crecimiento significativo con más de 100,000 proyectos creados y 10,000 estrellas en GitHub. Sin embargo, la dependencia de Next.js ha causado algunos desafíos, lo que llevó a la decisión de cambiar de rumbo. Los objetivos del cambio de rumbo son preservar la experiencia del desarrollador, atraer a más personas a Bleed y desvincularlo de cualquier marco o tiempo de ejecución específico. El nuevo Bleed permitirá a los desarrolladores elegir las características que deseen y trabajar con diferentes tiempos de ejecución.

Esta fue una decisión enorme, enorme, y fue un cambio enorme para la comunidad de Blitz. A medida que leíamos los comentarios y revisábamos lo que la gente decía sobre el cambio de rumbo, solo nos convencía más de que esta es la decisión correcta. La retroalimentación fue muy, muy positiva. Y la mayoría de las personas dijeron que esta es la mejor dirección para Blitz.

Entonces, Blitz es un proyecto de comunidad y valoramos la comunidad por encima del código, por lo que no podríamos tomar esta decisión si no fuera por esta retroalimentación, y si no fuera porque la gente nos decía que esta es la mejor opción. Puede que te preguntes por qué siquiera comenzamos a pensar en ello. Se crearon más de 100,000 proyectos con Blitz, y recientemente, hace unos meses, superamos el hito de las 10,000 estrellas en GitHub. Blitz recibió toneladas de comentarios positivos y la gente decía que les hacía ser muy, muy productivos. Sin embargo, como mencioné antes, esto se basa en Next.

¿Qué más? Hace unos meses, bifurcamos el repositorio de Next.js, lo cual, por un lado, fue una buena decisión porque nos permitió eliminar algunos pasos de compilación personalizados. Y nos permitió conectarnos directamente al código de Next. Por otro lado, nos ralentizó ya que la migración a la bifurcación llevaba tiempo. Y estábamos alcanzando a Next.js. Tienen un gran equipo y hacen un montón de cosas increíbles. Así que es un poco difícil mantenerse actualizado. El crecimiento de Bleed se ha estancado y estamos ansiosos por mejorarlo.

Entonces, hablemos de los objetivos del cambio de rumbo. Nuestro objetivo es preservar la experiencia del desarrollador tanto como sea posible. No queremos realizar cambios en la API que no sean necesarios. Y no queremos cambiar las características existentes. Nuestro objetivo principal es atraer a más personas a Bleed o llevar Bleed a más personas. Queremos permitir a los desarrolladores utilizar algunas partes de Bleed, incluso si no desean otras partes o incluso si no usan Next.js. Dicho esto, queremos desvincular Bleed de cualquier marco o tiempo de ejecución específico. Nos gustaría trabajar con Deno, Cloud for Workers y no solo con Node.js. Por último, queremos lanzar más y más características increíbles sin centrarnos en mantener Next.js. Comparemos un poco y expliquemos cómo será exactamente el nuevo Bleed diferente al anterior. Puedes pensar en el Bleed actual como un paquete con características como API cero, recetas, autenticación, generación de código, y todo se basa en Next.js. Mientras que con el nuevo conjunto de herramientas, puedes tomar esas partes en las que estás interesado. ¿Quieres una API cero pero no quieres autenticación? Eso está bien. ¿O tal vez no quieres una API cero pero te gusta la autenticación que Bleed proporciona? Eso también está bien y es posible.

5. BLEEZ Toolkit Features and Setup

Short description:

La nueva herramienta incluirá las características principales de BLEEZ, como la capa de datos de API cero, autenticación con autorización y generación de código. Se agregarán características adicionales como autenticación JWT y autorización avanzada basada en datos. La nueva herramienta también podría admitir websockets, procesamiento en segundo plano, integración de correo electrónico y más. Los proyectos existentes de BLEEZ seguirán funcionando con correcciones de errores y lanzamientos. La migración a la nueva configuración se realizará de la manera más fluida posible con modos de código y automatización. La configuración de la herramienta BLEEZ incluye una función setupServer que devuelve las funciones setupClient, gcp, gcpAPI y un tipo BleedsServer. Se pueden pasar complementos como AuthPlugin, zeroAPIPlugin y FileUploadPlugin a la función setupServer en el lado del cliente.

Y además de eso, la base puede ser un marco de su elección. Así que repasemos las características de la herramienta que planeamos tener. Creemos que el valor principal que tiene actualmente es la capa de datos de API cero, la autenticación con autorización, todas las convenciones que tenemos, la nueva aplicación y la generación de código. Entonces, la nueva herramienta está destinada a tener todas esas características también, y planeamos agregar algunas cosas adicionales como autenticación JWT y, por ejemplo, autorización avanzada basada en datos. Pero eso no es todo, hay muchas otras características que la nueva herramienta podría admitir, como websockets, procesamiento en segundo plano, integración de correo electrónico y muchas más.

De hecho, si tienes alguna idea, puedes hacérnosla saber después de la charla. Probablemente te preguntes, ¿qué pasa con todos los proyectos actuales de BLEEZ? Como mencioné, hay muchos de ellos. Por lo tanto, las aplicaciones existentes de BLEEZ seguirán funcionando y corregiremos cualquier error crítico que surja. Realizaremos lanzamientos cuando sea necesario y tendremos BLEEZ en algún tipo de modo de mantenimiento el tiempo que sea necesario. También estamos trabajando para que la nueva configuración sea lo más similar posible a la configuración actual. Para cualquier cambio requerido, tendremos un modo de código que automatizará algunos de esos cambios, si no todos. Por lo tanto, el esfuerzo por parte del usuario debería ser lo más mínimo posible. Para los proyectos existentes, queremos que la migración sea lo más fluida posible, con los modos de código establecidos y la automatización.

Entonces, hablemos ahora de la configuración de la herramienta BLEEZ. Te mostraré un montón de fragmentos de código. Y puedes pensar en ellos como una especie de trabajo en progreso del código. No son definitivos. Esto es algo de lo que hemos estado hablando, pensando, algo en lo que estamos evolucionando. Pero es más o menos lo que queremos tener al final. Así que vamos a tener una función setupServer, que devuelve varias cosas. Por ejemplo, un setupClient, una utilidad para inicializar la parte del cliente de Bleeds. También devuelve las funciones gcp, gcpAPI, que serán envoltorios para GetServerSideProps, GetStaticProps y los controladores de API de Next.js. También devuelve un tipo BleedsServer, que puedes usar para tipar. Por ejemplo, puedes usarlo para proporcionarlo a la función setupClient. Además, la función setupServer acepta una lista de complementos. El primero en este ejemplo es AuthPlugin. Toma una configuración para establecer un prefijo de cookie y un almacenamiento flotante para manejar la gestión de la sesión en la base de datos. También podrías pasar un zeroAPIPlugin con su propia configuración y posiblemente otros complementos como, por ejemplo, FileUploadPlugin. Así que en el cliente, tendremos la función setupClient, como mencioné antes. Y aquí también pasaremos todos los complementos que queremos tener en el lado del cliente.

6. Interfaz del complemento del cliente

Short description:

La interfaz del complemento del cliente proporcionará utilidades como useQuery, useMutation, useSession y componentes de orden superior. También incluirá eventos, middleware y exportaciones para los complementos. El componente de orden superior withProvider se utilizará para envolver la aplicación.

Devolverá un conjunto de utilidades del cliente como useQuery, useMutation, useSession, con componentes de orden superior de Blitz para envolver toda su aplicación, QueryClient para configurar la consulta de React, y así sucesivamente. Aquí está la interfaz del complemento del cliente. Así que esto también es más bien un seudocódigo, pero tendrá eventos, algo que debería ocurrir en SessionCreate y SessionDestroy, para que otros complementos puedan conectarse al complemento de autenticación. Tendrá middleware, por lo que habrá cosas que deberán ocurrir antes y después de la solicitud HTTP, exportaciones, todas las funciones que se exportarán desde el complemento, como useQuery y useMutation que se exportarán desde zeroAPIPlugin, o useSession que se exportará desde el complemento de autenticación. También puede tener withProvider, un componente de orden superior que se utilizará para envolver la aplicación.

7. Explorando la capa zeroAPI y el sistema de complementos

Short description:

Ahora, veamos más de cerca la capa zeroAPI y cómo podría funcionar con el Blitz Toolkit. Queremos preservar la API actual tanto como sea posible y estamos considerando mantener las importaciones mágicas. Actualmente estamos trabajando en el sistema de complementos y haciéndolo fácilmente ampliable. Conclusiones de esta charla: visita blitzjs.com o blitz-js.org para obtener más información, proporciona comentarios en el repositorio de Blitz y ponte en contacto con Alexandra o Brandon a través de Twitter o correo electrónico.

Ahora, veamos más de cerca la capa zeroAPI y cómo podría funcionar con el Blitz Toolkit. Tenemos una serie de objetivos para ello. En primer lugar, queremos que sea una biblioteca independiente que sea agnóstica en cuanto a tiempo de ejecución y marco de trabajo. Utilizaremos HTTP GET para las consultas, porque actualmente tanto las consultas como las mutaciones utilizan HTTP POST. Queremos admitir múltiples resolutores en un solo archivo. Y lo más importante, queremos preservar la API actual tanto como sea posible. Idealmente, nada debería cambiar en la forma en que escribes los resolutores.

Aquí tienes un ejemplo de resolutor, que se ve exactamente igual que en el marco de trabajo Blitz actual. Lo importaremos en un archivo de configuración de Blitz y lo pasaremos a la función de configuración del servidor, específicamente la configuración de zeroAPI. Y luego en useQuery, pasaremos una cadena con el nombre del resolutor. Sin embargo, esa es solo una propuesta. Consideramos seriamente mantener las importaciones mágicas para que no tengas que importar los resolutores al archivo de configuración y puedas importarlos directamente a las funciones useQuery o useMutation. Creemos que podemos hacer esto con un complemento personalizado de Webpack y eso es algo en lo que estamos investigando actualmente.

Entonces, ¿en qué estamos trabajando actualmente? El sistema de complementos, ya que es la parte más crucial, queremos hacerlo bien para que no nos bloquee en el futuro y no nos impida agregar soporte adicional para marcos de trabajo. También queremos que sea fácilmente ampliable, para que las personas puedan escribir sus propios complementos. Al mismo tiempo, estamos extrayendo algo de código de Blitz para tener una mejor comprensión de cómo debería funcionar todo junto. También hemos configurado un nuevo monorepo en la rama principal del repositorio de Blitz.

De acuerdo, conclusiones de esta charla. Puedes visitar el sitio web blitzjs.com para obtener información sobre Blitz, o también puedes consultar el repositorio en blitz-js.org y se llama blitz. Nos encantaría recibir tus comentarios, así que si tienes alguna idea sobre el cambio de rumbo o alguna de las características de Blitz, háznoslo saber. Puedes unirte a la discusión en el repositorio de Blitz, o puedes ponerte en contacto conmigo o Brandon a través de Twitter o correo electrónico. Muchas gracias por unirte. Y si quieres ponerte en contacto, no dudes en hacerlo, podemos seguir hablando de Blitz. Puedes encontrarme en Twitter como AlexandraSes. Muchas gracias.

8. Audience Feedback and Blitz Status

Short description:

Alexandra preguntó a la audiencia si habían usado Blitz antes. El 50% dijo que no, el 32% dijo que sí y el 18% no había oído hablar de él. Para aquellos que no habían usado Blitz, la charla sirvió como una buena introducción. Para aquellos que sí lo habían usado, el concepto de Pivot y el nuevo Blitz Toolkit fueron bien recibidos. El proyecto Blitz todavía está en fase beta, comenzó hace dos años con la participación de la comunidad. Después del lanzamiento Alpha, bifurcaron Next.js y trasladaron el código principal de Blitz a él. Su objetivo es completar todas las características planificadas antes del lanzamiento estable 1.0.

Hola Alexandra. Hola. Hola. Hola a todos. Entonces, Alexandra preguntó, ¿han usado Blitz antes? Y el 50% dijo que no, el 32% dijo que sí y el 18% solo dijo que no había oído hablar de él. Así que tengo que decir, este es un número bastante bueno, ¿verdad? 32%... Sí, este es un número bastante bueno, ya sabes. Entonces, como el 50% no usó Blitz, esa charla podría haber sido una buena introducción a Blitz. Así que eso es bueno. Así que la gente no se aburrió. Pero para aquellos que sí usaron Blitz, espero que les haya gustado la idea de Pivot y que utilicen el nuevo Blitz Toolkit. Y sí, el 80% no había oído hablar de él. Creo que es un buen número, ya sabes. Solo el 18%. Eso es bueno. Eso es bueno para Blitz. Si hacemos esta pregunta a la misma audiencia mañana, entonces será 50-50, por supuesto. Sí.

Muy bien. Vamos a responder algunas preguntas de la audiencia. La primera pregunta es de Populinga. ¿El proyecto Blitz todavía está en fase beta? Sí. Sí. Todavía está en fase beta porque Blitz se inició inicialmente hace dos años y Brandon, el creador de Blitz, estuvo trabajando en él con la comunidad durante un tiempo. Luego lanzaron la versión Alpha y unos meses después de la Alpha, lanzaron la Beta. Y la cosa es que luego, después del lanzamiento de la Beta, me uní y en lugar de usar Next.js como una dependencia, bifurcamos Next.js. Y, ya sabes, eliminamos nuestro compilador personalizado. Estábamos trasladando el código principal de Blitz a Next.js. Queríamos tenerlo todo listo antes del lanzamiento estable. Y también teníamos algunas otras características en mente para completar antes del lanzamiento oficial 1.0.

9. Blitz Pivot and ETA for 1.0

Short description:

Decidimos pivotar para llevar Blitz a más personas que utilizan otros frameworks. El framework está en fase beta y ahora nos enfocamos en el toolkit. La ETA para la versión 1.0 es finales de marzo. Aún estamos corrigiendo errores y haciendo lanzamientos. A pesar de eso, recomiendo usar Blitz porque es estable y te brinda mucho poder como desarrollador full stack.

Sin embargo, mientras tanto, decidimos pivotar por las razones que mencioné en la charla. Queríamos llevar Blitz a más personas que utilizan otros frameworks, no solo Next.js. Por eso el framework está en fase beta.

¿Y hay una ETA para la versión 1.0? No estaremos trabajando en el framework en sí, ya sabes, no nos enfocaremos en eso. Simplemente cambiamos nuestro enfoque al 100% en el toolkit. Tal vez no al 100%, porque aún estamos corrigiendo errores. Todavía estamos haciendo lanzamientos del framework, porque, ya sabes, mucha gente lo está utilizando y queremos mantenerlo. Si alguien envía un PR, también dedicamos tiempo a revisarlo. Pero, sí, en cuanto a cosas más grandes como el lanzamiento 1.0, planeamos tener el toolkit como 1.0, como, ya sabes, el nuevo Blitz estable oficial. Sí, eso es lo que quiero decir. Perdón. Sí, la ETA. Entonces, apuntamos a finales de marzo. Ahora mismo tenemos algunas cosas funcionando. Puedes revisar la rama principal en el repositorio de Blitz. Tenemos algunos trabajos en progreso. Y sí, planeamos terminarlo en las próximas semanas. Eso es bastante emocionante. Sí, es emocionante. Cinco, seis semanas más, finales de marzo. Sí, mejor me apuro y vuelvo. Sí, me voy, adiós adiós.

La siguiente pregunta es bastante buena. Para las personas que quieren comenzar un nuevo proyecto mañana. ¿Recomendarías elegir Blitz? ¿O deberían mantenerse alejados hasta que se complete el Biffin? Aún así, recomendaría usar Blitz porque es un framework utilizado por muchos desarrolladores. Y aunque no sea la versión 1.0, es bastante estable. Y te brinda mucho poder como desarrollador full stack. Y aunque estamos trabajando en el toolkit, queremos que esta transición sea realmente fluida. Habrá modos de código. También trabajaremos en ellos.

10. Blitz Toolkit and Exciting Features

Short description:

El toolkit de Blitz tendrá un comando para convertir proyectos de Blitz a Next.js con el toolkit. Se minimizarán los pasos manuales y el modo de código cubrirá automáticamente la mayoría de los aspectos. El enfoque está en el toolkit, pero aún se aceptan pequeñas mejoras para el framework actual de Blitz. El nuevo toolkit puede incluir nuevas características como autorización y autenticación JWT. La parte más emocionante del toolkit es el diseño del sistema de plugins, que permite a los usuarios elegir plugins específicos y escribir los suyos propios. Hacer que los plugins sean independientes del framework fue una tarea desafiante y emocionante.

Entonces, cuando realmente tienes un proyecto de Blitz y tenemos el toolkit listo, debería haber un comando que convierta el proyecto de Blitz a Next.js con el toolkit de Blitz. Tal vez haya alguna configuración en tu sitio, algunos pasos manuales. Pero queremos que sean lo más limitados posible. Queremos cubrir automáticamente casi todo para ti con el modo de código y demás. Sí, eso es bueno porque de lo contrario sería demasiado peligroso o aterrador elegir Blitz ahora. Es muy bueno que estés trabajando en este modo de código. Gracias.

¿Y qué nuevas características agregarás al framework de Blitz? ¿O agregarás alguna? Sí, no agregaremos nuevas características al framework de Blitz porque queremos enfocarnos lo más posible en el toolkit. Sin embargo, aún aceptaremos pequeñas cosas, aún aceptaremos PR. Entonces, si hay algo pequeño que haga que el Blitz actual sea mejor y no requiera muchas horas de revisión, y es solo un PR y podemos enviarlo, aún agregaremos ese tipo de cosas. No estamos trabajando activamente en las características del framework. Pero posiblemente, el nuevo toolkit vendrá con nuevas características de serie, como en el framework de Blitz, no teníamos autorización JWT, autenticación. Pero tal vez lo tengamos desde el primer día en el toolkit. Así que puedes esperar ese tipo de cosas en el toolkit. Tal vez, pero esto tal vez sea en cinco semanas, así que creo que hemos tenido un vistazo al futuro aquí. Sí, lo hemos tenido. Genial.

Siguiente pregunta de Hail of the Wood. De todas las cosas en la hoja de ruta del toolkit de BLEACH, ¿en qué estás más emocionado de trabajar? ¿En qué estoy más emocionado de trabajar? Esa es una buena pregunta. La parte más complicada de todo el toolkit y algo en lo que inicialmente tuvimos que invertir mucho tiempo para descubrir es todo el diseño del sistema de plugins, cómo hacer que este nuevo toolkit de BLEACH permita tener plugins y que las personas puedan usar solo algunos de esos plugins, por ejemplo, alguien quiere autenticación de BLEACH, pero no quiere nada más o algo más, y cómo hacerlo bien para que las personas puedan escribir sus propios plugins, y así sucesivamente. Eso fue un desafío. Y otro desafío adicional fue cómo hacer que esos plugins sean independientes del framework. Así que eso fue emocionante, descubrirlo. Así que inicialmente invertí algo de tiempo en configurar una aplicación simple de next-js y trabajar en un esqueleto de cómo podría funcionar este sistema de plugins. Y eso fue bastante emocionante porque luego pude ver, oh, necesito este tipo de cosa porque esta autenticación funciona de esta manera y posiblemente necesito que el plugin funcione de esta manera porque la API de Xero funciona de esta manera. Y eso fue desafiante y emocionante. Sí, genial. Sí, es una buena manera de construir lo que necesitas, siendo tu propio cliente básicamente, y ver cómo cobra vida lo que necesitas. Sí, genial.

11. Blitz Inspiración y Similitudes

Short description:

Blitz, sí, me recuerda a Meteor. ¿Fueron una inspiración para ti? Una gran inspiración fue Ruby on Rails. La idea era tener algo como Ruby on Rails en el mundo de JavaScript.

Sí, a veces tienes que experimentar. Exactamente, tenemos tiempo para una pregunta y respuesta rápida. Esto es de JSfire, Watch69. Como un framework para un desarrollador full stack, Blitz, sí, me recuerda a Meteor. Sí. ¿Fueron una inspiración para ti? Entonces, no estoy seguro si eso fue una inspiración para Brandon inicialmente. Sé que una gran inspiración fue Ruby on Rails. Y creo que, ya sabes, la idea era tener algo como Ruby on Rails en el mundo de JavaScript. Así que creo que en cuanto a esta inspiración en particular, esa sería la pregunta para Brandon. Puedo preguntarle, ya sabes, rápidamente después de esta sección. Y eso, ya sabes. Si puedes ingresar al Discord de JS Firewatch, eso sería genial. Sí. Eso es todo el tiempo que tenemos para la sesión de preguntas y respuestas en vivo, pero si quieres seguir discutiendo Blitz, sí, con Alexandra, puedes hacerlo en nuestra sala de oradores en Spatial Chat, donde ella se dirigirá en un minuto. Así que Alexandra, muchas gracias por unirte a nosotros. Ha sido un placer. Sí. Gracias por recibirme. Adiós. Adiós. Adiós. Adiós. Adiós Adiós Gracias por recibirme. Adiós. Adiós. Adiós. Adiós.

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 Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
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 Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
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.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn