DEV Community

Cover image for Conociendo Svelte 馃殌
Erick Vargas
Erick Vargas

Posted on • Updated on

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.

Comparaci贸n de tama帽os en el bundle final

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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铆

Discussion (0)