Bienvenidos al primer capítulo de mi tutorial de Svelte. En este tutorial vamos a ver cómo se pueden hacer aplicaciones web con Svelte, y qué características nos ofrecen. También haremos algunos ejemplos que nos permitirán ver estas características.
¿Qué voy a necesitar para seguir este curso?
Como Svelte es un framework para hacer aplicaciones web, será necesario en primer lugar conocer las tecnologías web: HTML, CSS y JavaScript. Si no las conoces aún o quieres perfeccionar su conocimiento, convendría que practiques un poco antes de continuar con Svelte. Y, de hecho, es mejor que las practiques en el orden que te digo: primero HTML, luego CSS y luego JavaScript, porque esto lo hace mucho más natural: primero escribimos marcado, luego le damos estilo, y luego interactividad.
Además, será necesario instalar Node.js en el ordenador. Node.js es una herramienta para el sistema operativo que permite ejecutar código JavaScript fuera del navegador, como si fuese un programa más. Node.js está disponible para una gran variedad de sistemas operativos, así que debería dar igual qué tipo de sistema operativo o de ordenador tienes, incluso si es una Raspberry.
Vas a necesitar también conocer un poquito sobre la terminal, porque es lo que vamos a emplear para lanzar comandos que nos permitan ejecutar o compilar las aplicaciones, así que si es la primera vez que usas la terminal o el símbolo de sistema de tu sistema operativo, deberías consultar alguna guía que te ayude al principio, aunque voy a intentar ser suave.
Finalmente, vamos a necesitar un editor de textos para poder escribir el código. Como siempre en mis cursos, voy a estar usando Visual Studio Code, porque es multiplataforma y así si no tienes elegido otro diferente, por lo menos podrás usar exactamente el mismo entorno que el que voy a enseñarte en el curso.
¿Qué es Svelte y qué es el desarrollo orientado a componentes?
Svelte es un framework para hacer aplicaciones web orientadas a componentes. Esta es una metodología que lleva de moda muchos años porque permite hacer páginas mucho más reusables y fáciles de modificar.
Tradicionalmente, las páginas web se escribían directamente a mano con el código HTML, luego dándole aspecto con CSS y luego interactividad con JavaScript. Sin embargo, si únicamente utilizas estas tres tecnologías, lo que vas a acabar teniendo es una página complicada de mantener, porque tienes una página o varias páginas muy grandes con todo el código de tu aplicación. Esto hace que cualquier cambio que tengas que hacer se vuelva una operación arriesgada porque nunca sabes si tocar un código CSS o tocar un código JavaScript va a afectar sin querer a otras partes de la web.
Cuando se hace desarrollo orientado a componentes, sin embargo, lo que hacemos es ver una aplicación o página web como un conjunto de componentes separados, que proporcionan funcionalidad independiente del resto. En el siguiente ejemplo, la sección de los enlaces es independiente de la sección con el logotipo.
Además, algunos de esos componentes pueden ser vistos a su vez como contenedores de más subcomponentes:
En general, el diseño orientado a componentes es mucho más práctico porque nos permite separar todas estas responsabilidades y porque nos permite dividir el trabajo correctamente. Si nosotros fabricamos componentes que tienen entradas y salidas bien claras, podemos hacer que nuestro equipo, cada uno de los miembros del equipo se dedique a un componente y luego ensamblarlos todos a la vez para fabricar una aplicación principal.
¿En qué se diferencia con otros frameworks como React o Vue?
Si ya has trabajado con frameworks como React o como Vue, posiblemente te estés preguntando para qué sirve realmente Svelte. Al fin y al cabo, con Vue y con React puedo hacer exactamente lo mismo.
La diferencia más importantes es que en Svelte no existe la noción del DOM virtual o VDOM. En otros frameworks, los componentes se compilan a un pseudolenguaje de marcado denominado VDOM que requiere ser transformado sobre la marcha a HTML en el momento de presentar la aplicación web en el navegador. En el caso de Svelte, los componentes ya se transforman en el momento de compilar la aplicación en código JavaScript que interactúa con el DOM de la página web, por lo que existen menos transformaciones que hacer, y también queda una aplicación web más ligera al no necesitar descargar código JavaScript que haga la transformación: ya viene hecha.
Además, Svelte introduce una reactividad mucho más integrada en el ecosistema JavaScript, porque utiliza los eventos de JavaScript nativos, sin tener capas de abstracción adicionales por encima.
Por último, de cara a programar, con Svelte vas a escribir menos código, debido a que los componentes Svelte son mucho más ligeros que en otras alternativas y requieren escribir menos código para hacerlos funcionar.