Por qué Todos Necesitan un Marco de Trabajo

Rate this content
Bookmark

El consejo predominante sobre cómo usar React hoy en día es usar un marco de trabajo: ya sea para comenzar con uno o para adoptar uno de manera incremental. Esta charla de inmersión profunda explorará por qué, y cómo hacerlo con ejemplos de código en vivo.

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

FAQ

Un framework es un conjunto de opiniones y herramientas que proporciona un marco de trabajo preestablecido dentro del cual desarrollar software. Facilita el manejo de tareas comunes como el enrutamiento, la obtención de datos y la renderización del lado del servidor, acelerando el desarrollo y mejorando la eficiencia.

Usar un framework con React, como Next.js o Remix, ayuda a manejar aspectos complejos del desarrollo como la renderización en el lado del servidor y la obtención de datos, lo que permite a los desarrolladores centrarse en construir la funcionalidad específica de la aplicación y mejorar la experiencia del usuario.

La renderización en el lado del servidor permite que una página web sea procesada en el servidor antes de ser enviada al navegador. Esto mejora la velocidad de carga, el SEO y la accesibilidad de la página, ya que el contenido está disponible incluso si JavaScript está deshabilitado en el navegador del usuario.

Los frameworks resuelven problemas comunes como la gestión del enrutamiento tanto en el cliente como en el servidor, la optimización de la obtención de datos para evitar cascadas de red y lentitud, y proporcionan abstracciones que simplifican el desarrollo de aplicaciones complejas.

No necesariamente. La decisión de usar un framework depende de la complejidad del proyecto y de los requisitos específicos. Para aplicaciones simples o pruebas de concepto, un framework puede ser excesivo, pero para aplicaciones más grandes y complejas, un framework puede ofrecer estructura y eficiencia significativas.

Tejas Kumar
Tejas Kumar
39 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora el valor de usar marcos de trabajo en el desarrollo de software, centrándose específicamente en React y su impacto en el desarrollo web. La charla profundiza en los beneficios de los marcos de trabajo, como resolver desafíos de enrutamiento y obtención de datos, manejar casos extremos y proporcionar renderizado del lado del servidor. También introduce el concepto de componentes de servidor y su papel en el renderizado del lado del servidor. La charla destaca las ventajas de la navegación suave y la comunicación fluida entre el cliente y el servidor. En general, los marcos de trabajo ofrecen una funcionalidad valiosa que mejora la productividad y aborda desafíos comunes de desarrollo.
Available in English: Why Everybody Needs a Framework

1. Introducción a los Frameworks

Short description:

Hoy estamos aquí para hablar de por qué todos necesitan usar un framework. React ha revolucionado la forma en que construimos en la web. Andrew Clark del equipo de React en Vercel publicó que si usas React, deberías estar usando un framework de React. Un framework es esencialmente un conjunto de opiniones que te ayudan a acelerar tus flujos de trabajo de desarrollo.

¡Hola! ¿Cómo estamos? Bueno, trabajaré con eso. Es la última charla del día. Sabes, dato curioso, tengo 25 minutos. Está en 16 minutos. Tengo 20 minutos, ¿verdad? Pero es la última charla, así que técnicamente, tengo todos los minutos. Porque la fiesta después de aquí es a las 7. Pero de todos modos, intentaré respetar tu tiempo. El organizador me está mirando aquí como, hey, hey, ahora.

Soy Tejas. Se pronuncia, como, contagioso. Puedo decir eso ahora porque las cuarentenas, en su mayoría, han terminado. Y he tenido el privilegio de trabajar en alguna capacidad, ya sea como consultor o como empleado en varias empresas de tecnología a lo largo de mi carrera. Y es una oportunidad por la que estoy realmente agradecido. Y a través de ella, llego a experimentar un montón de cosas diferentes, ¿verdad? Hoy, dirijo una pequeña pero efectiva agencia de relaciones con desarrolladores donde apoyamos herramientas para desarrolladores, empresas orientadas a desarrolladores, comunicamos, transmitimos su mensaje y realmente refinamos esa experiencia de desarrollador, ¿vale? Pero eso no es de lo que estamos aquí para hablar hoy. Hoy estamos aquí para hablar de por qué todos necesitan usar un framework. Y podrías estar leyendo esto y preguntándote, ¿qué significa eso? ¿Todos necesitan usar un framework? Idealmente, aclaramos algunas de esas cosas hoy. Solo necesito hacer una aclaración. No soy... No trabajo en React. He estado trabajando con React desde 2013, 2014, y lo amo profundamente. Tengo el privilegio de conocer a algunos del equipo. Y el trabajo que hacen es inspirador e intelectual y resuelve problemas del mundo real con abstracciones altas que simplemente hacen el trabajo y te hacen a ti, chicos, los héroes. Así que si podemos escucharlo por el equipo. Realmente lo agradecería... Sí. Sí. Ha... Creo que es quedarse corto decir que React ha revolucionado la forma en que construimos en la web. Y creo que vale la pena reconocerlo.

Entonces, ¿por qué todos necesitan usar un framework? ¿De dónde viene esto? Anteriormente en X, la plataforma anteriormente conocida como Twitter, Andrew Clark del equipo de React en Vercel publicó esto en enero. Dijo, si usas React, deberías estar usando un framework de React. Si tu aplicación existente no usa un framework, deberías migrar incrementalmente a uno. Si estás creando un nuevo proyecto de React, deberías usar un framework desde el principio. Algunos de ustedes podrían estar pensando, ¿pero no es React un framework? ¿Es React una biblioteca o un framework? No estamos haciendo eso hoy. Vamos a las redes sociales y peleamos. No. Pero por framework, a lo que Andrew se refiere es algo como Next.js o ReMix, etc. Y me encanta esto. Yo uso framework. ¿Alguno de ustedes está usando frameworks aquí en producción? Bueno, casi todos. Para aquellos de ustedes que no, hablemos de por qué. Y esto es lo que quiero hacer hoy. Esto es genial, pero quiero entender el mecanismo que nos lleva a llegar a esa conclusión. Como, ¿por qué uno dice esto? Y para entender el mecanismo, tienes que responder a la pregunta, ¿qué es un framework? Y un framework es esencialmente un conjunto de opiniones. Es un marco dentro del cual trabajas, literalmente. Te da opiniones sobre el enrutamiento, sobre la obtención de datos, sobre dónde renderizas el servidor o el cliente en algún lugar intermedio. Y estas opiniones se manejan por ti para que puedas, ¿qué puedes hacer? Puedes construir tu producto con velocidad. No tienes que resolver estos problemas individualmente. Así que son las opiniones las que te ayudan a acelerar tus flujos de trabajo de desarrollo, ¿vale? Si refinamos un poco, ¿qué hacen los frameworks? ¿Qué hacen los frameworks? Bueno, muchos de ellos se superponen. Esto puede que no sea cada framework, pero Next JS, Remix.

2. Frameworks y Demo

Short description:

Resuelven el enrutamiento tanto en el lado del cliente como en el del servidor. Los frameworks facilitan y hacen más eficiente la obtención de datos. También manejan casos extremos que podríamos pasar por alto. Vamos a sumergirnos en una demostración que muestra la renderización en el lado del servidor y la obtención de datos. Exploraremos una aplicación de pila completa y llenaremos una base de datos de forma interactiva. La aplicación es una aplicación de chistes que consulta una base de datos y renderiza chistes tanto en el lado del cliente como en el del servidor. Repasaremos el código y jugaremos con la aplicación.

Realizarán la renderización en el lado del servidor. ¿Cuántos de ustedes hacen la renderización en el lado del servidor en producción? Vale. Casi todos los que usan un framework, genial. Resuelven el enrutamiento pero no solo en el lado del cliente. También en el lado del servidor. Enrutamiento isomórfico. Y esto es útil por varias razones porque anteriormente, cuando estábamos haciendo solo cosas del lado del cliente, solíamos enviar 404's. No sé si todos ustedes recuerdan esto. Solíamos enviar códigos de estado 404 desde el lado del servidor y luego una página 404 HTML se activaría en el lado del cliente y te daría una aplicación. Pero esto es fundamentalmente una mentira del cliente al servidor, ¿verdad? Y los frameworks resuelven eso.

Número tres, la obtención de data es tremendamente más fácil con los frameworks. Si te pregunto, ¿cuál es el mejor lugar y cuándo es el mejor momento para obtener data en tu aplicación React? ¿Qué me dirías? ¿Me dirías que uso el efecto y obtengo dentro del efecto y luego establezco el estado? Ese es un patrón muy común pero es un patrón problemático porque conduce a ¿qué? Conduce a, te veo, esto es React Advanced. No estamos en el jardín de infantes aquí, ¿verdad? Conduce a cascadas de red. Conduce a cosas lentas. Tienes que renderizar primero, eso lleva tiempo. Está limitado por la CPU y luego tienes que obtener y luego tienes que renderizar y no es rápido, no es eficiente y tu user experience sufre. Así que los frameworks resuelven muchos de estos problemas para nosotros y más. De hecho, resuelven todos los casos extremos que probablemente pasamos por alto porque están construidos por comunidades muy grandes que se encuentran con problemas que nosotros podemos tener el próximo año hoy. OK.

Así que esa es la teoría de ello pero ya estoy aburrido con mis diapositivas y supongo que simplemente haremos una pequeña demostración de eso. Esta es una demostración que resuelve esas cosas. Resuelve la renderización en el lado del servidor, resuelve la obtención de data, etc. Es algo interactivo y es el final del día, simplemente juguemos. Como estamos hablando de renderización en el servidor y obtención de data, necesitamos una aplicación de pila completa. Necesitamos un frontend, necesitamos un backend. Hay muchos backend listos para usar. Si necesitas una API rápida, está dog.ceo donde puedes consultar un montón de perros. Como estamos en Londres, estaba buscando un buen backend. Resulta que encontré una startup con base en Londres que ha estado muy callada pero ha estado construyendo algo realmente genial. Me sentí tan compelido, cené con los fundadores anoche. Me sentí tan compelido que simplemente lo puse en mi presentación y se lo mostré a todos. Tengo permiso para esto pero quiero completar toda la pila de la pila. Esta es la aplicación que tenemos, así que si vamos al navegador, si vamos al código, OK. Así que es una aplicación de chistes. Dice que no hay chistes. No sé si puedes leer eso, es intencionalmente pequeño pero esencialmente va a consultar una database donde viven los chistes y los renderizará. Primero en el lado del cliente, luego en el servidor y lo haremos juntos. Pero necesitamos llenar esta database de alguna manera. Permíteme guiarte un poco por el código y luego lo llenaremos de forma interactiva. OK. Es el final del día así que juguemos un poco. Si miramos el código, ¿qué tenemos? Tenemos una aplicación React aquí. ¿Ese tamaño de fuente está bien? ¿Puedes ver en la parte de atrás? ¿A nadie le importa? Genial. OK. Vamos... ¡Boom! Ahí vamos. Así que, una aplicación React muy básica. Estamos hidratando el documento con un diseño y si tenemos un ID de chiste, es una respuesta, de lo contrario es una pregunta. Es un tipo de chiste de pregunta y respuesta, ¿verdad? ¿Por qué cruzó el pollo la carretera? Porque había hidratación, no lo sé. Lo que sea.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
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.
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.
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.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
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.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn