¿Por qué SvelteJS es posiblemente el mejor marco para nuevos desarrolladores web?

Cualquier desarrollador web que haya estado haciendo esto durante al menos unos años probablemente escuchará una pregunta similar día tras día:

Realmente quiero convertirme en desarrollador web, pero no sé por dónde empezar. Alguna sugerencia?

Hace unos 10 años, la respuesta era muy simple. ¡Simplemente cree index.html, agregue algunas etiquetas allí, haga que el título sea rojo con CSS y permita que jQuery maneje los clics!

Oh, cómo ha cambiado todo. Ahora estamos trabajando con herramientas de compilación, enrutamiento del lado del cliente, marcos especiales con tiempo de ejecución sofisticado, vinculando "esto" en todas partes, literales de plantilla, CSS-in-JS ... ¿cómo elegir qué es lo más importante?

Todo esto ha llevado a innumerables variaciones sobre dónde comenzar con diversos grados de "simplemente ingréselo ahora, y lo explicaré más adelante". Algunos alientan a los recién llegados a aprender React o Vue de inmediato para comenzar con las prácticas modernas. Mientras que otros gritan desde las cimas de las montañas, los principiantes siempre deben comenzar con lo básico. En verdad, ambos enfoques tienen sus méritos. El primero puede atraer a los recién llegados a cosas como la recarga en caliente y los componentes, con el riesgo de dejar demasiado a un lado. Mientras que el segundo hace que los recién llegados entiendan cómo funciona el DOM bajo el capó, al mismo tiempo, tal vez distraiga a las personas con la complejidad de Vanilla JS, de lo que hemos ignorado durante mucho tiempo.

Por eso necesitamos un término medio. Una forma de comenzar con los conceptos básicos, al mismo tiempo que absorbe conceptos modernos como el desarrollo basado en componentes, CSS aislado en cascada, plantillas, funciones declarativas, etc. etc.

Svelte, a tu servicio

SvelteJS es un cartucho bastante nuevo en el marco js de marcos, que apenas comienza a llamar la atención. Alguien puede saberlo después de publicar Estado de JavaScript 2018 . En resumen, Svelte pretende ser un marco que no es realmente un marco. Se basa en una herramienta para compilar componentes en la etapa de ensamblaje, que le permite cargar en la página solo lo que se necesita para mostrar su aplicación. Esto significa que no hay DOM virtual, no hay marcos encima de los marcos, y no hay marco en tiempo de ejecución .

Todos estos son argumentos bastante serios para desarrolladores más experimentados, pero la mayoría de los principiantes probablemente no podrían leer el último párrafo sin romperse la cabeza. Afortunadamente, no es la magia de compilación lo que hace a Svelte tan amigable para los principiantes, sino su sintaxis.

Si nunca ha visto el componente Svelte, aquí hay un ejemplo simple:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /*   CSS */ .pretty { color: red; } </style> <script> /* ...        */ let name = "Ben"; </script> 

Vamos a resolverlo. Entonces, en primer lugar, vale la pena señalar que todo esto se puede escribir incluso en un archivo .html normal, incluso en un archivo .svelte , si su alma lo desea. También vemos algunas etiquetas familiares que recuerdan el desarrollo sin un marco: estilo y script . Los estilos y el código JS se escriben en estas etiquetas para construir componentes correctamente. Además, permite que el resaltado de sintaxis funcione sin complementos de editor adicionales, como las soluciones CSS-in-JS. Además, el compilador Svelte es lo suficientemente inteligente como para aislar cualquier estilo específico de componente de forma predeterminada. Por lo tanto, no tendrá estilos que fluyan entre los componentes.

También puede ver cómo sucede algo mágico con el nombre de la variable de JavaScript. Este es un nuevo concepto brillante para Svelte 3, donde cualquier variable en el script de su componente es accesible desde el marcado. No tenemos una sintaxis especial que deba aprenderse para administrar el estado. No hay Angular $ scope , ni React this.state , ni datos de Vue. En cambio, simplemente podemos usar variables ordinarias para describir el estado, causando una nueva representación cada vez que cambian sus valores.

Esta libertad de esta "jerga" sintáctica significa que la creación de un componente comienza a parecerse a la creación de un CodePen, solo sin tener que pensar en cómo conectar la función declarativa JS a algún tipo de selector DOM.

Otra cosa buena es que los componentes Svelte se importan tan fácilmente como los componentes tradicionales. Simplemente puede importar .html , ya que Svelte sabe cómo implementarlo:

 <div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script> 

Genial, pero espera un minuto ...

Algunos lectores pueden encontrar este concepto tan impresionante como yo. Al mismo tiempo, otros probablemente tengan sus propios argumentos contra el uso de este enfoque para enseñar a los principiantes. ¿No tienen curiosidad por cómo funciona realmente la manipulación DOM?

La respuesta es ... posible. Pero cuando alguien recién comienza (al menos por experiencia personal), puede aceptar una pequeña abstracción en aras de una creación más rápida de cosas geniales.

Además, al igual que algunos lenguajes, como Java y JS, abstrajeron la administración del puntero a través de la recolección de basura, la mayoría de las herramientas modernas de desarrollo web ignoraron la manipulación DOM. Excepto en casos extremos más difíciles que los principiantes probablemente no necesitarán. Por cierto, si te preguntas qué es la administración de punteros, creo que esto solo prueba mi punto. Por lo tanto, en lugar de obligar a los novatos a manipular el DOM o aprender formas específicas de administrar el estado del marco, ¿por qué no dejarlos acceder a las variables directamente desde el marcado? Ahora pueden aprender los principios básicos de la gestión estatal de los componentes sin caer en el duelo.

Ok, veo un ejemplo básico, pero Svelte debería tener algunas características específicas para que funcione.

Sin duda es cierto, pero es mucho menos de lo que piensas. Una parte de la sintaxis de Svelte es para mapear elementos DOM de forma iterativa y condicional. Esto funciona de manera muy similar al mapa de JSX, pero sin todos estos corchetes anidados en los que los recién llegados (y yo) pueden perderse fácilmente. Aquí está la forma básica que genera una lista de elementos de una matriz:

 <ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script> 

Nuevamente, entiendo cualquier crítica con respecto a la sintaxis, pero me gusta lo fácil que es entender. En lugar de incrustar JavaScript en nuestro código HTML, simplemente decimos: oye, recorramos esta matriz y creemos un elemento para cada uno de ellos.

Vale la pena mencionar otra característica de Svelte, de la que no estoy tan entusiasmado: la sintaxis para transmitir accesorios a los componentes. Sí, es completamente funcional y fácil de aprender, pero al mismo tiempo, puede parecer demasiado mágico para el gusto de algunas personas. Para procesar accesorios, simplemente los pasamos al componente donde sea que se importe ...

 <!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" /> 

... y obtenemos esta variable como un "let" exportado:

 <!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script> 

Entiendo completamente que para algunos esto parecerá un abuso de "exportación". Pero al menos, esto corresponde a cómo los principiantes deberían conceptualizar los módulos: exportamos lo que necesitamos para acceder fuera del componente e importamos lo que queremos usar en nuestro componente.

Podría superar esta rareza ... pero ¿qué pasa con el paso de compilación requerido?

Entonces, otra crítica sobre comenzar a trabajar con marcos es la necesidad de usar un administrador de paquetes. Lo que significa ... ¡demonios, usa la terminal!

Escuche, entiendo que abrir esto puede ser extremadamente intimidante, con su mono-fuente y su espeluznante "cd" para navegar por los directorios. Pero, sinceramente, esto realmente no es un gran obstáculo cuando solo necesitas un equipo para correr. Además, el terminal integrado en VS Code facilita el inicio. ¡Incluso se abre en la parte inferior de la ventana justo en el directorio de su proyecto!

Svelte en realidad ofrece un iniciador descargable , pero creé mi propia plantilla de inicio que solo usa Rollup para descarga directa. De hecho, el archivo de configuración tiene menos de 30 líneas. Para un proyecto básico de Svelte, estos son todos los directorios y archivos que necesita:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json


Simplemente agregue el comando para iniciar el paso de compilación en package.json y listo. Por supuesto, puede decir que todos los módulos y archivos adicionales que otros marcos necesitan no son un problema si un principiante no los toca, pero, en mi opinión, mientras menos cosas adicionales, mejor para los principiantes.

Ok, bueno, esto es genial y conveniente para principiantes. Pero, ¿qué tan estable es este marco?

Este es un tema muy actual para un marco joven como Svelte. Todos los ejemplos que mostré usan la sintaxis de Svelte versión 3, que en el momento de escribir esto todavía está en beta. Por emocionante que fuera, esperaría unos meses más antes de apresurarme con él a programar seminarios. Sin embargo, Svelte ofrece una página de documentación realmente concisa para la versión 3 , que puede facilitarlo para los principiantes.

Entonces, echemos un vistazo a algunos de los beneficios clave para aprender sobre el desarrollo web con Svelte:

1. Este es un marco de componentes con 0 complementos adicionales.
2. Maneja el estado sin basura ordinaria
3. Utiliza aislamiento de estilo sin usar CSS-in-JS (por lo que no se necesitan complementos de editor o sintaxis estúpida)
4. Para comenzar, solo necesita un script de compilación muy simple.
5. Prácticamente no hay archivos adicionales en el proyecto base

Por supuesto, esto es perfectamente normal si no pudiera convencerte en este artículo. ¡Todos los buenos artículos provocaron una pequeña controversia! Pero espero que este artículo al menos te muestre lo genial y simple que puede ser Svelte para aprender.

Gracias por leer esto!

Soy un desarrollador web front-end en el proceso de aprendizaje, siempre jugando con algo nuevo. Intentaré publicar regularmente aquí, así que escribe si te gusta.

***

Del traductor:

¡Gracias por leer esta traducción! Espero que este artículo lo aliente a mirar a Svelte como una herramienta de capacitación o incluso un nuevo proyecto.

Ven a mi taller de 2 horas sobre Svelte 3 en HolyJS Piter del 24 al 25 de mayo . ¿Quién quiere seguir el desarrollo de Svelte? Bienvenido al canal de telegramas en ruso SvelteJS . Estaremos encantados de verte!

Y una pequeña encuesta, sin referencia al marco y la tecnología. Tu opinión es simplemente interesante.