El Auge de la Pila Transaccional Moderna

Rate this content
Bookmark
Slides

Las bases de datos y los backends transaccionales son el latido de nuestra vida cotidiana: alimentan casi todas las transacciones en el mundo moderno, desde reservar boletos de avión hasta pedir comida en Doordash. El estado actual de impulsar estas transacciones hoy en día se basa en una arquitectura pesada de microservicios, aprovechando cachés y colas para preservar el estado de la transacción y OLTP que garantiza la idempotencia y la consistencia. La próxima evolución de esta pila es reemplazar la caché/colas con un orquestador central: motores de flujo como Cadence y Conductor. Todo esto sucede en lo que tradicionalmente llamamos "el backend", pero está surgiendo una nueva pila para el mundo de JavaScript: cada vez más proyectos nuevos se escriben solo en JavaScript/TypeScript, y este grupo de proyectos comparte una pila única a diferencia de lo que hemos visto anteriormente. La presentación profundizará en la historia y evolución de los cambios de plataforma, y se centrará en los problemas transaccionales más emocionantes presentados en el mundo de los monolitos modernos que son nativos de la periferia, 100% JavaScript, y argumentará por qué la palabra "serverless" está desactualizada :)

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

FAQ

Yoko es una dibujante técnica, desarrolladora, gerente de productos y socia en H16z, donde invierte en el ecosistema de JavaScript y herramientas para desarrolladores.

Yoko ha observado un cambio de los sistemas basados en microservicios a una pila transaccional moderna donde se usa principalmente JavaScript y tecnologías sin servidor, eliminando la división tradicional entre frontend y backend.

La pila transaccional moderna es un modelo de desarrollo donde se utilizan tecnologías basadas en JavaScript y sin servidor. No se hace distinción entre frontend y backend, y se utilizan plataformas como Superbase, Convex y Upsash que simplifican la gestión de infraestructura.

Las nuevas tecnologías permiten usar componentes listos para usar como Clerc y firmas de React para la autenticación, eliminando la necesidad de herramientas de nivel inferior que eran comúnmente utilizadas por los ingenieros de backend.

React y Tailwind permiten a los desarrolladores usar componentes y estilos modernos directamente en los correos electrónicos, haciendo el proceso de codificación más intuitivo y eficiente comparado con el HTML básico tradicional.

En lugar de usar soluciones tradicionales como AWS S3, la pila transaccional moderna permite el uso de herramientas como UploadThing, que se integran directamente con React y simplifican el proceso de almacenamiento de objetos.

La pila moderna utiliza motores de flujo que actúan como orquestadores de funciones asíncronas, permitiendo una gestión centralizada y automatizada de reintentos y eventos, lo que simplifica considerablemente la integración y el manejo de webhooks.

Yoko Li
Yoko Li
7 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy explora los cambios arquitectónicos en las transacciones, destacando la dominancia de JavaScript en la pila transaccional moderna y la eliminación de la división entre frontend y backend. El uso de herramientas sin servidor y basadas en componentes permite la provisión de infraestructura escalable y elimina la necesidad de equipos de DevOps. Además, los motores de flujo desempeñan un papel crucial en la orquestación de funciones asíncronas en el mundo nativo sin servidor.

1. Architectural Shifts in Transactions

Short description:

Hoy compartiré interesantes cambios arquitectónicos en el contexto de las transacciones. JavaScript está ganando en la arquitectura antigua, donde los microservicios se dividen entre el cliente y el servidor. En la pila transaccional moderna, el servidor sin servidor y JavaScript son los únicos que alimentan toda la aplicación. Ya no hay frontend y backend, y plataformas como Superbase, Convex y Upsash eliminan la necesidad de gestionar la infraestructura del backend.

Hola a todos. Mi nombre es Yoko. Soy una dibujante técnica, desarrolladora, gerente de productos y, por último, socia en H16z invirtiendo en el ecosistema de JavaScript y herramientas para desarrolladores. Hoy me gustaría compartir algunos cambios arquitectónicos interesantes que he visto después de hablar con cientos de desarrolladores y empresas tecnológicas. Estoy poniendo las arquitecturas en el contexto de las transacciones, ya que son tan fundamentales para nuestra vida diaria. Son la base de cosas como la emisión de boletos de avión, la entrega de alimentos a nuestras puertas y la reserva de cuidadores de gatos y perros. Y estamos viendo un cambio importante en cómo los desarrolladores utilizan y razonan sobre las tecnologías aquí.

Bueno, spoiler alert, JavaScript siempre gana. Así que hablemos de por qué y cómo. Ahora, aquí está la arquitectura que verás en el mundo antiguo. Como puedes ver, hay un montón de microservicios divididos entre el cliente y el servidor porque utilizan diferentes lenguajes, y también porque los desarrolladores frontend y backend no pueden ponerse de acuerdo entre sí. Cuando ves la ruta de una solicitud, por ejemplo, al realizar un pedido, esta se autentica y luego se envía a una API. El punto final de la API deberá orquestar cientos de microservicios para entregar una transacción comercial al usuario. Luego pasará por servicios de gestión de inventario, procesamiento de pedidos, procesamiento de pagos, entre otros. En este punto, los desarrolladores utilizan colas y cachés, como se puede ver en la mitad inferior de la imagen, para almacenar lo que llamamos estados de la aplicación, como `pedido recibido` o `pedido pagado`. Los desarrolladores también codificarán manualmente la lógica de reintento para obtener los datos en las bases de datos y cruzarán los dedos y esperarán lo mejor. Hemos descubierto que a medida que el sistema escala, también lo hace la complejidad de gestionar colas, cachés y casos especiales. Ahora vemos que muchas empresas comienzan a construir sus nuevos proyectos de manera muy diferente.

Ahora ingresa a la pila transaccional moderna, donde ya no necesitas aprovisionar y gestionar cientos y miles de microservicios. En su lugar, hemos llegado a un punto en el que el servidor sin servidor y JavaScript por sí solos son suficientes para alimentar toda la aplicación. Es posible que te preguntes qué es la pila transaccional moderna. En primer lugar, es completamente JavaScript y el backend es atendido por un proveedor. A veces, el proveedor es sin servidor. Ya no hay lo que llamamos frontend y backend. Todos son ingenieros full stack y ya no hay APIs, ya que está escrito en el mismo lenguaje de programación. Ahora tienes cosas como componentes de servidor y TRPC simplemente llamando a una función. Vemos que cada vez más empresas adoptan este patrón a medida que avanzan. Lo que tradicionalmente llamamos backend, ahora tenemos plataformas como Superbase, Convex, Upsash y otros que pueden eliminar por completo la necesidad de que los desarrolladores de aplicaciones gestionen directamente la infraestructura del backend.

2. Modern Transactional Stack and Workflow Engines

Short description:

Solía aprovisionar infraestructura todo el tiempo y no es divertido. En esta arquitectura, también utilizarás servicios que pueden escalar hasta 0 y escalar rápidamente según la demanda. Eliminando por completo la necesidad de equipos de DevOps. Otra característica de la pila transaccional moderna es que está impulsada por herramientas impulsadas por componentes. Para la autenticación, ya no necesitas lidiar con herramientas de nivel inferior que tradicionalmente usan los ingenieros de backend. Ahora puedes simplemente elegir herramientas como Clerc y usar un componente de firma de React. Para el almacenamiento de objetos, puedes usar algo llamado UploadThing nativamente en React en lugar de usar AWS S3 directamente. Por último, a medida que las empresas utilizan más APIs y aceptan más webhooks, deben lidiar con funciones asíncronas a gran escala. Los motores de flujo desempeñan un papel central en el mundo nativo sin servidor, orquestando funciones asíncronas. Si quieres hablar más, no dudes en enviarme un mensaje directo en Twitter a staff Yoko Draws. Gracias.

Créeme, no quieres trabajar en AWS. Solía aprovisionar infraestructura todo el tiempo y no es divertido. En esta arquitectura, también utilizarás servicios que pueden escalar hasta 0 y escalar rápidamente según la demanda. Eliminando por completo la necesidad de equipos de DevOps. Upsash es un gran ejemplo de esto.

En segundo lugar, otra característica de la pila transaccional moderna es que está impulsada por herramientas impulsadas por componentes. Para la autenticación, ya no necesitas lidiar con herramientas de nivel inferior que tradicionalmente usan los ingenieros de backend. Ahora puedes simplemente elegir herramientas como Clerc y usar un componente de firma de React. Otro buen ejemplo aquí es un proyecto de código abierto llamado React Email. Ya no tienes que codificar HTML básico para correos electrónicos transaccionales y ahora puedes usar React y Tailwind directamente en tu correo electrónico. Para el almacenamiento de objetos, esto es algo de lo que muchos ingenieros me hablan, incluso yo mismo, cómo aprender AWS. Pero ahora puedes usar algo llamado UploadThing nativamente en React en lugar de usar AWS S3 directamente.

Por último, un aspecto destacado de esta pila es que a medida que las empresas utilizan más APIs, más funciones y aceptan más webhooks, básicamente tienen que lidiar con funciones asíncronas a gran escala. Entonces, cuando esto sucede, debe haber un lugar central para orquestar estas cosas, ya que los reintentos hechos a mano son difíciles. Ahora comenzamos a ver motores de flujo desempeñando un papel central en el mundo nativo sin servidor. Y la forma de entenderlos es que son los orquestadores de funciones asíncronas. Aquí está la intuición. Si tu aplicación maneja cientos de registros de usuarios y luego envía un montón de correos electrónicos de bienvenida a los usuarios, puedes usar herramientas como ingest para escribir unas pocas líneas de código TypeScript para definir qué funciones se deben activar cuando ocurre un evento de registro. También volverá a intentar esta parte de la lógica automáticamente con un retraso exponencial si ese proceso falla. Y en el lado del cliente, si quieres, puedes usar la capa de autoría de la máquina de estados llamada xState. Lo conecto con el motor de flujo. Es un proyecto súper genial, hace que las cosas sean mucho más fáciles de entender en comparación con Redux, que solía usar todo el tiempo.

Probablemente haya horas y días de cosas de las que hablar en una pila que vemos una y otra vez aquí en la era sin servidor. Si quieres hablar más, no dudes en enviarme un mensaje directo en Twitter a staff Yoko Draws. Y eso es todo lo que tengo hoy. Gracias. Espero poder hablar más en persona.

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
React Summit 2022React Summit 2022
17 min
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
Patrones de Arquitectura Remix
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Patrones de Arquitectura Remix
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.