Conociendo Svelte 🚀

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.

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.

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:

<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 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:
  

<!--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.

// 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í