Conociendo Svelte 🚀
Tags: svelte, javascript, webdev, spanish
Published: 2020-02-03 02:16:20

**Svelte** es un framework de Javascript que nos permite construir interfaces de usuario del lado frontend, podrían decir que es un sector ya muy dominado por otras opciones como React y Vue pero donde **Svelte** se diferencia de las demás opciones es que no es una dependencia que se necesite una vez terminado el proyecto, es más como un compilador, que procesa tu aplicación y la convierte a Javascript nativo únicamente al código de tu aplicación, sin la necesidad de cargar con todo el framework en el bundle final haciendo que el resultado sea mucho menor con respecto a otros frameworks.

![Comparación de tamaños en el bundle final](https://i.imgur.com/KxScnSO.png)

Otra de sus principales características es que no hace uso de un Virtual DOM, así haciendo que el desempeño de la aplicación debido a que no tiene que cargar con una copia del DOM para controlar los estados de la aplicación si no que solo calcula las variables y quienes dependen de esas variables y actualiza el DOM real únicamente en las partes necesarias.

**Svelte** cuenta con un tutorial interactivo muy bueno que ayuda a entender como es su funcionamiento de una manera simple y hasta divertida.
Se encuentra en [Svelte tutorial](https://svelte.dev/tutorial/basics).

Una vez se tiene ya una idea de como se desarrolla con **Svelte**, lo cual no es muy complejo ya que cuenta con una sintaxis muy clara, siendo un archivo ``.svelte`` un archivo que haría las funciones de un HTML, con una etiqueta ``<script>`` para el Javascript y una etiqueta ``<style>`` para el CSS, algo como esto:


```html
<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
	h1{
		margin: 1em;
	}
</style>
```

###**Primeros pasos en Svelte**

Dentro de algunas de las desventajas que se tiene con **Svelte** se podría decir que es la auscencia de un CLI (por ahora) por lo cual se tiene un arranque un poco más lento a la hora de empezar un proyecto, en este caso se puede usar un template que está el propio [Github de Svelte](https://github.com/sveltejs/template) para empezar:


```
npx degit sveltejs/template svelte-app
```

Posteriormente se necesita un ``npm install`` para instalar las dependencias necesarias en nuestro proyecto. 
El proyecto consta de la siguiente estructura:


* ``public/``: carpeta donde se encuentra los archivos públicos como el ``index.html`` y el ``global.css``.

* ``public/build/``: se genrea una vez se compila el proyecto y es donde se encuentran los archivos JS y CSS ya transformados y con tamaño reducido.

* ``src/``: carpeta donde se encuentra todo lo que vayamos a usar a la hora de desarrollar nuestro proyecto.

* ``src/App.svelte``: es el componente principal de la aplicación donde se incorporarán los demás componentes, en el caso de ejemplo cuenta con la siguiente estructura:

```html
<!--App.svelte-->

<script>
	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the 
        <a href="https://svelte.dev/tutorial">Svelte tutorial</a> 
        to learn how to build Svelte apps.
    </p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```

Donde lo más resaltante es el ``export let name`` en sección de código Javascript que es una variable que se recibe desde ``main.js`` como un prop y después se puede usar directamente en la sección de HTML solo envolviéndolo entre dos llaves.

* ``src/main.js``: es el archivo principal en donde acoplas el componente dentro del ``document.body`` que es el cuerpo de toda la página.

```javascript
// main.js

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;
```


De manera sencilla también se puede usar su entorno web para hacer unas pequeñas pruebas de la interacción entre los componentes, la reactividad y poder ver el producto compilado sin la necesidad de instalar en local. [Justo desde aquí](https://svelte.dev/repl/hello-world?version=3)