Versión en EspañolES

Interfaz de Usuario Controlada por el Servidor: Construyendo Aplicaciones Dinámicas con React

Los desarrolladores de front-end a menudo enfrentan el desafío de construir interfaces de usuario que necesitan actualizaciones frecuentes para mantenerse al día con los requisitos comerciales cambiantes y las preferencias de los usuarios. Esto puede llevar a ciclos de lanzamiento lentos y frustración tanto para los desarrolladores como para los usuarios. La Interfaz de Usuario Controlada por el Servidor (SDUI) ofrece una solución al trasladar la lógica de la interfaz de usuario al backend, permitiendo actualizaciones rápidas sin requerir aprobaciones de la tienda de aplicaciones o implementaciones complejas. Esta charla explorará cómo SDUI, combinado con React, capacita a los equipos para construir aplicaciones flexibles, mantenibles y rápidamente adaptables que brindan experiencias de usuario excepcionales.

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

architecture

Dipanshu Gupta

19 min

28 Oct, 2024

Comments

Video Summary and Transcription

En esta charla, Deepanshu discute el concepto de interfaz de usuario controlada por el servidor (SDUI) y sus beneficios. SDUI transfiere la responsabilidad de determinar la interfaz de usuario del cliente al servidor, permitiendo cambios dinámicos sin tocar el código del lado del cliente. La arquitectura basada en componentes de React lo hace un ajuste natural para SDUI, permitiendo flexibilidad y control en tiempo real. El servidor envía un esquema que guía la estructura de la interfaz de usuario, y los componentes de React renderizan dinámicamente la interfaz de usuario basada en el esquema. SDUI permite actualizaciones en tiempo real, experiencias personalizadas y mejora la experiencia del usuario. Sin embargo, también presenta desafíos como el aumento de la carga del servidor y la gestión del estado. Ejemplos de empresas que utilizan SDUI incluyen Airbnb, Spotify, Netflix y Amazon.

Available in English: Server-Driven UI: Building Dynamic React Applications

Video transcription and chapters available for users with access.

Available in other languages:

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 2022

23 min

Escalando con Remix y Micro Frontends

Top Content

Adrien Baron

Maker of clashofstats.com, Vue GWT and Tiny Frontend

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.

remix javascript micro-frontends architecture

Entendiendo la Arquitectura Fiber de React

React Advanced 2022

29 min

Entendiendo la Arquitectura Fiber de React

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

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.

react architecture concurrent rendering react 18 beginner friendly react fiber react reconciliation

Componentes de Full Stack

Remix Conf Europe 2022

37 min

Componentes de Full Stack

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

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.

remix javascript fullstack architecture

Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

React Summit 2022

17 min

Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

Top Content

Thomas Findlay

Findlay Web Tech

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.

react components component library architecture programming concepts react composition react fiber

Patrones de Arquitectura Remix

Remix Conf Europe 2022

23 min

Patrones de Arquitectura Remix

Top Content

Andre Landgraf

Software Engineer at LinkedIn

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.

remix javascript fullstack architecture

Workshops on related topic

IA a demanda: IA sin servidor

DevOps.js Conf 2024

163 min

IA a demanda: IA sin servidor

Top Content

Featured WorkshopFree

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.

serverless architecture artificial intelligence

Masterclass de alto rendimiento Next.js

React Summit 2022

50 min

Masterclass de alto rendimiento Next.js

Workshop

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.

performance next.js best practices architecture