Bienvenido al tutorial de Svelte, una guía de cómo es compilador nos permite construir interfaces web
¿Qué es Svelte?
En términos simples, Svelte es un compilador que genera código Javascript altamente optimizado y de reducido tamaño. Entre sus características encontramos:
Convierte el codigo escrito por el desarrollador/a en build time
Su escritura comprende los elementos sintácticos de JavaScript, HTML y CSS.
Es una solución al problema de construcción de interfaces interactivas (desde el punto de vista de la experiencia de usuario)
Es aún prematuro. Sin embargo, varias encuestas lo proyectan como una herramienta que será muy usada y aceptada
Svelte fue creado por Rich Harris. Él es un desarrollador el cual buscó por mucho tiempo una forma de mejorar el desempeño de las aplicaciones que desarrollaba ya que no estaba conforme con las tecnologías que existían en el momento.
Rich creó Svelte con tres objetivos en la mente:
Crear productos con un exelente rendimiento y fácil desarrollo.
Que el framework tuviera una curva de aprendizaje corta para facilitar la integración en otros proyectos.
Suavizar el trabajo del navegador reduciendo el uso de librerías por JavaScript puro.
Lanzamiento de versiones
Tour por el lenguaje
En la siguiente página encontras un markdown con los comentarios sobre las características que ofrece este framework.
Se resaltan las diferencias dentro de cada recorte de código para apreciar mejor los conceptos.
Características
En esta sección se mostrarán las principales carácteristicas que componen el lenguaje Svelte
Simplicidad semántica
Lo que logra Svelte en términos de simplicidad semántica (lo que quiero que mi interfaz haga) es lo que ha estado buscando Vue o React.
Ahorra tiempo
Se observa que es una buena herramienta pues facilita muchas tareas al programador, que finalmente se traduce en menores tiempos de desarrollo
No olvidar
Que Svelte más que un lenguaje, es un sistema de traducción de lenguaje Svelte (JavaScript + HTML + CSS) a JavaScript
Versatilidad
La característica más solicitada durante un tiempo,Svelte admite oficialmente TypeScript.
esto proporcionará una experiencia de desarrollo mejorada, que se integra de manera óptima en bases de código más extensas de Svelte, ya sea que esté utilizando TypeScript o JavaScript.
Instalación y uso
Requisitos
Lo primero que necesitamos es tener instalado Node.js (un runtime de Javascript que nos permite ejecutar código escrito en éste lenguaje pero por fuera del navegador)
Una vez cumplido éste requisito, se procede a installar npx (un ejecutador de código) con el siguiente comando (npm viene incluido con Node.js) que
debe escribirse en consola
npm i -g npx
Y listo, ya podemos crear nuestro primer proyecto de Svelte. Para hacerlo, escribimos el siguiente comando en consola (posicionándonos en el directorio d preferencia)
npx degit sveltejs/template nombre-de-la-app
Una vez hecho esto, veremos que fue creado un directorio (carpeta) con el nombre "nombre-de-la-app".
Para ejecutar el proyecto, simplemente (estando dentro del directorio "nombre-de-la-app") ejecutamos el comando
npm run dev
Hecho lo anterior, aparecerá un mensaje en consola como el siguiente
Como en este caso la dirección es http://localhost:8080, vamos a nuestro navegador de preferencia e ingresamos ésta dirección. ¡Perfecto! El navegador debería mostrarnos lo siguiente
El archivo main.js se va a ver más o menos así:
import App from './App.svelte';
new App({
target: document.body,
props: {
name: 'world'
}
});
En él podemos ver que se importa un archivo App.svelte, el cual tiene una estructura básica inicial de este tipo
<script>
export let name;
</script>
<h1>Hello {name}!</h1>
Uso y ejemplo
Para crear una aplicación con Svelte, podemos editar uno o varios archivos .svelte como el que acabamos de ver, o como los ejemplos vistos en el tour por el lenguaje:
