Get best of the week

¿Es hora de olvidarse de React y actualizar a Svelte?

Cada año, un estado de JavaScript estudio se publica que resume los resultados de un estudio que examina el estado actual del ecosistema JavaScript. Este estudio cubre frameworks front-end, desarrollo de servidores y dispositivos móviles, pruebas, recursos populares para desarrolladores y mucho más.

Todo lo que contiene, por supuesto, gira en torno a JavaScript. Por lo tanto, si usa JS para el desarrollo web, le recomiendo echar un vistazo al Estado de JavaScript si aún no lo ha hecho.

Para mí, uno de los resultados más interesantes de State of JavaScript fue la atención inesperada de aquellos que participaron en la encuesta al marco front-end Svelte .

En el ranking general de las principales herramientas de front-end (basadas en indicadores de conocimiento del marco, interés y satisfacción con él), Svelte apareció en segundo lugar. Él va allí justo después de React , por delante de herramientas conocidas como Vue.js , Preact , Angular y Ember .
Esto me sorprendió un poco, ya que Svelte es una herramienta relativamente nueva, tanto en términos de edad como en términos del paradigma de desarrollo de software.


Clasificación de marcos frontend basados ​​en la investigación del estado de JavaScript

Sé que muchos de ustedes pueden indignarse aquí y decir que React y Svelte no son, sin embargo, marcos, sino bibliotecas. Sé esto, pero el informe de investigación no fue escrito por mí, así que cerremos la cuestión de la terminología sobre esto.

Descubrí un ejemplo de un proyecto de plantilla Svelte y creé una pequeña aplicación Hello World.


A la izquierda está el proyecto React más simple. A la derecha hay un proyecto similar basado en Svelte.

Aunque este proyecto simple no fue difícil de llevar a un estado de trabajo, alguien que previamente escribió en React necesitará algo de tiempo para dominar a Svelte.

¿Vale la pena aprender Svelte? ¿Quizás solo nos enfrentamos a otra cosa de moda que desaparecerá tan rápido como apareció? Propongo averiguarlo.

Propósito del estudio


Me gustaría responder la siguiente pregunta: "¿Debería dejar de perder el tiempo aprendiendo React y comenzar a tratar con Svelte?"

Buscaremos la respuesta a esta pregunta explorando las diferencias fundamentales entre React y Svelte. Esto nos permitirá comprender qué cualidades únicas tiene cada una de estas herramientas. Como resultado, descubriremos en cuál vale la pena invertir.

Comenzamos con una revisión de cada una de las bibliotecas, luego hablamos sobre sus pros y sus contras, y luego sacamos conclusiones.

Reaccionar


En los últimos años, literalmente todos han estado hablando de React. Esta biblioteca, creada por Facebook, capturó rápidamente el mundo del desarrollo web. Ahora es una herramienta de desarrollo web que ocupa el primer lugar en el mundo (la verdad, la respuesta a la pregunta de "número uno" o no depende de quién se hace esta pregunta).

La biblioteca React, gracias en gran parte a la comunidad que la rodea, está creciendo más rápido en estos días que nunca. Y aunque no hay signos de desaceleración en este crecimiento.

Aquí hay tres características de React que hacen que esta biblioteca sea particularmente atractiva:

  1. Naturaleza declarativa.
  2. Estructura de aplicación basada en componentes.
  3. Facilidad de uso en términos de integración en una pila de tecnología existente.

La naturaleza declarativa de React es lo que le permite crear interfaces de usuario interactivas. Es suficiente que el programador simplemente diseñe los elementos visuales de la aplicación para cada estado, después de lo cual React hará el resto. Esto simplifica la lectura y comprensión del código, facilita la depuración.

¿Cómo hace React el resto? Mediante el uso de la tecnología DOM virtual. La determinación de qué partes del DOM necesita actualizarse se lleva a cabo en las entrañas de la biblioteca, en un nivel intermedio entre el código escrito por el programador y el DOM real. Gracias a esta tecnología, se pueden garantizar altas velocidades de representación de páginas.

La biblioteca React está diseñada para que no importe exactamente qué tecnologías se utilizan en la pila de herramientas de desarrollador. La interfaz de reacción se puede "atornillar" a cualquier cosa. Por ejemplo, backends basados ​​en Node.js , Ruby on Rails , Spring Boot , PHP, etc. Esta biblioteca es completamente neutral en relación con lo que tendrá que interactuar.

¿Por qué algunos llaman a React una "biblioteca" y otros lo llaman "marco"? Para crear una determinada aplicación, junto con React, debe usar bibliotecas adicionales que se utilizan para controlar el estado de la aplicación, para el enrutamiento y para interactuar con varias API. Si crea una plantilla de proyecto React usandocreate-react-app - no tendrá un cierto conjunto de herramientas que podría esperarse del marco.

Esbelto


Svelte es una herramienta que fue creada para cambiar la situación en el campo del desarrollo frontend. Aquí hay un buen video sobre Svelte 3, en el que Rich Harris, creador de Svelte, habla muy interesante y emocionalmente sobre esta biblioteca. Si aún no ha visto este video, le recomiendo que lo vea.

En esta presentación, la historia de la programación reactiva está bien presentada, se destacan los defectos inherentes a la implementación tradicional de los mecanismos reactivos, se presenta la solución a los problemas correspondientes.

Gran parte de lo que se puede atribuir a las fortalezas de React es la base de Svelte. Rich Harris conoce muy bien los pros y los contras de los componentes internos de React.

React mantiene la interfaz actualizada y realiza otras acciones directamente en el navegador. Svelte hace su trabajo durante la construcción del proyecto. Esta es la principal diferencia entre React y Svelte. Esto es lo que dice la documentación de Svelte al respecto: "Svelte convierte su aplicación en código JavaScript perfecto durante la compilación del proyecto, y no interpreta el código de la aplicación mientras se está ejecutando".

Svelte no utiliza una técnica como comparar el DOM real y virtual.

El compilador Svelte toma un componente declarativo y lo convierte en un código eficiente, imperativo y de bajo nivel que interactúa directamente con el DOM.

Dado que Svelte usa el compilador, no el DOM virtual, esto permite reducir la carga en el navegador, aumentar la velocidad de las páginas y facilitar el motor JS del navegador para recolectar basura. El navegador no tiene que resolver algunas tareas mientras ejecuta el código de la página, lo que mejora la productividad de los proyectos.

Es cierto que, como React, Svelte usa componentes escritos en un estilo declarativo. La mayor parte de la diferencia entre React y Svelte comienza después de que construyen el proyecto Svelte.

Fortalezas y debilidades de React and Svelte


Hablemos de las fortalezas y debilidades de las bibliotecas estudiadas.

▍ Fortalezas de reacción


  • Fuerte apoyo de la comunidad.
  • Muchas bibliotecas para probar el código escrito basado en React.
  • Soporte de TypeScript.
  • Herramientas de desarrollo de calidad.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


Volviendo a nuestra pregunta: "¿Debería dejar de perder el tiempo aprendiendo React y comenzar a tratar con Svelte?"

Honestamente, comencé a trabajar en este artículo, esperando llegar a la conclusión de que Svelte es una tecnología demasiado joven y que no vale la pena invertir mucho tiempo en su estudio. Pero después de descubrir lo que estaba sucediendo, después de entrar en lo básico, estaba muy intrigado e impresionado por lo que se me reveló, por el tipo de dinámica de Svelte que sentí.

Es indiscutible que los proyectos Svelte tienen muy buen desempeño.

Las ideas detrás de Svelte se ven atrevidas y progresivas. El tamaño de la comunidad Svelte está creciendo. Estoy seguro de que el éxito de las herramientas de front-end (así como la amplitud de su distribución) depende en gran medida de la comunidad y de cómo los desarrolladores adopten estas herramientas.

Como resultado, podemos decir que si Svelte y todo lo relacionado con esta biblioteca continúa desarrollándose al mismo ritmo, podemos esperar la difusión generalizada de esta tecnología.

Por supuesto, Svelte recién está comenzando su viaje, por lo que aún no conocemos esos problemas, y puede haber muchos de ellos que inevitablemente aparecerán durante la implementación de Svelte en proyectos reales. No sabemos cómo los programadores eludirán estos problemas, cómo los desarrolladores de bibliotecas lo mejorarán.

Cuando apareció por primera vez la biblioteca React, parecía una herramienta de vanguardia que generalmente no tiene fallas. Pero, con el desarrollo y la difusión de React, resultó que los desarrolladores web tienen que hacer frente a varias situaciones difíciles, tienen que buscar soluciones, compromisos. Y los desarrolladores de la biblioteca en sí también tienen que trabajar duro para mejorarla.

Estoy seguro de que Svelte está esperando lo mismo. Después de todo, el mundo del desarrollo web es extremadamente volátil.

Si aún no está listo para abandonar React, le aconsejaría, como mínimo, que supervise de cerca a Svelte. Esta biblioteca puede convertirse en un fuerte competidor para reaccionar mucho más rápido de lo que puedas imaginar.

¡Queridos lectores! ¿Qué opinas de Svelte?

More articles:


All Articles