Diseño Opt-in – La Nueva Era de los Marcos de React

Rate this content
Bookmark

Al adoptar una nueva tecnología, los desarrolladores se apegan a los valores predeterminados. Es un hecho que cada herramienta desde JQuery hasta NextJS ha tenido que enfrentar. En su peor momento, los valores predeterminados envían cientos de kilobytes de JS desperdiciados para enrutamiento, estado y otro equipaje que los desarrolladores pueden nunca usar. Pero en su mejor momento, los valores predeterminados nos dan una línea de base simple para comenzar, con un camino claro para agregar el conjunto exacto de características que nuestro proyecto exige. Esta es la magia del diseño opt-in.


Vamos a ver cómo las opciones predeterminadas inteligentes guían las herramientas de frontend modernas desde Astro hasta los Componentes del Servidor de React, y por qué esta nueva era remodela tu flujo de trabajo, y las métricas de rendimiento, para mejor.

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

FAQ

El diseño opt-in se refiere a la práctica de construir aplicaciones y herramientas web con buenos valores predeterminados, permitiendo que los desarrolladores elijan explícitamente añadir características y complejidades adicionales solo cuando sea necesario. No se enfoca en UI o sistemas, sino en la eficiencia de las API y en proporcionar una experiencia óptima al usuario final.

El diseño opt-in aborda la problemática de los sistemas opt-out donde los desarrolladores tienen que deshacerse de configuraciones predeterminadas complejas que no necesitan, lo cual puede complicar la optimización del rendimiento y la experiencia de usuario. Opt-in busca simplificar y mejorar el rendimiento y la interactividad desde el inicio.

Astro.build promueve el diseño opt-in al permitir a los desarrolladores comenzar con aplicaciones mínimas y eficientes que utilizan HTML y CSS básicos, y luego añadir JavaScript y otras complejidades solo cuando es necesario, evitando el uso innecesario de recursos y mejorando el rendimiento.

React Suspense es una funcionalidad que permite a los desarrolladores definir un marcador de posición (como un spinner) mientras se carga el contenido dependiente de datos o recursos externos. Esto apoya el diseño opt-in al mejorar la experiencia del usuario durante las cargas, gestionando mejor la reactividad y el tiempo de carga.

El diseño opt-in beneficia a los desarrolladores al reducir la complejidad inicial, mejorar el rendimiento de las aplicaciones y permitir un mayor control sobre las características y la funcionalidad que se añaden, asegurando que solo se incluyan los elementos necesarios para la aplicación, optimizando así los recursos y la experiencia del usuario.

Astro permite a los desarrolladores optar por incluir React y otros frameworks solo en las páginas que necesitan interactividad, evitando cargar JavaScript innecesariamente en todo el sitio. Esto se logra a través de una opción de CLI que facilita la adición de dependencias según sea necesario.

Benjamin Holmes
Benjamin Holmes
23 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
  • naim boubobo 🇹🇯
    naim boubobo 🇹🇯
    https://x.com/snaim1736/status/1798943666536628534
  • naim boubobo 🇹🇯
    naim boubobo 🇹🇯
    https://www.linkedin.com/posts/naim-bouboboev-0241637b_axhadafaxhoiglobali-activity-7204337960299773952-lleS?utm_source=share&utm_medium=member_desktop

Video Summary and Transcription

Esta charla discute el diseño opt-in en el desarrollo web, centrándose en el diseño de API y la comprensión de los valores predeterminados buenos. El diseño opt-in permite a los desarrolladores comenzar con herramientas mínimas y agregar gradualmente complejidad según sea necesario. Los principios del diseño opt-in incluyen encontrar el denominador común más bajo, hacer que la complejidad sea fácil de agregar y priorizar la experiencia del usuario. La charla también explora el concepto de diseño opt-in en React y Astro, así como la comparación entre los marcos de React y Solid. Se destacan la representación y el streaming del servidor en React, junto con la importancia de los límites de suspense para una mejor experiencia de usuario.

1. Introducción al diseño opt-in en el desarrollo web

Short description:

¡Hola a todos! Soy Ben Holmes, un mantenedor principal en Astro.build, y hoy hablaré sobre el diseño opt-in en el desarrollo web. El diseño opt-in no se trata de diseño de UI o sistemas, sino más bien de diseño de API y de entender los buenos valores predeterminados al construir herramientas y marcos. Vamos a sumergirnos en un ejemplo clásico de construcción de una aplicación con create React app y cómo evoluciona con las características añadidas.

Muy bien, hola a todos. Espero que todos estén disfrutando de la conferencia. Lamentablemente me uno a ustedes virtualmente para esta ocasión, pero tengo una gran charla preparada, así que espero que podamos compensarlo. Mi nombre es Ben Holmes, y voy a hablar sobre el diseño opt-in, que audazmente estoy denominando una nueva era en el desarrollo web, nuevas tendencias que he notado. Así que para aclarar qué es el diseño opt-in, no es una charla de diseño de UI, aunque el diseño gráfico es claramente mi pasión. Tampoco es una charla de diseño de sistemas. No vamos a hablar sobre clusters de Kubernetes o algo así. Es una charla de diseño de API, así que aprender qué significa tener buenos valores predeterminados cuando estás construyendo una herramienta o estás usando un marco de elección y tanto encontrar como construir esas herramientas para que podamos construir las mejores aplicaciones para nuestros usuarios. Así que una pequeña introducción extendida, soy un mantenedor principal en Astro.build, así que he estado trabajando en código abierto durante un tiempo y me pagan por hacerlo, lo cual es muy raro. También soy el jefe de la pizarra en Astro también. Título no oficial, por supuesto, pero si alguna vez has visto algunos videos de una pizarra vertical en línea, hago mucho contenido educativo, podría haber sido yo y puedes encontrar un archivo justo allí. Y soy un defensor de los formatos de contenido. Así que Markdown, MDX, Markdoc, si alguna vez has usado alguno de esos, los amo y trabajo en mantener todos esos en el marco de Astro. Así que podrías verme en los foros de soporte. Así que para guiarte a través del viaje de construir una aplicación por primera vez y introducir qué es el diseño opt-in, voy a hablar sobre, ya sabes, un ejemplo clásico de cómo podrías haber construido una aplicación en la era 2015, 2016 con create React app. Ahí es donde comencé con los sistemas de componentes podría haber sido tu viaje de aprendizaje también. Así que cuando empiezas, lees esa publicación de blog de quien sea y estás construyendo tu hola mundo por primera vez. Y estás buscando herramientas como React y React dom. Estás usando un enrutador como React router y estás buscando alguna opción de CSS y JS como componentes de estilo. Así que puedes co-ubicar todo. Fue bastante agradable de usar como desarrollador, pero puedes ver nuestro pequeño medidor de kilobytes en la parte inferior va a empezar a subir. Definitivamente hay un costo base para usar estas herramientas. Luego quieres agregar más características a medida que tu aplicación se desarrolla un formulario de registro. Por ejemplo, en reacción, hay muchas bibliotecas de formularios que podrías usar aquí. Tal vez era para mech en los primeros días y vas a estar previniendo el comportamiento predeterminado del navegador. Así que puedes manejar todo con Java script, lo que por supuesto significa un paquete más grande Pero te quedas con esa experiencia de desarrollo que te dijeron, o estás probando, es una buena idea. Y luego avanza un poco más. Ahora tenemos un flujo completo de e-commerce, y queremos agregar una burbuja de carrito para decir cuántos artículos hay en tu carrito, como el número 2 o algo así. Y necesitas persistir eso en el almacenamiento, tal vez estás usando Redux para duplicar el estado del servidor dentro de tu cliente, así que no tienes que lidiar con flashes mientras está buscando cosas por primera vez, y estás usando almacenamiento en el lado del cliente, tal vez almacenamiento local o algo así. Nuevamente, vamos a subir nuestro medidor de JavaScript un poco más, porque a medida que agregamos nuevas características, todas tienen que ser replicadas en el paquete de React, en el flujo de React.

2. Diseño Opt-out y Opt-in en el Desarrollo Web

Short description:

Y luego obtienes tu auditoría de rendimiento cuando has alcanzado un cierto estado, y te preguntas por qué tienes un 39 en tu puntuación de Lighthouse. Ese es el dolor de un sistema opt-out. Opt-out significa optar por no participar en las configuraciones predeterminadas proporcionadas por las bibliotecas o marcos. Opt-out requiere trabajo extra y conocimiento de las preocupaciones. Opt-out se puede ver en varias áreas, como la gestión de la configuración web, el uso de variables CSS en lugar de JavaScript, y optar por no participar en el contexto de React. El ethos opt-out asume un objetivo de una aplicación altamente interactiva y reduce la fricción del desarrollador, pero requiere lidiar con la complejidad más adelante durante las auditorías de rendimiento. El diseño opt-in, como ASTRO, ofrece un enfoque diferente, permitiendo a los desarrolladores comenzar con herramientas mínimas y agregar gradualmente complejidad según sea necesario.

Y luego obtienes tu auditoría de performance cuando has alcanzado un cierto estado, y te preguntas por qué tienes un 39 en tu puntuación de Lighthouse. Y estabas siguiendo la publicación del blog. Estabas haciendo lo que la community decía que era una buena idea. Pero esa es la consecuencia de usar un SPA. Estás asumiendo toda esta reactivity, y podrías tener que retroceder y cavar a través de las herramientas de desarrollo de React para averiguar cómo puedes recuperar esas métricas de Lighthouse de nuevo. Y ese es el dolor de un sistema opt-out. Entonces, hablando de opt-out, ¿qué significa realmente? Bueno, en primer lugar, mirando la biblioteca Create React, el marco, lo que quieras llamarlo, tiene un camino feliz donde gestionan una gran configuración web para ti. Y si alguna vez necesitas modificar eso o empaquetar tu aplicación de una manera diferente, necesitas optar por no participar, que es usar el asiento de eyección, literalmente solo presionando un botón y gestionándolo todo tú mismo. Lo cual, por supuesto, es una cosa muy aterradora de hacer, por lo que muchas personas simplemente se quedan con Create React app y lo que te da, y evitan optar por no participar en ninguna de las opiniones. También tenemos componentes de estilo, donde el camino feliz es usar JavaScript primero para impulsar la experiencia. Función para impulsar variables en tu CSS, y puedes optar por no participar en cualquiera de los JavaScript del lado del cliente que se desplaza con tus estilos usando variables CSS o alternativas en su lugar. Y se siente como si estuvieras yendo contra la corriente, tienes que hacer un trabajo extra para obtener más performance, por lo que duele que tengas que estar informado sobre las preocupaciones antes de que puedas abordarlas. Y los paneles opt-out de React context. Este es el más fácil de entender, honestamente, donde estás almacenando el estado más arriba, lo cual es muy conveniente si estás almacenando el carrito en la parte superior de tu aplicación para que todos sepan cuántos artículos hay en el carrito. Pero va a ser muy costoso si ese carrito cambia alguna vez, porque como sabes, en cualquier lugar del árbol de React que dependa de ese estado va a volver a renderizar, por lo que necesitas optar por no participar con usememo en cualquier lugar de la aplicación que tenga cálculos intensos, lo cual no es una experiencia muy divertida. Eso, de nuevo, es la auditoría de performance. No es el camino feliz. Podemos resumir eso en un ethos opt-out. Asumes un objetivo, que es una aplicación altamente interactiva, y reduces la fricción del desarrollador para llegar allí, pero necesitas empaquetar la mejor caja de herramientas de antemano para llevarlos allí, ocultando la complejidad, y luego pidiendo a los desarrolladores que se ocupen del monstruo de la complejidad más tarde una vez que hacen esa auditoría de performance y tienen que averiguar qué podrían hacer de manera diferente. Quiero cambiar esa mentalidad con los frameworks más modernos que tenemos hoy. ASTRO es, por supuesto, mi ejemplo favorito, opinión imparcial como empleado. Es una gran manera de hacer un diseño opt-in. Comenzaremos con nuestro Hello World de nuevo. En este caso, no tienes que juntar un montón de herramientas. Puedes usar ASTRO y la plantilla estática para simplemente escribir el Hello World y mostrarlo al usuario. Cero kilobytes de JavaScript. Solo estás usando HTML y CSS para llegar allí. Luego añadimos esa complejidad, el formulario de registro, pero podemos ser un poco más inteligentes sobre cómo lo hacemos. Ahora que es una aplicación estática o quizás una aplicación impulsada por el servidor, podrías usar una simple solicitud POST a un endpoint. Tal vez prevenir el comportamiento predeterminado.

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

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 Conference 2023React Advanced Conference 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.
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.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.