34

Svelte: un nuevo framework para crear aplicaciones web mejoradas

12086Puntos

hace un mes

Curso Práctico de React JS
Curso Práctico de React JS

Curso Práctico de React JS

React es una de las librerías más utilizadas hoy para crear aplicaciones web. Aprende a través de la creación de la interfaz de PlatziVideo todo lo que necesitas para crear increíbles componentes con React

Svelte un nuevo framework de JavaScript para construir interfaces de usuario. Comparado con otras herramientas de desarrollo web como React, Angular o Vue, las cuales realizan la mayor parte de su trabajo en el navegador, Svelte cambia este paradigma y se ejecuta en tiempo de compilación, convirtiendo sus componentes en código imperativo altamente eficiente.

Otra de las primicias de Svelte es que no utiliza un Virtual DOM, sino que escribe código que actualiza quirúrgicamente el DOM cuando cambia el estado de tu aplicación.

Svelte también cuenta con una sintaxis más concisa, fácil y corta para crear aplicaciones basadas en componentes.

En mi experiencia como desarrollador Frontend he utilizado React, Angular, Vue, Elm y otras herramientas de desarrollo web con JavaScript. Svelte me ha sorprendido en cómo trabaja y cómo propone el uso de esta nueva herramienta para los Frontends.

Crear una aplicación con Svelte.


El reto ahora es crear una aplicación con Svelte, entender cómo podemos trabajar un proyecto construido desde cero y cómo publicarlo en GitHub Pages.

¿Qué aprenderemos?

  1. Configurar un proyecto
  2. Instalar Svelte
  3. Instalar y configurar Babel
  4. Instalar y configurar Webpack
  5. Crear una Aplicación con Svelte
  6. Entorno de desarrollo Local + Compilar proyecto
  7. Publicar nuestro proyecto en GitHub Pages.

Configurar Proyecto

Lo primero que necesitamos es crear una carpeta e inicializar nuestro proyecto con git y npm desde una consola o terminal.

mkdir hello-svelte && cd hello-svelte

Inicializamos nuestro proyecto con git y npm:

 git init 
 npm init -y

Instalar Svelte

Ya que tenemos la carpeta del proyecto, vamos a instalar Svelte y crear la estructura necesaria de para trabajar.

npm install svelte --save


La estructura para nuestro proyecto será la siguiente:

  • dist/: carpeta donde estará el proyecto compilado.
  • public/: carpeta donde estarán los recursos públicos de nuestro sitio.
  • src/ : carpeta donde colocaremos nuestro código.
  • src/componentes/: carpeta donde colocaremos nuestros componentes.
  • src/index.js: punto de entrada del proyecto.

Instalar y configurar Babel


En este proyecto utilizaremos Babel, una herramienta para transformar nuestro código JavaScript ES6+ a JavaScript que pueda ser soportado por todos los navegadores, con lo cual podemos disponer de las nuevas funcionalidades de JavaScript en este proyecto.

npm install @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev


Creamos un archivo en la raíz del proyecto con el nombre “.babelrc” y añadimos la siguiente configuración:

    {
      "presets": [
        "@babel/preset-env"
      ],
    }

Instalar y configurar Webpack

Webpack nos permite compilar nuestro proyecto, creando un archivo que incluye todos los recursos necesarios para llevar a producción el proyecto que estamos trabajando. También nos permite optimizar los procesos de construcción y optimización del código que estamos trabajando.

Instalación:

npm install webpack webpack-cli html-webpack-plugin--save-dev


Creamos el archivo webpack.config.js en la raíz del proyecto:

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js', // Elegimos nuestro punto de entradaoutput: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }, // Añadimos nuestro punto de salida resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte'],
      }, // Añadimos el soporte para las extensiones que utiliza sveltemodule: {
        rules: [
          {
            test: /\.js?$/, 
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
            },
          }, // Creamos la regla para nuestros archivos JS
          {
            test: /\.svelte$/,
            exclude: /node_modules/,
            use: {
              loader: 'svelte-loader'
            }
          }, // Utilizamos svelte-loader para trabajar con los archivos .svelte 
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          inject: true,
          template: './public/index.html',
          filename: './index.html',
        })
      ] // utilizamos este plugin para añadir el recurso compilado al documento HTML
    };

Crear una Aplicación con Svelte


Ya que tenemos la configuración necesaria para nuestro proyecto en Svelte, vamos a crear los elementos que necesitamos para tener una primera aplicación funcionando.

La aplicación que vamos a construir con Svelte será una página que nos permita consumir una API pública. Para este ejemplo utilizare la API de la serie animada “Rick And Morty” y vamos a presentar los personajes de esta serie en nuestra aplicación.

Creamos un componente llamado “App.svelte” dentro de la carpeta “src/components/” donde estará toda la lógica, diseño y estructura.

    <script>
      import { onMount } from"svelte"; // Importamos onMount un método que utilizaremos para detectar cuándo esta montado el componente.// Creamos una constate API con la URL de la API publicaconst API = "https://rickandmortyapi.com/api/character";
    
      // Asignamos la variable "data" y "characters" como arreglos vacíos.let data = [];
      let characters = [];
    
      // Utilizamos el método onMount para crear lógica una vez que se haya montado en el DOM el componente
      onMount(async () => {
    	// Creamos un llamado a la API por medio de Fetchconst res = await fetch(API);
    	// Utilizamos "data" para asignar el resultado de la llamada
        data = await res.json();
    	// Cargamos a characters el resultado de los personajes
        characters = data.results;
      });
    </ script>
    
    // Creamos nuestros estilos para la aplicación
    <style>
      .characters {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
      }
      figure,
      img {
        width: 100%;
        margin: 0;
      }
    </style>
    
    // Creamos el bloque de HTML de nuestra aplicación donde estará también la lógica para cada personaje.
    <div class="characters">
    	// En el arreglo de personajes regresamos un personaje e iteramos por cada elemento.
      {#each characters as character}
    		// una vez establecido "character" disponemos de los elementos que tiene este objeto.
        <figure>
          <img src={character.image} alt={character.name} />
          <figcaption>{character.name}</figcaption>
        </figure>
    	// En caso de que no tengamos un resultado de la API, creamos un elemento para mostrar "Loading..."
      {:else}
        <p>loading...</p>
      {/each}
    </div>


Como pueden apreciar nuestro componente incorpora todos los elementos necesarios en un archivo llamado App.svelte, podemos asignar la lógica que utilizaremos de JavaScript, los estilos necesarios para presentar nuestra aplicación y el HTML donde haremos render del llamado de la API.

Ahora creamos nuestro punto de entrada, el cual estará en la raíz de la carpeta /src/ y se debe de llamar index.js.

// Importamos el componenteimport App from './components/App.svelte';// Creamos App y definimos el target dentro del documento HTML.const app = new App({
      target: document.querySelector('main'),
      data: {
        quotes: []
      },
    });


Creamos el archivo HTML dentro de la carpeta /public. Este será utilizado por Webpack para insertar el script bundle.js y copiar este archivo a la carpeta dist/.

<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Rick And Morty by Svelte App</title></head><body><main></main></body></html>


Ya que tenemos estos 3 archivos, tenemos nuestra aplicación lista para compilarse.

Entorno de desarrollo Local + Compilar proyecto


Si queremos disponer de un entorno de desarrollo local y visualizar los cambios en tiempo real, utilizaremos el paquete webpack-dev-server que nos permitirá trabajar más fluido y revisando los cambios cada que actualicemos el proyecto.

npm install webpack-dev-server --save-dev


Ahora vamos a añadir el script de start y build dentro del package.json. Estos scripts nos permitirán iniciar el entorno de desarrollo local, ver los cambios inmediatamente y compilar el proyecto para enviarlo a producción.

"scripts": {
     "build": "webpack --mode production",
     "start": "webpack-dev-server --open --mode development"
 },



Una vez que añadimos los scripts en nuestra terminal, vamos a probar el de “start”.

npm run start


Esto compilara nuestro proyecto en modo de desarrollo y nos abrirá un navegador con el proyecto funcionando en localhost:8080. Podemos probar la aplicación, regresar al editor de código y cualquier cambio que se le haga al proyecto será reflejado en esta dirección casi instantáneamente.

svelte-app.png

Compilar el proyecto para producción:

npm run build


Con este comando vamos a tener el proyecto compilado en la carpeta /dist. El contenido dentro los archivos index.html y bundle.js serán los elementos que debemos enviar a producción. También puedes probar abriendo el archivo index.html en tu navegador y probar cómo funciona la aplicación ya compilada.

Publicar nuestro proyecto en GitHub Pages.


Ya que tenemos una aplicación funcionando con svelte y toda su configuración para tener un proyecto construido, es momento de pensar en cómo vamos a enviar nuestro trabajo a producción. Para esto utilizaremos GitHub Pages.

NOTA: es necesario que crees un repositorio en Github y subas todos los cambios realizados para poder continuar con esta sección.

Buena práctica:

Crea el archivo .gitignore en la raíz del proyecto para ignorar la carpeta /node_modules/. Puedes utilizar https://gitignore.io para crear un excelente archivo .gitignore en tu proyecto.

Enviar a producción una carpeta en GitHub Pages.


Primero debemos de compilar el proyecto con el comando previamente creado:

 npm run build


En la terminal ejecutamos el siguiente comando para enviar los cambios al repositorio:

git add dist && git commit -m "deploy gh-pages"


Creamos una sub rama llamada gh-pages, la cual solo contendrá los archivos index.html y bundle.js, con ellos es suficiente para publicar el proyecto en GitHub Pages.

git subtree push --prefix dist origin gh-pages


Una vez publicado, podemos revisar la url publica (con la cual podemos acceder al proyecto compilado) en la configuración del proyecto en la sección de GitHub Pages.

La url se compone de la siguiente forma:

https://[TU_USUARIO_GITHUB].github.io/[NOMBRE_DE_TU_REPOSITORIO]/

Mi url es: https://gndx.github.io/svelte-quickstart/ (aquí puedes ver el proyecto funcionado).

También te comparto el repositorio de este proyecto para que lo compares con el tuyo: https://github.com/gndx/svelte-quickstart

En Conclusión

Aprendimos a crear un proyecto con Svelte, un framework que está dando de qué hablar por su forma de trabajar. Entre sus cualidades podemos encontrar que es una herramienta potente para construir aplicaciones web rápidas, similar a otras herramientas como React o Vue, con las cuales puedes crear interfaces de usuario interactivas.

Recuerda que Svelte convierte tu aplicación en JavaScript al momento de compilar, en lugar de interpretar el código en tiempo de ejecución, así que no paga algunos costos en el rendimiento y no incurre en una penalización de la primera carga de la aplicación.

Ahora que entiendes cómo trabaja Svelte, ¿le darías una oportunidad para crear tus proyectos?

Curso Práctico de React JS
Curso Práctico de React JS

Curso Práctico de React JS

React es una de las librerías más utilizadas hoy para crear aplicaciones web. Aprende a través de la creación de la interfaz de PlatziVideo todo lo que necesitas para crear increíbles componentes con React
Oscar
Oscar
@gndx

12086Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
1717Puntos

Tremendo, https://www.chess.com/ está desarrollado con SVELTE. La mejor web de ajedrez online mundial.

2
12086Puntos
un mes

Interesante, No tenia idea de un sitio grande utilizando Svelte. Gracias.

1
322Puntos
22 días

La aplicación que me detecta las tecnologias de una web, pone vuejs

5
60176Puntos

Svelte está bien chevere. 😮
Le daré unos 👀. 😌

5
1787Puntos

ajajja apenas con React y Angular y ahora ike SVELTE, no hay tiempo para tanto…

3
12086Puntos
un mes

No tienes que aprender todos, mientras entiendas JavaScript puedes entender cada nuevo fremework o librería que salen a resolver problemas particulares.

Entender cómo funciona el mercado y que tecnologías tienen importancia nos da contexto para tomar desiciones de que tecnologías implementar.

3
2090Puntos

Wooww 😉 extraordinario blog, y realizare el ejercicio para probarlo, también después mis cursos de ruta de aprendizaje este estará en la lista de siguientes metas. Gracias por la información

1
12086Puntos
25 días

Te va gustar mucho, al principio confunde un poco ya que todo va en el archivo .svelte, pero luego es fácil saber donde están tus elementos.

3
12082Puntos

esto es interesante, mi próximo pasatiempo svelte…

1
12086Puntos
25 días

Te va gustar

3
5Puntos

Estoy usando https://sapper.svelte.dev en un proyecto propio. Es next o nuxt pero con svelte. Pero parece que la stable release tardará en llegar.

1
12086Puntos
25 días

Siempre es bueno aprender y jugar con otras herramientas.

3
3462Puntos

Para ese deploy a Github pages, la rama tiene que llamarse gh-pages ?

3
4922Puntos
un mes

Sí pero puedes configurarlo para la rama master o para un folder /docs que tengas en master.

Te dejo la info de Github sobre el tema 😃

You can configure GitHub Pages to publish your site's source files from master, gh-pages, or a /docs folder on your master branch for Project Pages and other Pages sites that meet certain criteria.
3
6178Puntos

Interesante alternativa, realizaré un web de prueba para ver el uso y rendimiento de la misma, muchas gracias por el tutorial!

Excelente trabajo, saludos

1
12086Puntos
un mes

Nos compartes los resultados así podemos tomar mejor la decisión de cúal implementar.

3
2407Puntos

Master, gracias por el Tutorial y la intro a Svelte.

3
9519Puntos

Bastante interesante creo que es justo darle una oportunidad, muchas gracias por el material.

3
912Puntos

tengo una pregunta, hay que pagar para github pages o no, gracias

1
12086Puntos
un mes

No, GitHub Pages es totalmente gratuito en proyectos que son de código libre.

2
45Puntos

Bastante interesante,No veo la hora de aprender mas sobre ello

1
12086Puntos
25 días

La documentación esta muy bien explicada y tiene ejemplos mas complejos, puedes unirlos a este recurso y probarlos en tu local.