¿Deberías usar React en 2023?

Spanish audio is available in the player settings
Rate this content
Bookmark

Los meta marcos están cada vez más populares. La gente critica a React todo el tiempo. ¿Estás loco por seguir usando React? La charla va a cubrir cómo las empresas reales hacen esta evaluación de qué marco elegir. Está hablando sobre las ventajas de usar React, centrándose principalmente en los aspectos positivos pero también ofreciendo pensamientos constructivos sobre por qué podrías no querer usarlo. ¿Deberías usar React en 2023?

31 min
02 Jun, 2023

Video Summary and Transcription

React es una opción popular, pero hay afirmaciones de que está muerto y debería ser reemplazado. React tiene un buen rendimiento fuera de la caja y es adecuado para la mayoría de las aplicaciones. React Native permite compartir código entre React y React Native. Al considerar una migración de React a Svelte, hay que considerar los compromisos. React ofrece una forma estandarizada de trabajar y una fácil incorporación.

Available in English

1. Introducción a React

Short description:

¡Hola a todos! En esta charla, discutiremos si deberías usar React. Tenemos dos ponentes, True y Jordan, que comparten sus experiencias con React. React es una opción popular, pero hay afirmaciones de que está muerto y debería ser reemplazado. Exploremos este tema juntos.

Entonces, hola a todos. Entonces, sí, estamos aquí para hablar sobre no usar apt-router. Jordan, Jordan. Charla equivocada. Lo siento mucho.

Bueno, entonces nuestra charla es, estamos en el año 2023. Y te estás preguntando, ¿debería usar React? Sí. Entonces, hola, soy True. Soy ingeniero de software en Discord, trabajando en la aplicación Discord. Así que construyo características en React y React Native. Y un dato curioso, usé React por primera vez en Uber cuando era pasante allí en 2016.

Y yo soy Jordan. No tengo idea de qué es esta foto mía. Soy líder técnico en MissinLabs. Construyo productos de front-end y formo equipos de front-end allí. Y creo que la primera vez que usé React fue en Nike en 2014. Sí.

Entonces, sí, React es muy popular. Y para muchos de nosotros, en realidad se ha convertido en la elección predeterminada. Especialmente dado que esto es la Cumbre de React, estoy seguro de que para muchos de nosotros, es la elección predeterminada. Pero tal vez has visto este discurso de framework en Twitter. Tal vez has seguido un video de YouTube de clickbait. Y te ha estado diciendo que React está muerto, no deberías estar usándolo. Es lento. Es feo. Es difícil de aprender. Y hay un nuevo framework hermoso que resolverá todos tus problemas. Y eso es lo que deberías estar usando en su lugar. Deberías sentirte mal por usar React. Y estoy seguro de que muchos de nosotros tenemos una respuesta a esta pregunta.

2. ¿Deberías usar React en 2023?

Short description:

¿Deberías usar React en 2023? Usa React si tiene sentido para ti. No todos tienen las mismas necesidades, casos de uso y criterios de evaluación. Comprende cómo evaluarás tus opciones y separa la señal del ruido. React sigue siendo genial. La familiaridad es una buena razón para elegir React.

¿Deberías usar React en 2023? Y supongo que la respuesta es sí, dado el nombre de esta conferencia. Pero esta pregunta, la hemos visto cada vez más, especialmente de personas que son más nuevas en la comunidad. Y realmente no entienden la sutileza de esa discusión que ha estado ocurriendo. Y a medida que React cumple 10 años, es hora de mirar a nuestro bebé de 10 años y decir, ¿está funcionando? Y realmente hacer la pregunta fundamental... ¿Deberías usar React en 2023? Y entonces, afortunadamente, estamos aquí para darte la respuesta definitiva que se aplica a todos los que hacen esta pregunta. Quizás. Sí. Quizás. No lo sé. ¿Por qué lo sabría yo? Depende. Sí, es... Sí, quizás. Entonces, sí. Pero como siempre, pueden aplicarse términos y condiciones.

Entonces, realmente, lo que estamos tratando de decir es que uses React si tiene sentido para ti. Y esto parece una evasiva. Parece que solo queríamos un viaje gratis a Ámsterdam. Pero realmente hay un mensaje subyacente aquí. No todos tienen las mismas necesidades, los mismos casos de uso y los mismos criterios de evaluación cuando miran los frameworks. Y cuando estás tomando una decisión como esta, es realmente importante entender cómo vas a evaluar tus opciones, y separar la señal del ruido. Estas decisiones generalmente no se toman en un vacío, y hay tanta sutileza que entra en eso que puede perderse en este discurso en línea. Y entonces, para entender lo que queremos decir con esto, primero entendamos por qué pensamos que React sigue siendo una gran elección en 2023.

Sí, React sigue siendo genial, no te preocupes. Entonces, el primer gran tema es la familiaridad. Entonces, hago streaming en Twitch, y construyo muchos sitios web. Y entonces, uso React para la mayoría de ellos, porque es con lo que estoy más familiarizado. Y parece super obvio, pero es una buena razón. Es una buena razón. Entonces, conocer React me ayuda a construir más rápido, así que en lugar de aprender en el stream, puedo realmente tener salida de código. Entonces, en el contexto de los pequeños proyectos que construyo en Twitch, esta podría ser la única razón por la que elijo React.

3. Beneficios de React y Recursos Disponibles

Short description:

La familiaridad con React puede ahorrar tiempo en la contratación y la incorporación, especialmente en empresas más grandes. La comunidad de React ofrece amplios recursos, incluyendo documentación, contenido educativo, andamios y meta frameworks como Next.js y Remix. Estas herramientas proporcionan configuraciones predeterminadas sensatas, configuraciones preconfiguradas y funcionalidad extendida. Además, existe una vasta gama de herramientas de código abierto y bibliotecas disponibles para construir con React, como Storybook, MUI, Chakra, Radix, Headless UI, TanStack, Apollo Client, Jotai, Zestand y FrameRemotion.

Pero, como extensión de esto, en una empresa más grande, la familiaridad significa que pasas menos tiempo contratando e incorporando. Entonces, si tienes ingenieros en tu equipo que ya están familiarizados con React, hace que sea una elección fácil de tomar. Y así, personalmente, también como desarrollador de React, cuando me uno a nuevas empresas que han utilizado React, hace que el proceso de incorporación sea mucho más fácil. Y así fue el caso para mí en Discord.

Sí, y en Mystin, hemos estado construyendo nuestros equipos de front-end, y nos hemos inclinado bastante hacia React. Tenemos un conjunto de productos completamente React, y nuestros tiempos de incorporación cuando contratamos solo, o personas que están familiarizadas con React, no solo contratamos desarrolladores de React, pero cuando contratamos personas que están familiarizadas con React, hemos encontrado que su incorporación se reduce drásticamente en cuestión de un par de días, son capaces de hacer contribuciones impactantes a nuestro código base, solo porque tenemos aplicaciones de React bastante estándar y están muy familiarizados con eso.

Además, debido a la enorme comunidad de React, la mayoría de los problemas en React ya han sido resueltos, y probablemente haya algún tutorial en Medium en internet que lo explique. React también tiene una muy buena documentación. Los nuevos documentos que se lanzaron recientemente, son muy buenos, un recurso muy útil, y se actualizan regularmente. Junto con los documentos, también hay mucho contenido educativo en internet en forma de videos de YouTube posts de blog, cursos, etc. También hay andamios, gratuitos y de pago, e incluso meta frameworks como Next.js y Remix que mejoran enormemente la experiencia de desarrollo de React. Todos estos vienen con configuraciones predeterminadas sensatas y configuraciones preconfiguradas, por lo que esto acelera tu proceso de desarrollo y la configuración. También proporcionan funcionalidad extendida más allá de lo que React ofrece de serie. Por ejemplo, Next tiene renderizado en el servidor, generación de sitios estáticos, rutas de API, división automática de código, y hay muchos recursos para construir sitios web con esos frameworks como Next y Remix. Sí, y la documentación en Next también es fantástica. Quiero decir, tienen ejemplos muy completos, siempre y cuando te asegures de estar en las páginas y no en el lado de la aplicación. Pero si te quedas allí, todo está bien. Sí, y junto con esa gran cantidad de recursos, también hay una cantidad insana de herramientas de código abierto y bibliotecas. Literalmente podrías nombrar cualquier cosa, y probablemente hay un paquete npm que te ayuda a construir en React. También podrías probablemente lanzar un sustantivo y existe un paquete npm, también. Sí, casi con seguridad. Así que algunos ejemplos muy conocidos de buenos recursos con React son Storybook, MUI, que al parecer no es MUI. Lo sé, lo aprendí ayer. He estado diciendo MUI toda mi vida. Hemos estado diciendo MUI mucho. Chakra, Radix, Headless UI, TanStack. Sí, que es su propio sub-ecosistema. Tienen TanStack router, TanStack table, TanStack esto, TanStack eso. Todo. Apollo Client, Jotai, Zestand, FrameRemotion, etc., etc.

4. Integraciones del Ecosistema React

Short description:

Existen numerosas integraciones de terceros disponibles en el ecosistema React, incluyendo bibliotecas de clientes GraphQL como Relay. Muchos proveedores de análisis también ofrecen enlaces e integraciones de React, y hay una amplia gama de componentes de interfaz de usuario disponibles. Empresas como Qlrk proporcionan servicios de Auth y una interfaz de usuario de Auth completa, facilitando mucho la gestión de organizaciones complejas.

Hay tantas opciones aquí. Sí, y la mejor biblioteca de clientes GraphQL, Relay, también está disponible en React. Probablemente una historia para otra charla, pero sí. También hay un paquete npm para cada carácter del alfabeto inglés, solo un carácter exportado a la vez. Sí, así que hay muchas de estas integraciones de terceros con React 2, muchos de los patrocinadores de esta conferencia, pero también proveedores de análisis, error monitoring, pruebas A-B testing. Esto es algo que he aprendido mientras lo he estado haciendo en MISTEN. No te creerías cuántos proveedores de análisis sin nombre también tienen enlaces e integraciones de React bastante profundas en el enrutador de React para proporcionar buenos análisis allí. Sí, y también hay muchos componentes de interfaz de usuario disponibles en el React ecosystem. Mencionaste algunos de ellos, pero incluso para casos de uso más complejos como Auth, hay empresas como Qlrk que proporcionan tanto servicios de Auth como una interfaz de usuario de Auth completa. Tienen componentes que te permiten crear organizaciones y cambiar de organizaciones en situaciones de gestión de organizaciones complejas, lo cual es algo loco de pensar que todo ese problema está resuelto ahora. Sí, es genial que no tengas que escribir ningún code. Sí, el mejor code que jamás escribí fue sin duda ningún code. Exactamente, así que, cuadra.

5. Rendimiento e Integración de React

Short description:

React tiene un buen rendimiento de fábrica y es adecuado para la mayoría de las aplicaciones. Los marcos de trabajo como Next.js y Remix proporcionan división automática de código y renderización del lado del servidor, lo que resulta en tiempos de carga mejorados y una mejor experiencia de usuario. Las características de React como Suspense y los Componentes del Servidor de React ofrecen más formas de ajustar el rendimiento. Otras bibliotecas como Quick y SolidJS pueden integrarse con React para componentes críticos de rendimiento. La naturaleza basada en componentes de React permite una fácil integración entre marcos de trabajo.

Entonces sí, y voy a decir algo que contradice una narrativa muy popular en este momento y es que React tiene un bastante buen rendimiento de fábrica. Claro, existen bibliotecas más eficientes y seguro que hay casos en los que React podría sufrir problemas de rendimiento, pero ¿quién no? Así que para la mayoría de las aplicaciones, React funciona muy bien.

Para profundizar en esto, existen muchos marcos de trabajo que mejoran la experiencia web de React, como Next y Remix, ellos existen, lo siento. Next.js tiene división automática de código, lo que mencioné anteriormente, lo que significa que los usuarios solo cargan el JavaScript necesario para la página que están viendo, y esto reduce drásticamente los tiempos de carga, y también utilizan la renderización del lado del servidor por defecto, por lo que aseguran que tengas la mejor experiencia de usuario por defecto para tu sitio. Y sí, estos marcos de trabajo tienen excelentes puntuaciones de Lighthouse de fábrica.

Sí, y también hay características de React que te dan mucha capacidad para ajustar el rendimiento, especialmente algunas de las más nuevas como Suspense y los Componentes del Servidor de React, que no quiero desempaquetar la controversia aquí, pero son formas que nos dan más formas de lidiar con el rendimiento de una manera más matizada. También hay proyectos como Astro por ahí, que han intentado este enfoque de islas para resolver el rendimiento, que es una forma interesante de verlo. En casos extremos, también puedes ser no exclusivo con React, esto es un poco interesante, pero siempre puedes escribir componentes críticos de rendimiento en otras bibliotecas, quizás más eficientes, como Quick o SolidJS y tenerlos integrados en tu árbol de React. La belleza de los marcos de trabajo basados en componentes es que el límite del componente termina siendo bastante bueno y es bastante fácil integrar entre marcos de trabajo. Y, obligatoriamente, como el equipo de React también te recordará, quizás haya un compilador de optimización. He estado escuchando eso durante años, pero resolverá todos nuestros problemas de rendimiento. Entonces, sí.

6. React Native y Construcción de Productos

Short description:

React Native es súper útil porque permite compartir código entre React y React Native. En Discord, los ingenieros de producto trabajan tanto en el front end como en el back end. El conocimiento de React extendido al espacio de las aplicaciones móviles es beneficioso. Missyn también considera React Native para sus productos. React es una gran elección, y está bien no usar todas las características. Enfócate en construir tu producto y no te distraigas con la tecnología brillante.

Y al final del día, probablemente tu aplicación ni siquiera se está enviando, entonces, ¿por qué estamos incluso hablando de performance? Sí. Y sí, algunas otras cosas que quiero mencionar, Discord ha encontrado a React Native súper útil porque usamos React. Y entonces, la capacidad de usar React Native y compartir code entre los dos es súper útil. Y entonces, en Discord, los ingenieros de producto son un poco diferentes. No hay, como, front end o back end. Todo el mundo hace un poco de todo en la pila. Entonces, por ejemplo, para mí, tengo que escribir React Native, tengo que hacer code nativo, todo eso. Y entonces, tener algo que pueda, como el conocimiento de React extendido al espacio de las aplicaciones móviles es súper útil para mí. Y entonces, realmente me gusta eso.

Sí. Y en Missyn, también hemos estado considerando a React Native para algunos de nuestros productos. Y tener una suite de productos que ya está construida en React hace que sea una propuesta mucho más sencilla. Sí. Exactamente. Entonces, sí. Quiero decir, esto suena bastante genial, ¿sabes? React es increíble. Sí, terminamos nuestra masterclass en diez minutos. Entonces, sí, podemos usar React para todo, ¿sabes? Quiero decir, nadie nunca fue despedido por elegir React. Sí, también dicen eso sobre Java. Pero, sí.

Entonces, demos un gran paso atrás. Y entendamos algo de la más sutileza aquí. Solo porque elijas React no significa que necesites elegir cada característica de React. Esto es un poco a lo que estábamos aludiendo antes con algo de la no exclusividad con performance. Hay muchas cosas que podrías no tener que usar en React. Hay muchas características nuevas y geniales como Server Component Suspense, pero está totalmente bien si nadie aquí está enviando una aplicación con eso. En la mayoría de los casos, en lo que quieres enfocarte es en construir tu producto y no en enfocarte demasiado en cómo estás construyendo tu producto. No te distraigas demasiado con la tecnología brillante. No estoy tratando de avergonzarte si lo haces. Yo me distraigo con la tecnología brillante todo el tiempo.

7. Elegir el Marco Correcto

Short description:

React es una buena elección, pero no es la única. Hay muchos desarrolladores de React, pero también hay muchos de Vue, de Svelte, de Solid. Hoy en día, cuando se trata de rendimiento, parece que es una apuesta segura que las nuevas bibliotecas superan a React en alguna métrica de rendimiento. No hay una decisión objetivamente correcta o incorrecta que puedas tomar aquí. Lo que hemos presentado aquí en realidad no es una razón para elegir React. Es un conjunto de criterios de evaluación que hemos mirado a través de la lente de React. Tal vez la familiaridad es lo más importante en tu empresa, o tal vez el rendimiento es realmente crítico. Es realmente subjetivo basado en dónde estás tomando esta decisión. Permíteme darte un ejemplo de cómo la importancia puede impactar estas decisiones. Antes de unirme a Misson Labs, trabajé en Netflix en nuestra aplicación de TV, y uno de los mayores comentarios que recibimos de los usuarios fue que el rendimiento y la estabilidad eran los principales impulsores de la retención de usuarios en nuestras aplicaciones. Realizamos algunos experimentos usando Svelte y vimos mejoras significativas en el rendimiento y la memoria.

Paso mis fines de semana mirando cosas. Ella lo odia. Enfócate en lo que tiene sentido para ti. Realmente, lo que queremos llegar aquí es que React es una buena elección, pero no es la única. Hay muchos desarrolladores de React, pero también hay muchos de Vue, hay muchos de Svelte, hay muchos de Solid. Hay muchos paquetes de React en tooling, pero de manera similar para esos otros frameworks, hay muchos paquetes realmente buenos en tooling.

Hoy en día, cuando se trata de performance, parece que es una apuesta segura que las nuevas bibliotecas superan a React en alguna métrica de performance. Mirando a través de estos criterios de evaluación de los que hablamos antes, si tu equipo está completamente compuesto por desarrolladores de Vue de oficio, tal vez tenga sentido elegir Vue en lugar de elegir React. No tienes que optar por React solo porque tiene un gran ecosystem. Al final del día, es solo un conjunto de compensaciones. No hay una decisión objetivamente correcta o incorrecta que puedas tomar aquí. Tal vez en tu caso sí la hay, subjetivamente para ti, pero no hay un framework globalmente correcto con el que deberías estar trabajando. Es solo cuestión de mirar qué decisión tienes que tomar y mirar qué es importante para ti y evaluarlo contra eso.

Hay muchos desarrolladores realmente geniales por ahí que no usan React, y este es un punto que siempre trato de hacer. Incluso personalmente, me encanta Veep Press. Es un proyecto que se basa en Vue, y algunos de los proyectos favoritos que uso están documentados con Veep Press, pero realmente quiero seguir usando React, y eso es inaccesible para mí. Esa es una compensación con la que estoy cómodo, pero es una compensación al invertir solo en un ecosystem de React. Entonces, realmente, de lo que estamos hablando aquí es qué es importante para ti. Lo que hemos presentado aquí en realidad no es una razón para elegir React. Es un conjunto de criterios de evaluación que hemos mirado a través de la lente de React. Por ejemplo, hemos mirado la familiaridad, el ecosystem, el performance, el soporte nativo, pero hemos asumido que todos estos son igualmente importantes, y en la mayoría de los casos, no lo son. Tal vez la familiaridad es lo más importante en tu empresa, o tal vez el performance es realmente crítico, y necesitas tener una aplicación de performance que tal vez React no pueda satisfacer las necesidades de, y tal vez hay criterios de evaluación completamente diferentes de los que ni siquiera hemos hablado aquí, y es realmente subjetivo basado en dónde estás tomando esta decisión.

Así que permíteme darte un ejemplo, un ejemplo muy concreto, de cómo la importancia puede impactar estas decisiones. Así que antes de unirme a Misson Labs, en realidad trabajé en Netflix en nuestra aplicación de TV, y la aplicación de TV es una gran aplicación de React, hay un reconciliador personalizado de React que funciona con todas las plataformas de TV, es una locura. Trabajé en un equipo que específicamente miraba la memoria y el performance de esa aplicación de React, y uno de los mayores comentarios que recibimos de los usuarios y que vimos en los resultados de las pruebas A-B fue que el performance y la estabilidad eran básicamente los impulsores principales de la retención de usuarios en nuestras aplicaciones. Y la plataforma de TV tiene restricciones realmente interesantes. Estábamos usando un motor de JavaScript que creo que a estas alturas tiene 10 años, como un motor de JavaScript de 10 años, lo cual es una locura. No había forma de ejecutar JIT, y había todo tipo de restricciones interesantes con cómo se pintaban las imágenes en la pantalla, y miramos el modelo de renderizado de React y intersectamos con esas restricciones, terminó con mucha memoria que necesitaba ser recolectada por el recolector de basura. Realizamos algunos experimentos usando Svelte para ver si su architecture de compilador produciría mejoras, y lo que vimos fue que en realidad pasamos 10 veces menos tiempo en pausas de recolección de basura al aprovechar Svelte. Y vimos mejoras similares en el performance y mejoras generales en la memoria a lo largo del resto de la aplicación.

8. Compensaciones en la Migración de React a Svelte

Short description:

Al considerar una migración de React a Svelte, hay que considerar las compensaciones. Perder el acceso a los paquetes de la comunidad y la incorporación de desarrolladores de React a Svelte puede ser un desafío. El intercambio de código y la motivación de otros equipos también juegan un papel. Estas compensaciones dependen del contexto de su proyecto. El uso de datos para tomar decisiones y la evaluación de diferentes soluciones pueden ayudar a consolidar su elección.

Y desafortunadamente, dejé Netflix antes de que pudiéramos realmente capitalizar estos hallazgos, pero cuando miramos esta migración, esta hipotética migración de React a Svelte, miramos nuestros criterios de evaluación y miramos un conjunto de compensaciones. ¿Estamos cómodos perdiendo el acceso a los paquetes de la comunidad que estábamos usando? Francamente, el paquete JSON en la aplicación de TV es alucinante. Es uno de los más grandes que he visto, y perderíamos el acceso a muchos de los paquetes de los que dependíamos anteriormente. Y seguro que había versiones de Svelte de algunas de las cosas que estábamos usando, pero no estaba al punto que estaba con React.

¿Estábamos dispuestos a incorporar a todos nuestros desarrolladores de React a Svelte? Esta es una gran pregunta. Todos fueron contratados para trabajar en una aplicación de React y ahora tenemos que averiguar cuáles son las mejores prácticas. Tenemos que averiguar día a día cómo vamos a enseñar a la gente a usar Svelte, cómo sería esa migración. Y vale la pena señalar que en casos extremos, cambios como este pueden llevar a la rotación de personal. La gente puede estar muy motivada acerca de sus frameworks de JavaScript y querrán seguir trabajando en una pila de tecnología con la que están familiarizados.

¿Y estábamos bien perdiendo el intercambio de código en el que habíamos dependido anteriormente? Netflix era una gran tienda de React y realmente no tendríamos la capacidad de compartir algunos de los componentes que habíamos estado antes. Especialmente dado que los otros equipos no estaban necesariamente motivados de la misma manera que nosotros para hacer este cambio. Y en Netflix, este conjunto de compensaciones era algo con lo que estábamos razonablemente cómodos. Había mucho tiempo y recursos que podríamos dedicar a un proyecto como ese. Pero si estás en una empresa que no necesariamente tiene el rendimiento como métrica número uno, o el tiempo o los recursos para invertir en algo como esto, estas compensaciones podrían aterrorizarte. Y eso está totalmente bien. Es por eso que es realmente clave tomar estas decisiones en el contexto de tu proyecto o empresa Entender qué compensaciones son importantes para ti y cuál es la importancia relativa de cómo estás evaluando tu proyecto.

Y lo otro es que, si te encuentras en una de estas situaciones muy específicas, similar a lo que hicimos con Netflix, tómate el tiempo y trata de usar datos para tomar esta decisión. Así que probablemente lo que quieras hacer es pasar tiempo evaluando cuáles son tus diferentes soluciones, viendo lo que te ofrecen y midiendo muy concretamente si están logrando lo que te propusiste que lograran. Esto es lo que hicimos en Netflix, existe un documento de más de treinta páginas en algún lugar internamente en Netflix, desearía todavía tener acceso a él, que capturó todas las sutilezas entre las diferentes formas de renderizado, las diferentes formas en que funcionaba el renderizado en estos dos frameworks y las alternativas que consideramos, y muy concretamente cuál sería el impacto de eso. Este es un modelo realmente bueno cuando estás tratando de tomar decisiones que van en contra de la corriente. Lo que quiero decir con esto es que si eres una empresa que utiliza principalmente React, estás tratando de convencer a la gente de usar algo más, esa es una decisión que va en contra de la corriente. Este tipo de decisiones tienden a tener una tonelada de inercia detrás de ellas. Generalmente tienes que poner energía en cambiar el rumbo de esa decisión. Y de manera similar a Netflix, cuando estaba en Square estábamos tomando la decisión de mover nuestra aplicación Ruby on Rails a algún framework de JavaScript. Tuve que hacer un análisis en profundidad de Svelte versus Preact, etc. Utilicé datos para compilar esto, mirando cosas como el tamaño del paquete, el tiempo de solicitud, todo eso. Los datos realmente me ayudaron a dar validez a mi elección. Terminé eligiendo Svelte. Pude usar eso y mostrar a las personas no técnicas cosas y señalarles datos para que se sientan mejor acerca de la elección. También ayuda a solidificar cuál será el impacto en el usuario.

9. Reflexiones Finales sobre React

Short description:

React es genial. Tiene excelentes recursos, paquetes y una comunidad de apoyo. Al tomar decisiones, considera el peso que llevan y concéntrate en lo que estás construyendo. Evita el desarrollo impulsado por el FOMO y no te sientas presionado a adoptar nuevas tecnologías solo porque otros las están utilizando. Gracias a todos por asistir a esta masterclass sobre la elección de React. Es controvertido, pero está claro que React tiene muchas ventajas.

Exactamente. Entonces, de todos modos, perdimos la ventaja aquí, pero React es genial. No intento decirte que React es malo. React tiene excelentes recursos, tiene excelentes paquetes. Tiene una gran comunidad. Todos estamos aquí ahora en esta masterclass. Pero también hay más allá. Estas decisiones, ya sabes, llevan mucho peso, así que piensa en lo que estás haciendo antes de tomar una decisión así. Pero en la mayoría de los casos, intenta concentrarte más en lo que estás construyendo y menos en cómo lo estás construyendo.

Y realmente, muy importante, trata de evitar el desarrollo impulsado por el FOMO. Esta es una tendencia que he visto cada vez más en Twitter. La mejor plataforma, supongo. Pero le sucede a los mejores de nosotros. Incluso a mí, el mejor de nosotros. Esto sucede muy frecuentemente. Y sabes, no solo con nuevas bibliotecas y frameworks, sino incluso con nuevas características en React. No te dejes llevar por el FOMO solo porque ves a alguien en Twitter usando algo que quizás quieras usar. No necesariamente significa que necesitas usar eso. Podrías seguir construyendo productos de la manera en que has estado construyendo productos. Pero también, tal vez piensa en lo que están usando, porque tal vez es bueno. Pero no lo sé. Como, sois un grupo inteligente de personas. Estoy seguro de que lo averiguaréis. Sí.

Entonces sí, de todos modos, muchas gracias a todos. Esta es una masterclass. Espero que todos hayan disfrutado de esta pequeña sutileza sobre por qué elegir React o no. Es controvertido, por supuesto, como dije en la apertura. Pero creo que has hecho una gran publicidad para React. Pensaba que serías más insistente, como, yendo, como, no, no, pero ¿Svelde? Quiero decir, sabes, pensé que teníamos que, ya sabes, darle una oportunidad a React dado que es la Cumbre de React.

10. React, Incorporación y Elección de Frameworks

Short description:

A pesar de tener una gran pasión por cosas fuera de React, todavía lo amo. React es una excelente elección, pero no es lo único. React ofrece una forma estandarizada de trabajar y una fácil incorporación. Sin embargo, cuando se trata de elegir entre diferentes frameworks, puede ser desafiante cambiar el stack de tecnología establecido. Unificar el stack de tecnología requiere una cuidadosa consideración y discusiones con el equipo.

Lo hago, quiero decir, a pesar de que también tengo una gran pasión por cosas fuera de React, todavía realmente amo React. Quiero decir, tuve la opción de usar cualquier otra cosa en mi nuevo trabajo cuando estábamos configurando las cosas. Todavía lo elijo por defecto. Creo que todavía es una excelente elección. Quiero decir, es solo que, ya sabes, no es lo único, ¿verdad?

¿Es esta agua de utilería o es agua real? Es agua real. Puedes agarrarla. También es un vaso real. Oh, genial. Sí. Pero una cosa importante es que tocaste al principio, creo, es que el tiempo de incorporación. Creo que React es, además de que es un gran framework y todo, también es una gran forma estandarizada de trabajar. Y de hecho, incluso en una gran base de code, como trabajo en Miro, tenemos unos cientos de desarrolladores de frontend y aún así las personas pueden incorporarse en cuestión de días. Y eso también es uno de los mayores poderes que creo, que tienes al usar cualquier framework probablemente. Y luego, hasta donde yo sé, React es por supuesto el mejor. ¿Estás de acuerdo? ¿Estás de acuerdo? ¿Sí?

Pero, ¿alguna vez te has sentado realmente con tu equipo como diste el ejemplo en Netflix, pero tal vez en Discord como, okay, para este nuevo producto, vamos a ir por el camino de Spelt o vamos por el camino de Angular, o? Ni siquiera sé cómo abordaría eso en Discord. Siento que mucha gente está muy aferrada a sus formas también. Y todo lo que tenemos en Discord se basa en React. React Native sería algo difícil de posicionar. Pero tal vez si hay un sitio de marketing o algo así, eso es algo que podría surgir. Pero sí, no. No creo que haya hecho eso demasiado. ¿Tú? Sí. El ejemplo en Netflix. Sí. Creo que también para mí, como no habíamos elegido realmente un stack de tecnología unificado. Había un proyecto en View, había un proyecto incipiente en Spelt de que la gente estaba hablando. Y luego había, o creo que la gente había estado hablando o había investigado sobre Spelt. Y luego había algunos proyectos de React. Y así que realmente no habíamos tomado una decisión para unificar. Cuando me uní, hablé con muchas personas en el equipo e hicimos la decisión consciente.

11. Consideraciones Contextuales para Elegir React

Short description:

Queríamos elegir React porque estábamos familiarizados con él y vimos potencial para futuros proyectos de React Native. El resultado habría sido diferente si fuéramos desarrolladores de View o tuviéramos problemas de rendimiento. La decisión es altamente contextual.

Entonces, como, vamos, ya sabes, queríamos elegir React. Y por muchas de las razones que hemos hablado. Como que sabíamos que tal vez hay proyectos de React Native en el futuro. Y realmente no vimos los beneficios que creo que algunos de los otros frameworks nos habrían dado, dado que todos estábamos familiarizados con React. Pero creo que si hubiéramos tenido esa discussion y todos fuéramos desarrolladores de View, el resultado habría sido muy diferente. Y creo que si hubiéramos tenido esa discussion y tuviéramos problemas de performance en nuestra aplicación o algo más, como creo que hemos—la narrativa de esa conversación habría sido muy diferente también. Así que es, es muy contextual.

QnA

La Adecuación Contextual de React y la Opción de No Usarlo

Short description:

React nunca es objetivamente malo, pero hay casos contextuales donde puede no ser la mejor opción. Por ejemplo, en el desarrollo de juegos, puede ser un desafío. Si los tiempos de actualización de milisegundos son cruciales, React puede no ser la opción ideal. Sin embargo, React ofrece flexibilidad, permitiendo a los desarrolladores optar por no usar su modelo de renderizado en ciertos casos. Es importante usar React donde se necesita y optar por no usarlo donde no se necesita. React aún puede ofrecer un buen rendimiento, como se muestra en la charla de Misko. Canvas se usa ocasionalmente junto con React en Miro. Una pregunta de Alexander pregunta sobre la disponibilidad de la charla Why Not App Router.

Muy bien, gracias. Tenemos preguntas de la audiencia. Estoy disfrutando de mi propia conversación, pero no se supone que debo hacer esto.

Una pregunta de anónimo. ¿En qué caso crees que React podría ser objetivamente una mala elección? Sí, quiero decir, el caso que siempre se me ocurre es, bueno, no creo que sea nunca objetivamente malo. Creo que es tal vez contextualmente malo. ¿Tienes uno? Tengo uno. ¿Construir juegos con él? Tenemos una charla sobre alguien que construyó un juego propiamente dicho. Fue difícil. Pero creo que ya ha sido, ¿o no? ¿Esa charla ya ha sido? No, es el lunes. Creo que es el lunes. Sí, usé React 3 Fiber, fue una de las cosas más difíciles, fue muy humillante. Creo que el desarrollo de juegos es simplemente difícil. Lo sé, eso es cierto. ¿Cuál fue tu pieza? Creo que nunca es objetivamente malo, creo que es contextualmente malo. Creo que si estuviera trabajando en Bloomberg en su próxima generación de terminal, donde los tiempos de actualización de milisegundos importan, sabes, tal vez algo así, donde realmente te importa mucho. O tal vez, no sé. Estoy seguro de que hay muchos de estos casos extremos donde podría no beneficiarte, pero siempre tienes, creo que uno de los poderes de React es que tienes tantas formas de optar por no usarlo. Como, con Canvas, por ejemplo, React y Canvas tienen una, no son las cosas más estrechas para integrar. Entonces, si estás haciendo renderizado de Canvas, muchas veces simplemente optarás por no usar el ciclo de renderizado de React obteniendo una ref y haciendo mucha lógica imperativa allí. Creo que esa es la belleza de React, es que puedes optar por no usar su modelo de renderizado en muchos casos que normalmente dirías que es una mala decisión. Sí, úsalo donde lo quieras donde lo necesites y opta por no usarlo donde no lo necesites. E incluso, como hemos visto esta mañana con la charla de Misko, puedes simplemente acelerarlo y boom, aún obtienes el rendimiento. Sí, usamos Canvas de vez en cuando en Miro. ¿De vez en cuando? Sí. Sí. Pregunta de Alexander. ¿La charla Why Not App Router también está disponible? Está preguntando por un amigo. Lo siento, ¿qué? La charla que mencionaste al principio, Why Not App Router. Sí.

AppRouter y Reacciones

Short description:

AppRouter existe en mi cabeza. Creo que es genial y divertido que hayamos puesto una diapositiva para provocar a Lee. Las reacciones de la gente a AppRouter son interesantes de ver en Twitter. Personalmente, me encanta e incluso di una masterclass sobre ello.

¿Qué pasa con eso? ¿Realmente existe? Existe en mi cabeza. Quiero decir, creo que AppRouter es genial. Creo que es divertido que estuviéramos hablando en contra de Lee, que es en parte por lo que pusimos la diapositiva allí, solo un pequeño golpe a él. Pero, sí, no creo que realmente tengamos ninguna objeción real aparte de, creo que es gracioso cuánta gente lo odia. También creo que es interesante ver a la gente en ambos lados, a favor y en contra, gradualmente perder la cabeza en Twitter, argumentando los mismos puntos una y otra vez. Creo que a la gente simplemente no le gusta el cambio, ¿verdad? Personalmente, me encanta. Di una masterclass sobre ello, me encanta.

Alcance de React y Libertad de Elección

Short description:

Pregunta de Jay: ¿Cuál es el alcance de React en el futuro? Si se le diera la libertad de elegir, el orador se quedaría con React debido a su utilidad en varios casos de uso y su compatibilidad con Electron y React Native. El orador consideraría minimizar el uso de Flux para las tiendas y explorar alternativas como Zustand. A pesar de ser relativamente joven, Discord ha tenido un impacto significativo. El orador menciona humorísticamente la popularidad continua de jQuery en comparación con la base de usuarios más pequeña de React.

Sí. Pregunta de Jay. ¿Cuál es el alcance de React en el futuro? No estoy seguro de lo que Jay quiere decir con esto. ¿Está Jay aquí? Tal vez Jay pueda elaborar, ¿o Jay está remoto? Jay remoto, ¿puedes elaborar? ¿Jay remoto? No, ¿Jay remoto? ¿Cuál es el alcance de React? Es una gran pregunta. En el futuro. Vamos a preguntarle a Lee. Vamos a preguntarle a Lee. Tendremos que preguntar a los chicos de ForSale. Gracias.

Bien, pregunta de Anónimo. Si tuvieras la total libertad para escribir Discord con un equipo lo suficientemente grande en cualquier framework, ¿te quedarías con React o saltarías a otro framework? Uf. Vale. No creo que lo que cambiaría es React, porque creo que obtenemos muchos buenos casos de uso de él, como Electron y todo eso, y luego React Native es súper útil. Hacemos mucho code nativo también, así que Objective-C, Swift, Kotlin, pero el lado de React Native ayuda mucho. Creo que lo que cambiaría es que usamos Flux para nuestras tiendas, y hay muchas tiendas. Así que encontraría una forma de minimizar eso. Hemos estado incorporando cosas como Zustand. ¿Eso es Zustand? No lo sé. Ese tipo de cosas. Pero aparte de eso, no creo que me quedaría con React. Creo que eso es lo que elegiría, sí. Además, Discord salió como en 2015, 2014, ¿verdad? ¿Es muy joven? Sí. No es tan viejo. Parece que ha estado aquí por siglos. Tal vez me equivoque. Simplemente se me ocurrió una fecha al azar. Nadie verifica los hechos. Espera, ¿qué harías tú? Si yo fuera React, ¿tú? ¿Has oído hablar de jQuery? Hey. Todavía es lo más grande que hay. Quiero decir, React es una fracción de la base de usuarios de jQuery.

Uso de Rust y Tori, TRPC y GraphQL

Short description:

Utilizo Rust y Tori para mis proyectos. Rust se puede compilar a Wasm, lo que permite que todo esté en Rust. Se hizo una pregunta sobre TRPC, y el orador compartió su experiencia positiva con él. También mencionaron la invención de una herramienta similar llamada MagicAPI. A pesar de que le gusta TRPC, el orador prefiere GraphQL.

Oh no, ¿sabes qué hago? Utilizo Rust. Y uso Tori. Bueno, eso es cierto, sí. Entonces todavía tienes que tener una capa de UI. Sí, eso es cierto. Eso es cierto. Rayos. Correcto. Rust. Compílalo a Wasm. Y luego haz que todo esté en Rust. Suena como un desarrollo impulsado por la seguridad adecuado justo ahí. Exactamente. Exactamente.

Aquí hay una pregunta de not-Teo. Not-Teo, así que Teo no está haciendo esta pregunta. Creo que Teo está remoto. ¿Cuál es tu opinión sobre TRPC? Oh. Entonces, está bien, lo usé hace mucho tiempo para un proyecto y fue súper, súper impresionante. Fue realmente fácil de usar. Soy realmente malo hablando sobre el lado técnico de las cosas, así que él fue el que me presentó a TRPC para ese proyecto si quieres hablar un poco sobre ello. Dato curioso, inventé TRPC antes de que fuera inventado. Está en mi GitHub. Se llama MagicAPI. Publicidad descarada. Quiero decir, es horrible. No lo uses. Pero, no, me encanta TRPC. Me gusta más GraphQL. Soy un gran fan de GraphQL.

TRPC, Implementación de React y Palabras Finales

Short description:

TRPC puede ser una gran solución para resolver problemas a menor escala, pero puede no ser adecuado para grandes empresas con miles de microservicios. La implementación de React en sistemas ya construidos, como los sistemas de gestión de servicios de TI, es altamente contextual y depende de factores como los procesos de la empresa y los alcances del proyecto. El enfoque adoptado puede variar enormemente, desde discusiones de un año hasta migraciones sencillas. ¡Gracias por asistir a esta charla y disfruta tu tiempo en Ámsterdam!

Pero creo que TRPC resuelve muchos problemas, especialmente a menor escala. Creo... No puedo imaginar usando TRPC en una empresa del tamaño de Netflix, pero creo que TRPC es genial. Sí, incluso para muchas empresas. Es solo que, ya sabes, cuando tienes mil microservices y estás tratando de agregarlos en un gran gráfico, creo que TRPC no sería la mejor decisión.

Muy bien. Gracias. Sí. Y luego tenemos tiempo para una pregunta más. Y es de un gran visitante llamado Anónimo. ¿Qué enfoque deberíamos usar al implementar React en sistemas ya construidos? Por ejemplo, sistemas de gestión de servicios de TI. ¿Quieres responder a esta? No tengo muchas opiniones. Quiero decir, como el punto principal de la charla, que es, ya sabes, es una evasiva, pero es muy contextual, y cómo opera tu empresa es diferente. Quiero decir, como, ya sabes, el enfoque que tomé en Netflix, por ejemplo, fue, quiero decir, duró un año y todavía era una discussion en curso cuando me fui. Y hasta el día de hoy, un año después, todavía hay alguna discussion en curso sobre, ¿cuál es la próxima cosa? Así que no es una discussion fácil y cada empresa lo abordará de manera diferente. Pero de manera similar, en mi empresa actual, hemos hecho migraciones de view a react que fueron tan simples como ir a un grupo de personas y decir, oye, ¿estamos todos de acuerdo con esto, ¿verdad? Así que va a variar mucho según, ya sabes, el proceso de tu empresa, ya sabes, cómo, cuál es el alcance de estos proyectos, todo eso. Pero sí.

Muy bien, nos quedan menos 13 segundos. ¿Algún último comentario? Ninguno. Fue genial dar esta charla. Muchas gracias por invitarnos. Muy bien. Disfruta el resto de tu tiempo en Ámsterdam. Gracias.

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

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
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 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. 
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.
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.
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 Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
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 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
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 Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
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 Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
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.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
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.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
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