⛪️ 👁️ 👩🏾‍🏭 Por qué deberías usar Svelte para tus proyectos web 🤸 📣 🍽️

Si eres desarrollador web, probablemente hayas oído hablar de Svelte Js. Sin embargo, creo que se preguntará por qué está ganando popularidad y qué ventajas interesantes tiene para los desarrolladores web.

Haremos una breve revisión de este marco, sus ventajas y desventajas, para que después de leer pueda decidir si se adapta a su proyecto o no.

El marco Svelte apareció en 2018 y fue una sensación. Tanto a los principiantes como a los desarrolladores experimentados les gustaba usarlo para todo tipo de proyectos. En este sentido, tomemos un poco de tiempo para aclarar qué hace que Svelte sea tan accesible.

¿Qué es Svelte y cuáles son sus ventajas?

Para algunos desarrolladores, Svelte JS es conocido como el marco front-end más popular que no se incluyó en los seis primeros del Estado de JavaScript en 2018. Hay un artículo de Wikipedia sobre Svelte , pero apareció solo hace seis meses, por lo que no hay mucha información allí.

Svelte fue concebido como un marco, pero, de hecho, es un marco de componentes diseñado para compilar componentes en la etapa de construcción. Gracias a este enfoque, puede cargar solo un bundle.js por página para representar toda la aplicación.

En pocas palabras, con Svelte, usted escribe componentes usando HTML, CSS y JavaScript. Durante el desarrollo, el marco los compila en pequeños módulos JavaScript independientes. Esto garantiza que se realice un mínimo de trabajo por parte del navegador, lo que hace que la aplicación web sea más rápida y que escribir código sea más fácil.

Aquí hay una breve descripción de Svelte de los autores:

Fuente: Svelte.dev

Gracias a todo esto, Svelte Mobile es uno de los líderes en términos de "rendimiento de inicio". Otros tipos de optimización no lo hacen. Svelte logra resultados tan sobresalientes mediante el uso de un compilador accesible de JavaScript basado en navegador, y no de terceros. Por lo tanto, obtenemos una gran solución para el desarrollo web entre otros frameworks populares y lenguajes de programación .

Por lo tanto, Svelte logra una respuesta precisa del código y una mayor productividad, que es un excelente anuncio de marco para desarrolladores y propietarios de negocios. Además, otra ventaja de Svelte para desarrolladores es la conveniencia para principiantes y una estructura de sintaxis clara.

Descripción general de la arquitectura esbelta

Svelte es popular por su velocidad en comparación con cualquier otra biblioteca. Esto se debe a deshacerse de la fase de carga del marco para construir un DOM virtual . En lugar de usar la herramienta en tiempo de ejecución, el código Svelte se compila en JS en la etapa de construcción. Esto significa que la aplicación no necesita dependencias para ejecutarse.

¿Cómo funciona Svelte?

Trataré de explicar el principio de Svelte en las palabras más simples:

Abres el sitio.
Renderice la página en puro JS.
Pasas la página a tus colegas [si trabajas más de uno].
Los colegas esperan una reactividad real de la página.
Si lo encuentran, la aplicación / sitio debería funcionar sin problemas, no solo en el modo de prueba, sino también en la batalla.

Svelte JS vs. Reaccionar vs. Vue: comparación

Muchos ingenieros comparan Svetle.Js con otros marcos. Las alternativas más famosas son React y Vue.

Los marcos web más populares como Angular, React y Vue.js se basan en el principio de esperar que se cargue el código para construir un DOM virtual. Solo entonces pueden renderizar la página usando la biblioteca.

Por ejemplo, React, desarrollado por Facebook en 2011, hizo que la programación reactiva fuera bastante popular. Este marco comenzó a usar el DOM virtual. Separa el procesamiento de eventos, la manipulación de atributos y la actualización manual de DOM que, de lo contrario, serían necesarios para construir la aplicación. Este fue el factor clave que hizo que React fuera tan atractivo.

Svelte, mientras tanto, es un compilador. Compila sus componentes en JavaScript en lugar de confiar en conceptos como Virtual DOM para actualizar el DOM del navegador. Gracias al mecanografiado Svelte, se hizo posible construir la aplicación de manera mucho más eficiente. Puede escribir sus componentes usando CSS, HTML y JavaScript, y durante el proceso de compilación, Svelte los compila en módulos JavaScript separados.

Como resultado, Svelte 3 crea un DOM de menor peso. Por ejemplo, la implementación de TodoMVC en Svelte en forma comprimida pesa 3.6 KB. A modo de comparación, React plus ReactDOM, incluso sin código de aplicación, pesa aproximadamente 45 KB en forma comprimida. La descarga completa de TodoMVC en React tarda 10 veces más en el navegador que en Svelte.

Es cierto que es difícil evaluar imparcialmente el rendimiento de Svelte en comparación con React, ya que los marcos son muy diferentes en esencia.

Y, sin embargo, si desea conocer más detalles sobre la comparación práctica de estos marcos web, será útil ver este video.

Según GitHub , Svelte Native es significativamente más rápido que Ember, Angular, React, Ractive, Preact, Mithril o Riot. Incluso es capaz de competir con Inferno, que es probablemente el marco de IU más rápido del mundo en este momento. Al final, esta es una ventaja decisiva, porque una mayor velocidad de aplicación puede impulsarlo por delante de la competencia.

Componentes esbeltos

Profundicemos en los detalles de la estructura Svelte. Cualquier componente PWA [Progressive Web Application] en Svelte puede contener tres secciones: script, estilo y plantilla. Aquí hay una descripción más detallada de lo que significa:

Etiqueta de script: bloque de JavaScript opcional con declaraciones de funciones y variables utilizadas dentro del componente.

Etiqueta de estilo: otra unidad opcional. Piense en ello como una etiqueta de estilo HTML normal, con una diferencia crítica. Las reglas descritas dentro de este bloque se aplican solo al componente actual. Aplicar un estilo a un elemento Pno afectará a todos los párrafos de la página. Esto es genial, porque no hay necesidad de crear clases para diferentes elementos. Es decir, simplemente no podrá redefinir accidentalmente otra regla de estilo.

Bloque de plantilla: este es el último y único bloque obligatorio, generalmente la etiqueta H1. Esta es la vista y la vista de su componente. Está estrechamente relacionado con el script y los bloques de estilo, ya que define su comportamiento y diseño.

Para tener una mejor idea de crear todos estos componentes, le sugiero que lea una explicación breve y comprensible de A shot of code:

Por estas razones, podemos considerar a Svelte como una biblioteca que intenta llevar la modularidad a la interfaz. Esta modularidad es compatible al agrupar varios componentes. Sin embargo, el marco también aísla la plantilla, la lógica y el diseño. Por defecto, Svelte crea estilos para cada componente por separado. Es decir, evitará fugas de estilo entre los componentes, lo que no garantiza el uso de otros marcos.

También vale la pena señalar que Svelte interactúa bien con una variable de JavaScript llamada name. Este es un nuevo concepto de Svelte v3. Ahora se puede acceder a cualquier variable en el script de su componente desde el marcado HTML. Tampoco hay ninguna sintaxis específica del marco que necesitará aprender para administrar estados. No necesitas tratar condataVue, $scopeAngular o this.stateReact. En cambio, puede usar en todas partes letpara lograr los valores de estado asignados. Cambiar los valores cada vez provoca automáticamente una nueva representación.

Así es como se ve en la práctica:

Crear un componente Svelte es similar a trabajar con CodePen. No tiene que preguntarse cómo conectar la función JS declarativa que aprendió a través de algunas DOM query-selector. Svelte no afectará window listenersni callback functions. Estos fundamentos permanecen como deberían ser.

Otra cosa buena de estos componentes es que son tan prioritarios como los tradicionales. Todo lo que necesita hacer es importar el .html y Svelte entenderá cómo implementarlo.

¿Qué más necesitas saber sobre Svelte.js

Hablemos de las otras ventajas importantes de Svelte en el proceso de desarrollo en comparación con otros marcos.

Principiante amigable

Mencionamos anteriormente que la razón de la popularidad de Svelte se debe en parte a su simplicidad para los principiantes. Al usarlo, no hay necesidad de manipular el DOM. Además, no necesita comprender los contenedores de estados específicos del marco. El acceso a las variables se puede obtener directamente del marcado, y esto simplifica enormemente el proceso de creación de una aplicación. Al trabajar con Svelte, los programadores pueden aprender los principios básicos del estado de los componentes sin confundirse en los detalles.

Svelte proporciona su propia sintaxis para sentencias condicionales y bucles para mostrar elementos DOM. El principio de funcionamiento aquí es similar a JSX. Sin embargo, todos estos corchetes cerrados en los que los principiantes pueden perderse fácilmente no son tan importantes.

Hay una rareza acerca de Svelte que vale la pena mencionar: pasa propiedades a los componentes. Este marco es fácil de aprender y completamente funcional, pero, al gusto de algunos desarrolladores, la sintaxis es demasiado exótica.

compatibilidad con versiones anteriores

Anteriormente, si necesitaba integrar, por ejemplo, algún widget de calendario o cualquier otro en su aplicación, solo podía hacerlo usando la misma versión del marco en el que está construido el widget. Es decir, si compila la aplicación en Angular y el widget se construye en React, no podrá integrarlo. Sin embargo, si el widget o su aplicación se crean utilizando Svelte, esto es posible.

Separación de código

Digamos que usa React como el marco principal. Si inicialmente usa solo un componente React, y no mucho, aún tiene que descargar el React completo. Con Svelte, la separación de código es mucho más eficiente, ya que el marco está integrado en el componente y este componente es muy pequeño.

Soporte de comunidad de código abierto

Svelte es un software de código abierto desarrollado por entusiastas. Por lo tanto, el uso del marco Svelte es gratuito y le permite implementar muchas funciones de forma gratuita. Además, Svelte tiene una comunidad activa de desarrolladores en GitHub, a la que puede unirse, y donde siempre puede pedir ayuda o contribuir a esta tecnología.

¿Es Svelte lo suficientemente estable y confiable?

Este es un problema urgente para el marco que ha estado en el mercado tan recientemente. Todos los ejemplos anteriores se relacionan con la sintaxis de Svelte versión 3. Por el momento, todavía está en beta. En comparación con los gigantes de la industria como ReactJS y VueJS, no está muy desarrollado.

No importa cuán interesante pueda ser SvelteJS, debe esperar un tiempo antes de enseñar clases magistrales sobre el código para usarlo. Esto se debe a que la versión beta puede ser algo diferente de la versión final. Sin embargo, Svelte ofrece documentación concisa para la versión 3, lo que puede facilitarlo para los principiantes. Por lo tanto, este marco ciertamente puede verse como parte de su pila de tecnología confiable.

¿Svelte.js es el próximo gigante?

Difícil de responder. ¿Puede Svelte vencer a Vue y React como un marco front-end que resistirá la prueba del tiempo?

Esto no es tan fácil de predecir. Por el momento, aún no ha alcanzado el nivel de popularidad de algunos de sus hermanos. No tiene el mismo apoyo de una gran corporación que React. Pero, de nuevo, Vue lo hizo bastante bien sin ella.

El año pasado, se realizó otro estudio sobre el estado de JS. Se lleva a cabo anualmente para evaluar las preferencias de los principales desarrolladores. Svelte se ha convertido en el más popular en comparación con otras bibliotecas incluidas en la encuesta. Esto puede significar que tarde o temprano se considerará como uno de los mejores marcos JS.

Svelte vs. Reaccionar es un tema común de discusión entre los programadores, pero uno de los marcos no es necesariamente mejor que el otro. Svelte es muy adecuado para desarrollar aplicaciones web o MVP, mientras que Angular es muy adecuado para aplicaciones web PWA o empresariales. Algunos desarrolladores encuentran un marco que les gusta y se apegan a él, pero aun así, no dejen que esto intente probar Svelte. Puede que le gusten las características que describimos.

Veamos brevemente las características clave de Svelte

nuevamente : ️

Este es un marco basado en componentes que no requiere complementos adicionales.
️ Funciona con la administración del estado sin dificultades familiares.
️ Le permite usar los estilos integrados [en el componente] sin requerir CSS-in-JS, por lo que no se requieren extensiones para el editor de código o sintaxis extraña.
️ Un script de compilación muy simple es suficiente para comenzar.
️Para comenzar a trabajar en el proyecto base, prácticamente no se necesitan archivos.

Si eres un desarrollador web que necesita un nuevo marco, asegúrate de que valga la pena probar Svelte. En otros casos, si está buscando la mejor tecnología para su solución web, Svelte puede ser una buena opción a la que vale la pena prestarle atención.

Por qué deberías usar Svelte para tus proyectos web