¿Qué es Svelte?

Hola a todas, hola a todos, qué tal, cómo estáis, bienvenidos un día más a makigas, 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 vamos a ver qué características nos ofrece, así como algunos ejemplos para desarrollar aplicaciones con este framework.

Como este es el primer capítulo, principalmente va a ser un capítulo que voy a utilizar para hacer una demostración de en qué consiste Svelte, qué diferencias tiene frente a otros frameworks similares como React o Vue, y también para quien nunca haya trabajado con este tipo de frameworks, vamos a intentar hacerlo poco a poco para que pueda entender cómo funciona el desarrollo orientado a componentes.

Antes que nada, y también como este es el primer capítulo, vamos a enumerar las distintas cosas que es necesario conocer para poder seguir correctamente este tutorial. En particular, Svelte es un framework que sirve para hacer aplicaciones web, por lo que es necesario conocer cómo trabajan las distintas tecnologías web. Esto incluye HTML, CSS y JavaScript. Si no las conocéis del todo, o queréis perfeccionar vuestro conocimiento, o nunca habéis oído hablar de ellas, antes deberéis aprenderlas o practicarlas. Y para ello, mejor seguir el orden que os he dado: primero HTML, luego CSS y luego JavaScript. Es mucho más sencillo si primero aprendemos a escribir marcado, luego aprendemos a darle forma a ese marcado, y luego a dar interactividad a ese marcado; por eso, mejor primero HTML, luego CSS y luego JavaScript.

Una vez que tengáis conocidas las tres herramientas, podréis regresar acá y podréis entender mucho mejor. Si no, la verdad es que mucho no vais a entender en este momento.

También será necesario instalar Node.js en el ordenador. Node.js es una herramienta para el sistema operativo que sirve para ejecutar código JavaScript fuera del navegador, como si fuese un programa más. Y eso es lo que vamos a usar, porque aunque Svelte es un framework para hacer aplicaciones web, vamos a usar Node.js para compilarlo, para compilarlo, para lanzar servidores, y para todo lo que es interactuar con Svelte antes de lanzarlo al mundo.

Node.js, por suerte está disponible para una gran variedad de sistemas operativos, así que debería dar igual qué tipo de sistema operativo tienes, qué ordenador tienes, si estás usando por ejemplo un portátil o un sobremesa, o una Raspberry, debería dar igual porque está disponible en casi todas partes.

También es necesario conocer un poco cómo funciona la terminal, ya que la vamos a estar utilizando para lanzar comandos. Si nunca habéis utilizado una terminal o el símbolo de sistema de vuestro ordenador, si estáis en Windows, es recomendable que os busquéis una pequeña guía para ver cómo lanzar comandos, aunque veréis que no es muy complicado. Voy a intentar mantener las cosas sencillas pero no quiero que nadie se asuste si de repente digo ejecutar un comando en una terminal. Es necesario que lo tengáis antes claro.

Por supuesto, una de las herramientas que vamos a necesitar es un editor de textos, en el que vamos a escribir el código fuente de nuestra aplicación web. Aunque existen muchísimos editores de textos en el mercado, algunos gratuitos y algunos de pago, yo voy a estar usando en este curso Visual Studio Code, como muchas veces, por las razones que os he dicho siempre: con Visual Studio Code voy a tener acceso a una herramienta que es fácil de usar y que me permite centrarme bastante bien el código que estoy escribiendo, que es lo que me importa. Lógicamente, podéis utilizar el editor de textos que ya estéis usando o el que más os guste.

Svelte es un framework para hacer aplicaciones web orientadas a componentes. Esta es una metodología que lleva en desarrollo desde hace bastantes años porque permite hacer páginas mucho más reusables y mucho más fáciles de modificar. Tradicionalmente, las páginas web se escribían directamente escribiendo el código HTML y luego modificándolo con CSS y JavaScript, para definir tanto cómo se ve, como cómo se debe comportar. Sin embargo, si escribes el código fuente de tu página web usando únicamente HTML, lo que vas a acabar teniendo es una página un poco complicada de mantener, porque cuando te pidan hacer una modificación en una de las partes concretas de la página, vas a tener que gestionar el nuevo HTML que has escrito, vas a tener un poco más complicado de entender qué CSS es el que tienes que cambiar ahora, y es posible que se te olvide actualizar algún tipo de JavaScript, lo que puede provocar algunos errores.

En el desarrollo orientado a componentes, en su lugar, lo que vamos a hacer es ver una página web como una serie de componentes, unos dentro de otros. Por ejemplo, esto es Google, por si nunca habéis entrado en él. Google es un buscador (parece irónico lo que estoy diciendo, pero bueno), donde si miramos la página, pese a que es HTML, también lo podemos ver como una jerarquía de componentes. Por ejemplo, el componente cuadro de búsqueda principal, que contiene dentro un buscador, una serie de botones, enlaces, y el gran logo de Google. El componente enlaces de la parte superior tiene una serie de enlaces, un botón para ir a otros productos, y un botón para iniciar sesión. Cada uno de estos componentes realmente funciona por separado. Si tengo que modificar cómo se ve el buscador, no tendría que hacer ningún tipo de modificación en el botón Iniciar sesión. El desarrollo orientado a componentes lo que permite es separar correctamente las responsabilidades de cada uno de los componentes, para que si yo tengo que modificar el buscador me vaya directamente al archivo que se llamabuscador, no al archivo que se llamagoogle". De este modo es mucho menos arriesgado hacer modificaciones, y también mucho más mantenible, porque el código está mucho mejor ordenado.

Si pusiese a mano el código HTML de cada uno de los resultados de búsqueda y quisiese hacer alguna modificación, tendría que modificar cada uno de los 20, 400 u 8000 enlaces que puede haber en toda la página. Pero si cada uno de los resultados de búsqueda está basado en la misma plantilla, hacer un cambio a la plantilla hará que automáticamente se modifiquen todos los usos de esa plantilla al instante, algo que es muy ventajoso porque permite hacer modificaciones y cambiar el aspecto del sitio sin tener que escribir mucho código.

Este es otro ejemplo que tenemos directamente en el sitio web de Svelte. Se trata de una aplicación que sirve para introducir un número pin, y también está orientado a componentes. Por ejemplo, esta aplicación que nos permite introducir rápidamente números y mostrarlos como una contraseña también tiene avrios componentes. El componente Contraseña introducida, el componente Teclado, el cual a su vez está compuesto de más subcomponentes, como cada uno de los componentes Botón, el componente borrar para eliminarlo todo. Todo esto son componentes que deberían ser independientes entre sí, y si yo tengo que hacer una modificación respecto a cómo se presenta el número pin, debería ser independiente de cómo está hecho cada componente botón, si está bien dividida la aplicación, por supuesto.

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.

Si ya has trabajado con frameworks como React o como Vue, posiblemente te estés preguntando para qué sirve realmente Svelte si ya, al fin y al cabo, con Vue y con React puedo hacer exactamente lo mismo. Las ventajas y las diferencias de Svelte frente a otros frameworks tradicionales, ya están directamente presentadas en la página web. Esta gente va de frente. Esta gente te va a decir exactamente qué es lo bueno que tiene Svelte. Por ejemplo, con Svelte vas a escribir menos código, y es que es verdad que los componentes de Svelte tienen mucho menos código en sus archivos frente a, por ejemplo, otros lenguajes como Vue, donde un archivo .vue tiene que tener más código. No hablemos ya de un componente de React. Además, una de las diferencias elementales entre Svelte y otros frameworks es que en Svelte no existe DOM virtual. Cuando se compila una aplicación de React, o una aplicación de Vue, lo que estás fabricando es un VDOM, es decir, un DOM virtual que realmente no termina de ser lo que se va a ver en el navegador web. A menudo este tipo de frameworks son mucho más lentos porque cuando presentas una aplicación hecha en React o hecha en Vue en tu navegador web, primero tienes que descargar el entorno de ejecución de React, el cual se va a ocupar de transformar ese DOM virtual en HTML. En el caso de Svelte, cuando compiles tu aplicación, directamente la va a traducir a JavaScript vanilla, con elementos y con llamadas como createElement y todas esas que están en la API DOM. Por lo tanto, la aplicación se va a ejecutar más deprisa simplemente porque no hay runtime, y todo se transforma a JavaScript estándar.

Además, Svelte introduce una reactividad mucho más integrada en el ecosistema JavaScript, porque utiliza los eventos de JavaScript, sin crear otro tipo de cosas por encima. En otras palabras, cuando desarrollemos una aplicación web con Svelte y la compilemos, prácticamente ni nos vamos a enterar que es una aplicación Svelte, porque todo se va a traducir a JavaScript vanilla realmente. No es necesario descargar ningún tipo de runtime en el navegador, ni tener Vue.js en el navegador como una dependencia, ni tampoco hacer nada de eso. Directamente transpilamos la aplicación y es código JavaScript normal y corriente.

Si tenéis más ganas de conocer cómo fabricar aplicaciones con Svelte, y asumiendo que hayáis llegado hasta aquí y no simplemente hayáis saltado ya al siguiente vídeo, precisamente saltad porque vamos a ver cómo se puede descargar Svelte y cómo se puede crear un nuevo proyecto, así que hasta ahora.