Articulos
Contacto

Crea tu propio "routing" en Svelte.

Desarrolla tu propio sistema de rutas en Svelte.

Publicado el: 4 de Febrero 2020 por Victor de Andrés Archivado en:
routes svelte
Photo by Bruno Wolff on Unsplash

Breve introducción a Svelte.

Sí estás leyendo este post, entiendo que ya conoces Svelte un nuevo frontend framework o librería, que está teniendo bastante aceptación entre la comunidad de desarrolladores y creo que tiene un gran potencial.

Aún así haré una breve introducción de este nuevo framework/librería.

Svelte tiene muchos conceptos similares a los tres otros grandes frontend frameworks: React, Angular y Vue. Si ya conoces alguno de ellos empezar a trabajar con él no te será complejo. Pero Svelte tiene una gran diferencia con ellos. Svelte tiene que ser compilado. A diferencia de los otros frameworks los cuales no es necesario compilarlos para poder ejecutarlos. Pueden funcionar directamente en un navegador, aunque habitualmente generamos bundles o paquetes para mejorar el rendimiento de nuestros programas.

Aunque los desarrollos con Svelte están realizados con HTML, Javascript y CSS, este código no es compresible para los navegadores si no es compilado previamente. Este paso es obligatorio antes de publicar nuestra app, puedes entenderlo como una desventaja o como una ventaja. Yo lo entiendo como una ventaja respecto al resto de sus competidores, ya que al compilar nuestro código se realiza una optimización que incrementará el rendimiento de nuestra aplicación.

No quiero extenderme mucho más en esta introducción, ya que el motivo principal de este post es explicar cómo desarrollar una emulación de llamadas a rutas en una app escrita con Svelte.

Si quieres conocer un poco más en profundidad que es Svelte te recomiendo que navegues a su página web, Svelte, donde podrás conocerlo más en profundidad.

Inicio.

Svelte no tiene un gestor de rutas propio, y tampoco existe un standard de facto. Aunque en npm puedes encontrar distintas librerías que te proporcionan esta funcionalidad, en esta ocasión vamos a desarrollar nuestro gestor de rutas.

El funcionamiento de nuestro gestor de rutas es muy sencillo. Imaginemos que estamos desarrollando una página spa donde en la parte superior tenemos un menú, y queremos ir variando el cuerpo de nuestra página según las distintas opciones de nuestro menú.

Página principal.

El fichero app.svelte, que es nuestra vista principal sería como sigue:

      
  <script>
    const menuOptions = [
      {
        id: 0,
        displayName: 'Opcion Alfa',
        url: 'alfa'
      },{
        id: 1,
        displayName: 'Opcion Bravo',
        url: 'bravo'
      }
    ]
  </script>
  
  <div class="spa">
    <main>
      <ul>
        {#each menuOptions as menu}
          <li>
            <a href="#{menu.url}">{menu.displayName}</a>
          </li>
        {/each}
      </ul>
    </main>
  
    <div class="view--container">
      Bienvenido a la página principal
    </div>
  </div>
  
  <style>
    .spa {
      display: flex;
      flex-direction: column;
    }
  
    ul {
      list-style: none;
    }
  
    li {
      float: left;
      margin: 0 2em;
      font-size: 1.5em;
    }
  
    .view--container {
      margin: 2em 4em;
    }
  </style>
      
    

Como verás no hay nada reseñable en este código. Simplemente he creado un objeto Json que contendrá las opciones de nuestro menú. Para en el momento de la visualización poder crear un loop y poder mostrar las distintas opciones de nuestro menú.

Es una página muy sencilla. Simplemente tenemos un menú con dos opciones, y un mensaje de bienvenida.

Capturar los clicks en el menú.

Si ahora pulsamos sobre cualquiera de las opciones de menú lo único que observaremos será como varía la dirección de nuestro navegador, haciendo referencia a una nueva url, pero no veremos ningún cambio en nuestra vista.

Para desarrollar nuestro emulador de rutas lo primero será capturar los clicks en nuestras opciones del menú. Para ello utilizaremos el evento click de svelte que nos permite llamar a una función predefinida por nosotros. Además vamos a pasar como parámetro de nuestra función el id de la opción seleccionada.

Para ello haremos las siguientes modificaciones: Primero añadiremos el siguiente código en nuestro bloque script.

      
  function handleClickMenu(selectedOption) {
    console.info(selectedOption);
  }
      
    

Por el momento simplemente mostraremos por la consola el id de la opción seleccionada.

Y en nuestro código html sustituiremos el código de nuestro link por el siguiente:

      
  <a href="#{menu.url}" on:click={ () => handleClickMenu(menu.id)}<{menu.displayName}</a>
      
    

Con esta modificación estamos indicando que cada vez que hagamos un click en cualquiera de las opciones del menú llamaremos a la función handleClickMenu enviado como único parámetro el identificador de la opción.

Cambio de vista.

Una vez hemos capturado los clicks el siguiente paso que vamos a desarrollar es el cambio de nuestra vista. De este forma simularemos el cambio de ruta en nuestra aplicación.

Lo primero que haremos será importar nuestros componentes en nuestro componente principal.

      
  import Alfa from './Alfa.svelte';
  import Bravo from './Bravo.svelte';
      
    

Una vez hemos importados nuestras componentes modificare nuestro objeto menuOptions, creando una nueva propiedad, component qué hará referencia a un componente en concreto, el que visualizaremos cuando se seleccione una opción.

Siendo la definición del objeto menuOptions como sigue:

      
  const menuOptions = [
    {
      id: 0,
      displayName: 'Opcion Alfa',
      url: 'alfa',
      component: Alfa
    },{
      id: 1,
      displayName: 'Opcion Bravo',
      url: 'bravo',
      component: Bravo
    }
  ]
      
    

El siguiente paso es indicar que cada vez que hagamos click en cualquiera de nuestras opciones de menú se cargue el componente indicado.

Para ello creare una nueva variable en nuestro desarrollo, currentSelectedOptionMenu, que será donde se almacenará el id seleccionado, para poder mostrar el componente correspondiente posteriormente. Este paso lo realizaremos en la función handleClickMenu que creamos anteriormente.

La función quedará de la siguiente forma:

      
  function handleClickMenu(selectedOption) {
    currentSelectedOptionMenu = selectedOption;
  }
      
    

He borrado el mensaje por consola, ya no nos es necesario.

Y el último paso es modificar la vista para que muestre el componente seleccionado. Para ello modificaremos el código html correspondiente al bloque, view--container.

El nuevo código sería:

      
  
{#if currentSelectedOptionMenu !== null} <svelte:component this={menuOptions[currentSelectedOptionMenu].component}/> {:else} <div>Bienvenido a la página principal</div> {/if}

Voy a comentar más detalladamente esta parte.

Lo primero que vemos es una condición que nos indica que cuando el valor currentSelectedOptionMenu no sea nulo no muestre un componente, y en caso contrario muestre el texto "Bienvenido a la página principal". Pero donde se hace la "magia" es en la línea:

      
  <svelte:component this={menuOptions[currentSelectedOptionMenu].component}/>
      
    

En esta línea hacemos uso de la etiqueta <svelte:component>. Esta etiqueta de la api de svelte nos proporciona la funcionalidad de renderizar componentes dinámicamente. Y nosotros la utilizamos para renderizar un nuevo componente, el componente correspondiente a la propiedad component de nuestro objeto menuOptions de la opción previamente seleccionada.

Conclusión.

Como verás hemos construido nuestro propio gestor de rutas de una manera muy sencilla. El código que hemos visto en esta ocasión es bastante sencillo.

Pero a partir de este punto podemos seguir definiendo nueva funcionalidad para nuestras vistas. Por ejemplo crear unas guardas para proporcionar seguridad a nuestra página web.

Puedes encontrar el código de este ejemplo en el siguiente repositorio de github: https://github.com/VictorDeAndres/routes-svelte

Comentarios
Escribe tu comentario