Cualquier desarrollador web con algunos años de experiencia habrá escuchado esta pregunta a menudo.
Estoy interesado en aprender desarrollo web, pero no sé por donde empezar. ¿Alguna sugerencia?
Hace una década, esto tenía una respuesta fácil. Crear un fichero index.html, mete algunas etiquetas, cambia de color la cabecera con CSS y usa jQuery (o simplemente JavaScript, dependiendo a quien preguntes) para gestionar los clics del ratón.
Ah, cómo han cambiado las cosas. Ahora usamos herramientas para construir, enrutamiento del lado del cliente, frameworks con scripts en tiempo de ejecución, vinculamos ‘this’ en todas partes, plantillas de literales, CSS dentro de JS… ¿cómo elegimos qué es lo más importante? No podemos empezar a enseñar cómo React usa un DOM virtual a alguien que ni siquiera sabe que es el DOM.
Esto nos ha llevado repetidas veces a empezar con un: «Tú escribe esto y ya lo explicaremos luego». Algunos animan a los principiantes a aprender React o Vue directamente para empezar con prácticas modernas, mientras otros gritan que los principiantes deberían siempre comenzar por los fundamentos. En realidad, ambos enfoques tienen sus ventajas. Los primeros pueden entusiasmar a los principiantes con los componentes o el refresco en caliente, corriendo el riesgo de dejar mucho en lo desconocido, mientras que en el otro caso, consiguen que los principiantes entiendan como funciona realmente la manipulación del DOM, pero se apartan de las complejidades de JavaScript, ya que nos hemos abstraído de ellas.
Lo que necesitamos entonces, es un término medio. Un modo de empezar con los fundamentos mientras asimilamos conceptos modernos como el desarrollo orientado a componentes, plantillas, funciones declarativas, tipos de CSS (cascade o ‘scope’/alcance), etc…
Presentamos: Svelte
SvelteJS es el nuevo chico del barrio que empieza a tener algo de atención. Algunos podéis conocerlo por ser el lenguaje más popular para State of JavaScript en 2018. Como explicación resumida, Svelte quiere ser el framework que en realidad no es un framework; es básicamente una herramienta para compilar componentes el momento de la construcción (build), permitiéndote cargar un único bundle.js en tu página para renderizar la aplicación. Esto significa que no hay DOM virtual, ni frameworks encima de frameworks, no framework que cargar en tiempo de ejecución.
Estos puntos son bastante atractivos para desarrolladores experimentados, pero los principiantes posiblemente no puedan leer este último párrafo sin que les explote la cabeza. Afortunadamente, no es está compilación ‘mágica’ lo que hace que Svelte sea atractivo para los principiantes, sino su sintaxis.
Si nunca has visto un componente Svelte antes, aquí tienes un ejemplo muy básico:
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p>
<style>
/* here's some scoped CSS */
.pretty {
color: red;
}
</style>
<script>
/* ...and a variable we can access in the markup */
let name = "Ben";
</script>
Veamos el código. Para empezar, vale la pena indicar que todo esto puede estar dentro de un fichero .html o .svelte si lo prefieres. También vemos etiquetas propias del desarrollo sin frameworks, como <style> o <script>. Por desgracia, escribir los estilos y JS en estas etiquetas es necesario para construir componentes con el scope (alcance) correcto, pero esto nos permite el marcado de sintaxis para trabajar sin necesidad de usar extensiones adicionales del editor de textos, como por ejemplo CSS-in-JS. Además, el paso de build (construcción) es lo suficientemente inteligente como para dar por defecto el scope correcto a los estilos del componente, de modo que no habrá estilos aplicándose en otros componentes.
También verás algo de magia con la variable de JavaScript llamada name. Este es un nuevo concepto en Svelte v3, donde cualquier variable en el script de tu componente es accesible en el marcado. Así, no existe una sintaxis específica del framework que aprender para la gestión del estado, así que no hay $scope de Angular, ni this.state de React, no data de Vue. en su lugar, podemos usar let en cualquier lugar para obtener valores de estado asignables, lanzando re-renderizados cuando sus valores cambienm
Al no depender de toda esta jerga, crear un componente puede parecer casi como escribir un CodePen, pero sin preguntarse cómo conectar una función JS declarativa que has aprendido a un selector del DOM. Pero no te preocupes demasiado: Svelte no se complica con funciones callback o escuchadores (listeners) de ventana, así que los fundamentos siguen ahí.
Otra ventaja de estos componentes es que son tan ‘importables’ como un componente tradicional. Tan sólo importa el .html y Svelte sabrá cómo desempaquetarlo.
<div>
<Wizardry />
</div>
<script>
import Wizardry from './wizardry.html'
</script>
Bien, pero espera un momento…
Algunos lectores encontrarán este concepto tan impresionante como yo, pero probablemente otros tendrán sus dudas acerca de darle esto directamente a principiantes. ¿No les confundirá todo esto acerca de como la manipulación del DOM funciona realmente?
La respuesta es… quizás. Pero cuando alguien está empezando (al menos desde mi experiencia), está bien aceptar algo de abstracción para conseguir hacer cosas divertidas de forma más rápida.
Además, del mismo modo que Java y JavaScript han abstraído la gestión de punteros con el recolector de basura (garbage collector), parece que la mayoría de herramientas de desarrollo web han abstraído la manipulación del DOM, evitando a los principiantes temas avanzados que no necesitan afrontar. Por cierto, si no sabes lo que es la gestión de punteros, creo que eso confirma mi punto de vista ;). Así, antes que obligar a los principiantes a manipular el DOM, o enredarse con funciones propias de frameworks, ¿por qué no dejarles acceder directamente a variables desde el marcado? Así pueden aprender los principios básicos del estado de los componentes sin complicarse.
Vale, te compro tu ejemplo básico, pero seguro que Svelte tiene alguna particularidad del framework que hace que todo funcione
Bueno, eso es cierto, pero es mucho menos de lo que imaginas. Hay una sintaxis propia de Svelte para que bucles y condicionales muestren elementos DOM. Funciona de forma muy parecida a cómo JSX devuelve elementos de un map, pero sin todas las llaves anidadas que resultan confusas. Aquí un ejemplo básico que genera una lista de elementos con un array:
<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>
Una vez más, entiendo las críticas acerca de la sintaxis, pero lo que más me gusta es que es muy fácil de comprender. En lugar de anidar JavaScript en el html, tan sólo indicamos: itera sobre este array y crea un elemento para cada uno.
Existe otra ‘rareza’ de Svelte que vale la pena mencionar y que no me gusta demasiado: pasar propiedades a componentes. Sí, es completamente funcional y es fácil de aprender, pero la sintaxis es demasiado ‘mágica’ para según que gustos. Para manejar propiedades, sencillamente pasamos la propiedad al componente allí donde se importa…
<!-- somewhere.html -->
<Profile coolGuy="Scott Tolinski" /> … y obtenemos esa variable como un ‘let’ exportado
<!-- profile.html -->
<p>{coolGuy}</p>
<script>
export let coolGuy = '';
</script>
Comprendo que no entusiasme la idea de abusar de ‘export’, pero al menos sigue con el modo en que los principiantes deberían conceptualizar los módulos: exportamos aquello que usaremos fuera del componente e importamos lo que queremos mostrar en nuestro componente.
Pasaré por alto esta ‘rareza’… ¿pero qué hay acerca del paso de construcción (build)?
Otra crítica de los frameworks para los principiantes es la necesidad de usar un gestor de paquetes. Lo que significa… uf! usar el terminal!
Bueno, lo entiendo, abrir un terminal puede intimidar, con su fuente monospace y comandos para cambiar de directorios. Pero pasar ser justos, no es una barrera tan grande cuando lo único que necesitas es un comando para ejecutar. Además, el terminal integrado en VS Code hace que empezar sea muy sencillo; incluso ya te deja en el directorio de tu proyecto!
En realidad, Svelte ofrece un punto de partida para descargar que está bien para iniciarse, pero yo he hecho mi propia plantilla de inicio que tan sólo usa la herramienta RollUp para recargar en vivo. De hecho, el fichero de configuración tiene menos de 30 líneas. Para un proyecto Svelte básico, estos son los directorios y ficheros que necesitas:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.jsonTan sólo añade un comando para ejecutar el paso de build en package.json y ya está listo. Ciertamente, podrías decir que todos los módulos y ficheros extra que necesitan otros frameworks no son un problema si el desarrollador no tiene que tocarlos, pero en mi opinión, cuanto menos materia adicional haya que tocar, mejor para un principiante.
Vale, está bien y fácil para principiantes. ¿Pero es un framework estable?
Esta es una pregunta muy importante para un framework tan joven como Svelte. Todos los ejemplos que hemos usado aquí están basados en la versión 3 de Svelte, que está en beta cuando escribo esto tiene poco seguimiento comparado con otros frameworks como ReactJS o VueJS. Por muy entusiasmado que esté, esperaría algunos meses más antes de hacer cursos con él. Aún así, Svelte ofrece una muy buena documentación para la versión 3, que pueda ayudar a los principiantes a iniciarse sin verse sobrepasados por extensas explicaciones.
Hagamos un resumen de los puntos más importantes para aprender desarrollo web con Svelte:
- Es un framework basado en componentes sin plugins adicionales.
- Maneja estados sin excesivas complicaciones
- Usa estilos por scope sin necesitar CSS-in-JS (de modo que no necesita plugins para el editor de texto)
- Sólo necesita un sencillísimo script de build para arrancar.
- Apenas necesita unos pocos ficheros en el proyecto base.
Naturalmente, no pasa nada si este artículo no te convence, todos los buenos artículos tienen algo de controversia. Pero espero que al menos te haya mostrado lo sencillo que puede ser aprender Svelte.
Puedes encontrar el artículo original en inglés en: https://dev.to/bholmesdev/why-sveltejs-may-be-the-best-framework-for-new-web-devs-205i