Bajo el capó: React vs. Vue vs. Svelte

May 10 2022
Las ventajas y desventajas de los marcos front-end
Los marcos en el desarrollo front-end se actualizan y cambian constantemente. Desde jQuery en los primeros años hasta React, Vue y Svelte en los últimos años.
Foto de Alison Ivansek en Unsplash

Los marcos en el desarrollo front-end se actualizan y cambian constantemente. Desde jQuery en los primeros años hasta React, Vue y Svelte en los últimos años. Muchos desarrolladores están cansados ​​de los marcos en constante cambio, pero de hecho, muchas de las filosofías de diseño entre estos marcos son las mismas.

Este artículo revelará las similitudes y diferencias entre ellos bajo el capó, con la esperanza de ayudarlo.

Diferencia de sintaxis:

En los días de jQuery, la mayoría de sus marcos se basaban en plantillas de cadenas para la representación. Por ejemplo, guión bajo, baiduTemplate, etc.

Su principio esencial es muy simple, que consiste en llenar la plantilla que escribimos con datos y finalmente convertirla en DOM. Pero esto tiene una desventaja, es decir, cada cambio de datos debe regenerarse y no puede reutilizarse.

En los marcos front-end modernos, Vue y Svelte continúan con esta idea de plantilla. Si los ha usado, seguramente puede hablar uno o dos de los "dialectos" que ofrecen. Por ejemplo, las directivas “v-for”, “v-if” en Vue, etc.

Para los desarrolladores de marcos, estos "dialectos" de plantillas les permiten hacer todo lo posible en tiempo de compilación. Por ejemplo, Vue puede marcar DOM virtuales estáticos que nunca cambian en el momento de la compilación. Entonces, al hacer el algoritmo Diff del DOM virtual, Vue puede omitir estas etiquetas estáticas. De este modo, se reduce la cantidad de cálculo de la CPU y se mejora el rendimiento.

Los marcos más "radicales" como Svelte dependen en gran medida de las plantillas. Siempre que el desarrollador escriba de acuerdo con su sintaxis especificada, convertirá toda la sintaxis de la plantilla en operaciones DOM nativas en el momento de la compilación. Por lo tanto, desecha el voluminoso algoritmo virtual DOM Diff y vuelve a poner todo en el original, lo que mejora el rendimiento.

Foto de Lautaro Andreani en Unsplash

Y React siempre ha admirado a JSX. Utiliza JavaScript para describir el DOM, lo que brinda una gran libertad a nuestro desarrollo. Pero nuevamente, para los desarrolladores de marcos, hay menos optimizaciones que se pueden realizar en el momento de la compilación.

En general, cuantos más "dialectos" se utilizan, más y más complejas las API que proporciona. Por ejemplo, al escribir subcomponentes, React no tiene una API correspondiente, mientras que Vue proporciona la función de ranura y Svelte proporciona 4 API, a saber <slot>, $$slots, <slot name="name" >, <slot key={value}>. Se puede ver que aquellos marcos con más "dialectos" son más caros y propensos a errores para escribir componentes complejos.

Los “dialectos” indudablemente introducen nuevos conceptos y nueva sintaxis. Todo esto trae un cierto costo de aprendizaje para los desarrolladores. Pero al mismo tiempo, la sintaxis restrictiva de “dialecto” también trae más posibilidades al marco.

Diferencia de tiempo de ejecución:

En comparación con el DOM virtual proporcionado por React o Vue, Svelte convierte las plantillas en operaciones nativas de JavaScript, por lo que casi no tiene lógica de tiempo de ejecución adicional. Así que hablemos principalmente de React y Vue.

Vue siempre ha defendido la idea de los datos mutables. En los inicios de [email protected] , no usaba DOM virtual, pero solía Object.defineProperty()realizar enlaces de datos reactivos en todos los datos. Cuando los datos cambian, se puede notificar al oyente correspondiente y se puede cambiar el DOM correspondiente. Sin embargo, si la cantidad de datos es muy grande, habrá muchos oyentes, lo que consumirá en gran medida las operaciones de la CPU y ocupará más memoria. Entonces afectará en gran medida el rendimiento.

Por lo tanto, el algoritmo Diff de DOM virtual se ha agregado a [email protected] e incluso a [email protected] Elevan la granularidad de la supervisión al nivel del componente y limitan la diferencia del DOM virtual al nivel del componente. Cuando los datos en el componente cambian, la tarea Diff del DOM virtual del componente se agrega a la cola de tareas. Y realice el algoritmo Diff en el nextTick proporcionado por Vue.

Esta solución controla los oyentes reactivos a nivel de componente. Reduce en gran medida la cantidad de oyentes (y, por lo tanto, reduce el consumo de memoria y las operaciones de la CPU). Además, también puede ubicar con precisión qué componente o componentes se ven afectados por el cambio de datos actual, lo que reduce efectivamente la magnitud de comparación del DOM virtual (reducción del cálculo de la CPU).

Foto de Denny Müller en Unsplash

React siempre ha defendido la idea de datos inmutables. Cada cambio de datos activará la diferencia de todo el DOM virtual a nivel de aplicación. Si el árbol DOM virtual de la aplicación actual es muy grande, llevará mucho tiempo calcular recursivamente la diferencia de todo el árbol. Entonces, la versión 18 recientemente actualizada adoptó oficialmente la arquitectura Fiber. Esta arquitectura miniaturiza el cálculo de Diff y asigna la cantidad de cálculo al tiempo de inactividad de cada cuadro del navegador a través de una "lista enlazada".

La solución de React no reduce el cómputo de la CPU, pero lo hace de manera inteligente sin comprometer el rendimiento del renderizado. Para obtener más detalles, también puede consultar mi otro artículo:

Cuando necesitamos realizar un seguimiento de los cambios de estado, la inmutabilidad de datos de React nos brinda una gran comodidad. Esto también hace que nuestro código sea más fácil de entender y mantener. Y en mi opinión, la mutabilidad de Vue es solo una conveniencia de escritura.

En comparación con un tipo de marco web que enfatiza la compilación, como Svelte, React y Vue, ambos agregan DOM virtual en tiempo de ejecución. Sin duda, esto agregará una lógica de procesamiento adicional. Pero en mi opinión, el mayor potencial del DOM virtual está en el lado cruzado. Al igual que React-Native, su capa de renderizado real puede llamar a la API de la plataforma correspondiente para dibujar.

Eso es todo por hoy. Soy Zachary y seguiré publicando historias relacionadas con el desarrollo web. Si te gustan estas historias y quieres apoyarme, considera convertirte en miembro de Medium . Cuesta $ 5 por mes y le brinda acceso ilimitado al contenido de Medium. Recibiré una pequeña comisión si te registras a través de mi enlace .

Su apoyo es muy importante para mí, gracias.

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved