Video Summary and Transcription
La charla de hoy explora los modernos frameworks de front-end React, SolidJS y Quick. La popularidad de React se atribuye a su arquitectura basada en componentes y su extenso ecosistema. SolidJS se distingue por su reactividad detallada, uso eficiente de la memoria y API amigable para los desarrolladores. Quick (QUIC) se destaca por sus tiempos de carga rápidos, capacidad de reanudación, renderizado en el lado del servidor y priorización de la experiencia del desarrollador. La función de carga bajo demanda de QUIC mejora el tiempo de carga inicial de la página al posponer la ejecución de código no crítico.
1. Introducción
Hola a todos. Hoy vamos a hablar sobre la navegación de las innovaciones modernas en el front-end y algunos frameworks: React, Solid y Quick. Soy Renessa Ghosh, una defensora del desarrollo en CKDedder. Vamos a repasar rápidamente estos frameworks y discutir sus características y beneficios únicos.
Hola a todos. Soy Renessa Ghosh. Soy una defensora del desarrollo en CKDedder, y hoy vamos a hablar sobre la navegación de las innovaciones modernas en el front-end y lo que eso significa en este mundo de frameworks en constante cambio. Específicamente, vamos a hablar sobre algunos frameworks, React, Solid y Quick. Pero antes de eso, déjenme contarles un poco más sobre mí. Como dije, soy Renessa Ghosh. Soy desarrolladora y también especialista en marketing. Comencé mi carrera en IBM Cloud como ingeniera full-stack. Luego pasé al marketing para desarrolladores en DigitalOcean, y ahora soy desarrolladora en CKEdder. Si no recuerdan nada sobre mí, solo recuerden que me encanta viajar, y el país al que viajé más recientemente fue Islandia. Así que basta de hablar de mí.
La charla de hoy. La charla de hoy es una charla rápida, así que vamos a pasar rápidamente por tres cosas diferentes. React, vamos a hablar sobre ese poderoso ecosistema que todos conocemos y amamos, ¿verdad? Toda esta cumbre se llama Cumbre de React. Luego vamos a hablar sobre Solid.js. Redefinió esta cosa llamada reactividad, una reactividad detallada. Vamos a hablar un poco sobre eso, y luego vamos a hablar sobre Quick.js, donde la gran innovación de ese framework fue optimizar los tiempos de carga iniciales. Era un problema enorme que resolvieron. Y finalmente, vamos a decir cuál es la mejor decisión para tu proyecto. Y te voy a dar un poco de un framework para comenzar. Así que empecemos.
2. React y SolidJS
React es más que una simple biblioteca, es todo un ecosistema. Tiene una arquitectura basada en componentes, un DOM virtual y un ecosistema extenso y en constante evolución. La popularidad de React se debe a su amplia adopción, soporte de la comunidad, integración con herramientas modernas y características avanzadas como el modo concurrente. SolidJS, al igual que React, tiene una reactividad detallada como una de sus grandes características.
React, definitivamente es más que una simple biblioteca hoy en día. Es todo un ecosistema. ¿Verdad? Ha estado a la vanguardia del desarrollo front-end, según mi opinión, durante años, desde que recuerdo el desarrollo front-end. Y las cosas que realmente lo destacan son estas cosas como el DOM virtual y la arquitectura basada en componentes, innovaciones realmente importantes para su tiempo. Así que hay seis cosas que creo que hacen que React se destaque, la arquitectura basada en componentes. La forma en que React está diseñado realmente gira en torno a componentes reutilizables, lo que facilita la gestión y escalabilidad de estas aplicaciones grandes. El DOM virtual, eso es bastante genial porque utiliza esta representación virtual del DOM en lugar de interactuar directamente con el DOM como lo hacen tus típicos HTML y JS, lo que le permite actualizar eficientemente la interfaz de usuario solo volviendo a renderizar los componentes que realmente necesitas, ¿verdad? Y finalmente, lo que hace es tener este ecosistema extenso o en constante evolución, como quieras llamarlo. Desde soluciones como Redux hasta Mobex, React Router e incluso cosas como Create React App, que por supuesto ahora está degradado, y Next.js para el renderizado en el lado del servidor, este ecosistema está en constante evolución y es tan vasto y versátil que prácticamente cualquier problema que puedas tener con cualquier tipo de aplicación web ya ha sido resuelto por la comunidad o por los mantenedores de React.
Entonces eso me lleva a esta amplia adopción y al soporte de la comunidad. La popularidad de React realmente se ha derivado del hecho de que tiene una comunidad tan grande y un ecosistema rico en bibliotecas y herramientas. La adopción es tan grande y la comunidad proporciona tantos recursos y apoyo, desde proyectos de código abierto hasta soporte profesional, que realmente mejoran la productividad y el aprendizaje de los desarrolladores. Y luego, hay algunas cosas como la integración con herramientas modernas. No es solo este antiguo framework que se queda en el fondo. Hoy en día, React se integra con Next.js y ofrece una solución integral con herramientas como Vite, por ejemplo. ¿Verdad? Así que realmente se integra en tus herramientas modernas y, por supuesto, mira hacia el futuro. Creo que hubo esta nueva función llamada modo concurrente, que permite que React prepare múltiples versiones de la interfaz de usuario al mismo tiempo, que son cosas muy nuevas y geniales que están sucediendo en React. Así que es un gran framework, ¿verdad? Y quiero asegurarme de decirlo aquí. Y veamos un ejemplo de cómo suele verse un componente en React. Tienes un componente de función, tienes una visualización de tiempo aquí, que es solo un contador que actualiza los segundos. Y aquí tengo tiempo y establecer tiempo, y lo mantiene actualizado con la fecha actual. Y 1000 me dice que cada segundo quiero actualizar mi tiempo y establecer el tiempo a la nueva fecha y luego seguir borrando el intervalo mientras hago esto. Y luego lo pongo en un div, ese fragmento de código, y listo. ¿Verdad? Y esto parece muy simple, pero lo que realmente estamos haciendo aquí es manejar estos datos dinámicos, como el tiempo, de manera muy eficiente simplemente colocándolos en esta función, conectándolos con el estado y dejándolos funcionar. Eso es realmente poderoso. Lo que acabamos de hacer es un fragmento de código y lógica muy simple, pero la separación de responsabilidades y la capacidad de manejar estos datos dinámicos de manera eficiente es realmente lo que distingue a React. Ahora, pensemos en SolidJS, ¿verdad? Acabamos de hablar de React y lo genial que es. SolidJS está ganando rápidamente popularidad, ya sea en Reddit, Twitter, en todas partes. Y honestamente, en mi opinión, es muy similar a React, porque adopta este modelo reactivo que difiere de React, pero el código se ve muy similar, ¿verdad? Entonces, ¿qué hace que esto sea genial? Estas son las seis cosas. Para SolidJS, hay algo llamado
3. Características de SolidJS
SolidJS opera en un sistema de reactividad detallada, evitando renderizados innecesarios. Elimina el DOM virtual, lo que resulta en menos sobrecarga, actualizaciones más rápidas y uso eficiente de la memoria. El compilador optimiza el seguimiento de dependencias y la reactividad de los componentes, reduciendo la sobrecarga en tiempo de ejecución. SolidJS también tiene una API amigable para los desarrolladores, un ecosistema en constante evolución y es adecuado para aplicaciones de alto rendimiento y grandes.
Reactividad detallada. Hablé de esto al principio. Ahora profundizaré en ello. A diferencia de los frameworks más grandes que utilizan un DOM virtual, como React, SolidJS realmente opera en este sistema de reactividad detallada, por lo que realiza un seguimiento de los cambios a nivel de cada pieza de estado, lo que te permite actualizar la UI de manera precisa y evitar estos renderizados innecesarios, en mi opinión. Luego, el hecho de que SolidJS simplemente elimine el DOM virtual, dice, no lo necesitamos, ¿verdad? Es una gran diferencia con los frameworks como React. Entonces, mantiene un código que se ve muy similar, y lo veremos más adelante, pero elimina el DOM virtual. Por lo tanto, hay menos sobrecarga, actualizaciones más rápidas, y un uso más eficiente de la memoria. Y no estamos hablando de esto en términos que puedas darte cuenta en tu experiencia diaria, pero reduce mucha sobrecarga. Y luego, optimizaciones compiladas. El compilador de SolidJS optimiza el seguimiento de dependencias y la reactividad de los componentes durante la fase de compilación, por lo que gran parte de la lógica de reactividad se resuelve en tiempo de compilación, lo que significa que en tiempo de ejecución, en realidad tienes menos sobrecarga. Esto también es ligeramente diferente a cómo funciona React. Y luego, algunas otras cosas. Tiene una API amigable para los desarrolladores. Tiene
4. SolidJS y QUIC
SolidJS es adecuado para aplicaciones de alto rendimiento y grandes. QUIC se destaca por lograr tiempos de carga rápidos sin sacrificar funcionalidad. Tiene capacidad de reanudación, renderizado en el lado del servidor, entrega incremental y optimización para SEO y rendimiento. QUIC también prioriza la experiencia del desarrollador y la mantenibilidad.
un ecosistema en constante evolución. Muchas personas lo han adoptado. Y en cuanto a los casos de uso y escalabilidad, es muy liviano y eficiente, lo que lo hace muy adecuado para estas aplicaciones de alto rendimiento y aplicaciones grandes. Veamos cómo se ve el código de SolidJS. Aquí podemos ver el sistema reactivo de SolidJS en acción. La función createSignal crea una señal reactiva para la matriz de elementos. Entonces, cuando se llama a la función addItem, solo los componentes que realmente dependen de los elementos se volverán a renderizar. Esto es el seguimiento preciso de Solid. Solo estamos escribiendo un código que creemos que es lo mismo y que establece los mismos elementos y todo eso, pero solo los componentes específicos y que dependen de la matriz de elementos se actualizarán. Y eso es bastante significativo porque no estás cambiando mucho desde una perspectiva de código, pero quería que vieras cómo esto puede cambiar y evolucionar y realmente hacerlo muy bueno incluso para el renderizado dinámico de listas. Ok. Pasemos a QUIC. QUIC es probablemente el contendiente más nuevo de estos tres frameworks, pero es realmente genial porque está diseñado para abordar uno de los aspectos más desafiantes del desarrollo web moderno. Y eso es lograr tiempos de carga rápidos sin sacrificar funcionalidad. Entonces, ¿qué significa eso? Bueno, aquí hay seis cosas que hacen que QUIC se destaque de los otros frameworks. Capacidad de reanudación, ¿verdad? QUIC tiene la capacidad de serializar y deserializar el estado de la aplicación, lo que permite pausar y reanudar los componentes exactamente donde se quedaron. Como un video, pero mejor. Esta capacidad asegura que solo se carguen y ejecuten el código y los datos absolutamente necesarios, lo que contribuye significativamente a esos tiempos de carga iniciales. Luego está el renderizado en el lado del servidor, ¿verdad? Pero es un poco diferente. Por eso tengo esa estrella allí. A diferencia del SSR tradicional, QUIC optimiza la entrega enviando un HTML mínimo y un código mínimo necesario para que la página sea interactiva. Y las funcionalidades adicionales, incluidas las funciones, solo se cargan según sea necesario, lo cual es un gran avance en comparación con las soluciones de SSR tradicionales de hoy en día. Luego tiene esta cosa llamada entrega incremental. Está basado en el concepto de reanudación que acabamos de mencionar, lo que permite a QUIC ofrecer entrega incremental tanto para la carga inicial de la página, creo, como para el estado. Esto significa que después de la carga inicial de la página, cualquier interacción adicional puede cargar dinámicamente más características y datos según la demanda, adaptándose al recorrido real del usuario con la aplicación. Y finalmente, QUIC, que se destaca, se optimiza para SEO y rendimiento. Muchos creadores de contenido y cualquier persona que quiera que su sitio web sea descubierto pueden emocionarse con esto, porque realmente asegura que los motores de búsqueda puedan llamar e indexar su contenido eventualmente, lo cual es crucial para el SEO. Y si alguno de nosotros ha trabajado con contenido, sabemos lo importante que es que nuestro sitio esté ahí fuera. Y luego, por supuesto, al igual que los otros frameworks, tiene experiencia del desarrollador y mantenibilidad que son igualmente
5. QUIC's On-Demand Loading
La carga bajo demanda de QUIC mejora el tiempo de carga inicial de la página al posponer la ejecución de código no crítico en lugar de la carga inicial de la página.
importante. Un fragmento rápido de código de cómo se ve QUIC. En este ejemplo, podemos ver que es muy similar. Tienes este use store, así como un componente que obtienes del constructor de QUIC. Y lo que quiero señalar es que, si observas el controlador de clics, hay este signo de dólar , ¿verdad? Que estás trayendo el componente signo de dólar, que es lo que has traído. Y lo que esa sintaxis, ese signo de dólar le dice al compilador de QUIC es que esta función, state.count plus plus, o cualquier función que le siga, solo se cargará y ejecutará cuando el usuario haga clic en el botón. Entonces, honestamente, cuando cargas la página, esa función, en realidad, esa parte de JavaScript no existe. Entonces, imagina en una aplicación a mayor escala, la cantidad de botones y la cantidad de pequeñas piezas de lógica que están ahí, pero que realmente no necesitas cargar al principio. Entonces, este tipo de carga bajo demanda mejora el tiempo de carga inicial de la página, porque estás posponiendo toda esta ejecución de código no crítico, en lugar de la carga inicial de la página. Lo cual creo que es una innovación tan genial de QUIC. Entonces, decisiones. ¿Cómo eliges entre todos estos frameworks? Bueno, vamos a compararlos en una matriz de decisiones. En mi opinión, estas son tres cosas importantes cuando evalúas un framework para un proyecto de ingeniería de software. Rendimiento, tamaño del paquete y experiencia del desarrollador. Rendimiento, porque quieres saber qué te dará los tiempos de carga más rápidos para tus usuarios, si eso es lo que es importante para ti. ¿Verdad? Y los tres frameworks, honestamente, tienen un alto rendimiento. Pero React, como mencioné, debido a su DOM virtual, tiene mucho sobrecarga. Es alto, pero no es muy alto en comparación con Solid y QUIC. Solid, por supuesto, debido a su sistema de reactividad, tiene un rendimiento muy alto. Y QUIC es extremadamente alto simplemente porque tiene carga bajo demanda, y no se puede competir con la carga bajo demanda. Luego tienes el tamaño del paquete. Si miras React, el tamaño puede variar mucho dependiendo de la complejidad de la aplicación y cosas así. Entonces, es una aplicación de tamaño relativamente bueno que terminarás teniendo, especialmente si descargas muchas bibliotecas. SolidJS es en realidad bastante bajo. Solo produce paquetes más pequeños porque... Um... Sí, solo produce paquetes más pequeños, porque elimina la necesidad de un DOM virtual, por lo que no necesitas muchas bibliotecas que expliquen cómo comunicarse con eso. Y luego QUIC, por supuesto, su objetivo principal es tener el tamaño de carga inicial más pequeño posible, y solo carga el código necesario en tiempo de ejecución, lo que reduce drásticamente el tamaño del paquete. Y luego, en términos de experiencia del desarrollador, diría que, debido a que React es tan antiguo, tan popular, tiene la mejor experiencia del desarrollador, simplemente debido a este enorme ecosistema, en comparación con Solid y QUIC. En última instancia, creo que si miras todos estos frameworks, a primera vista, podrías pensar, okay, QUIC es mi opción porque me brinda un alto rendimiento y un tamaño de paquete bajo. Pero eso no es realmente cierto, porque como señalé, hay algunas peculiaridades y una pequeña curva de aprendizaje cuando se trata de QUIC y la documentación y la comunidad. Es tan nuevo que si te encuentras con algunos problemas de ingeniería más grandes, es posible que aún no se hayan resuelto. Es posible que los estés resolviendo tú. Y realmente necesitas determinar si tu equipo tiene el tiempo para resolverlos. Entonces, es rápido, es eficiente, pero la comunidad aún está creciendo, y eso es lo mismo para Solid JS. En última instancia, debes decidir qué funciona mejor para ti y tu proyecto. Entonces, finalmente, mis últimas palabras de sabiduría y pensamientos en torno a esto es simplemente abrazarinnovación y el desarrollo front-end, porque eso va a suceder mensualmente. Y con IA, no puedo imaginar lo que va a suceder con el mundo del front-end. Y solo estoy emocionado por lo que esa innovación va a traer. Y finalmente, si te llevas algo, simplemente recuerda que todas estas palabras de moda y tecnologías vendrán hacia ti, pero la mejor tecnología es aquella que resolverá tu problema específico de manera muy eficiente y efectiva. Gracias, ¿alguna pregunta?
Comments