Blitz.js - El marco de trabajo React Fullstack

Rate this content
Bookmark

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

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.

Available in English

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

Short description:

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

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

Estuve construyendo aplicaciones de React de pila completa durante algunos años. Y felizmente soporté la complejidad y la lucha requerida para hacerlo. Y lo hice porque amaba construir interfaces de usuario con React más que cualquier otra forma. Pero la luna de miel terminó. Y me frustré cada vez más con REST, con las API de GraphQL, con el árbol de estado de Momex y una serie de otros servicios y bibliotecas de API, gestionando múltiples servidores, gestionando múltiples implementaciones, etc. Cualquier cosa que se interpusiera en mi camino para construir características agotaba lentamente mi moral.

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

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

Short description:

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

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

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

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

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

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
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
Building Better Websites with Remix
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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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. 
Using useEffect Effectively
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.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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.
Full Stack Documentation
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 Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
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