DEV Community: Victor de Andres

Crea tu propio "routing" en Svelte

Victor de Andres — Tue, 04 Feb 2020 19:09:55 +0000

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

Si ejecutamos nuestro proyecto en este momento obtendremos el siguiente resultado.

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

Las vistas

El siguiente paso que realizaremos será crear el código de las vistas de nuestras opciones de menú. Para ello crearemos dos nuevos ficheros Alfa.svelte

<script>
</script>

<h3>Hey !!!!</h3>>
<p>Esta es la página de la primera opción</p>>

<style>
  h3 {
    color: green;
  }

  p {
    color: rebeccapurple;
  }
</style>

y Bravo.svelte

<script>
</script>

<h3>Enhorabuena</h3>>
<p>El emulador de rutas funciona</p>>

<style>
  h3 {
    color: blue;
  }

  p {
    color: royalblue;
  }
</style>

Son dos vistas muy sencillas que nos permitirán testar que nuestro emulador de rutas para svelte funciona correctamente.

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

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

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.

Tutorial. Crea tu propio servidor notificaciones push.

Victor de Andres — Fri, 03 Jan 2020 19:40:08 +0000

Esta es la segunda parte del post anterior, Tutorial implementación de notificaciones push en Angular, en el cual creamos un cliente con Angular para recibir notificaciones push. En este nuevo post vamos a desarrollar un servidor web para emitir nuestras notificaciones.

Comencemos.

En esta ocasión para desarrollar nuestro servidor web, voy a utilizar Express como servidor web y la siguiente librería: web-push, que nos ayudara a enviar nuestros mensajes a los suscriptores según el protocolo Web Push.

Credenciales

Antes de comenzar propiamente a desarrollar nuestro servidor de notificaciones debemos crear unas credenciales VAPID.

VAPID es un protocolo que permite restringir la validez de una suscripción a un servidor de aplicaciones específico. Es decir, al usar VAPID solo un servidor podrá enviar notificaciones a su suscriptor. Además al utilizar este protocolo agregamos más información a las notificaciones push. De esta forma el operador del servicio push sabrá quien le está enviando las notificaciones.

Una de las ventajas de utilizar la librería web-push es que no permite crear unas nuevas credenciales VAPID para nuestro servidor.

Para ello utilizaremos el siguiente comando:

./node_modules/.bin/web-push generate-vapid-keys

Que nos generará tanto la clave pública como privada para utilizar nuestro servidor de notificaciones.

=======================================

Public Key:
BJIi33DcIJFfrrvao9CKgRW-dc2W14C6ZLCSoI1UgAd9b-0gA2odF496J7_iNWFkyiBtM8Hhi3fjmcGqjqwDPNg

Private Key:
VIH2GywYhfj85evbo-rES1MgygmJCRi9zGbSU16PxbQ

=======================================

Una vez hemos creado nuestras credenciales comenzaremos a desarrollar nuestro servidor web.

Servidor

Como he comentado anteriormente vamos a utilizar express como servidor web, que será el encargado de enviar las notificaciones a los clientes suscritos.

Lo primero será instalar el paquete de express, si no lo hemos instalado con anterioridad. Además deberemos añadir el módulo body-parser de express que nos permitirá recuperar los datos de un formulario HTML.

Doy por hecho que ya conoces express y el módulo body-parser por lo que no voy a entrar en más detalle de cómo instalar ambos paquetes. En esta ocasión me centraré en el código para crear nuestro servidor de notificaciones.

Suscriptores

Nuestro servidor tendrá dos partes. Una donde se deberán dar de alta nuestros suscriptores para recibir nuestros mensajes, y un segunda parte que será la encarga de emitir los mensajes a nuestros suscriptores.

Para nuestra primera parte crearemos un nuevo endpoint, en el cual recibiremos las peticiones de los suscriptores con nuestra clave pública.
Si recuerdas el artículo "Tutorial implementación de notificaciones push en Angular" el usuario nos enviaba una petición post con un objeto que llamamos "subscription" con su información de conexión.

El código sería como el siguiente.

let Subcription;

app.post('/subscribe', (req, res) => {
  Subcription = req.body;
  res.status(201).json({status: 'Subscription Correct'});

  sendMessage('Subscription Correct');

});

Este código crea un nuevo endpoint, subscribe de tipo post. En él se guardamos el cuerpo del mensaje recibido, que es el que posee la información de nuestro suscriptor en la variable Subcription que hemos definido con anterioridad a crear nuestro nuevo endpoiint. Como estamos haciendo una demo almacenamos la información en la variable Subcription pero en un proyecto real deberíamos tener una base de datos donde almacenar la información de todos nuestros suscriptores.

Una vez almacenado el cuerpo del mensaje enviamos un código de respuesta 201. Este código de respuesta de indica que la solicitud ha tenido éxito y se ha llevado a la creación de un recurso. Y posteriormente se invoca a la función sendMessage que será la encargada de enviar el mensaje "Subscription Correct" a nuestro suscriptor.

Mensaje

Para enviar el mensaje propiamente dicho utilizaremos la librería web-push que instalamos anteriormente.

Para ello lo primero que deberemos hacer es importarla antes de hacer uso de ella.

const webpush = require('web-push');

Una vez importada, deberemos configurarla. Para ello utilizaremos el método setVapidDetails, enviando los siguientes parámetros: una dirección de correo electrónico, y las claves pública y privada creadas al principio de este artículo.

const publicVapidKey = 'BJIi33DcIJFfrrvao9CKgRW-dc2W14C6ZLCSoI1UgAd9b-0gA2odF496J7_iNWFkyiBtM8Hhi3fjmcGqjqwDPNg';
const privateVapidKey = 'VIH2GywYhfj85evbo-rES1MgygmJCRi9zGbSU16PxbQ';

webpush.setVapidDetails('mailto:example@test.com', publicVapidKey, privateVapidKey);

Una vez importada y configurada la librería web-push, crearemos nuestra función de envió de notificaciones.

function sendMessage(message) {

const payload = JSON.stringify({ 
  title: 'Test Push Notificaction',
  message: message
});

 webpush.sendNotification(subscription, payload).catch(error => {
    console.error(error.stack);
  });
}

Como puedes observar la función para el envió de las notificaciones es muy sencilla.

En primer lugar creamos un objeto JSON con las propiedades title y message, que contendrá el cuerpo de la notificación que queremos enviar a nuestros suscriptores. Y posteriormente llamamos al método sendNotification que será el encargado de enviar las notificaciones a nuestros suscriptores.

Final

Y este es el final de este segundo artículo donde hemos visto cómo programar tanto desde la parte del cliente, como de la del servidor el envío de notificaciones a los suscriptores de una página web.

Funciones en Javascript. 7 formas de declarar una función

Victor de Andres — Sun, 08 Sep 2019 09:14:14 +0000

Por definición una función es un procedimiento, un conjunto de sentencias que realizan una tarea o calculan un valor. En Javascript este es uno de los conceptos más importantes y versátiles de este lenguaje de programación.

Una de las características más importantes de las funciones en Javascript es su versatilidad. En Javascript las funciones son diferentes a las funciones de otros lenguajes de programación. En Javascript las funciones son un objeto. Por ello se les puede asignar variables, arrays u otros objetos. La forma en la cual hallamos definido nuestra función, definirá el comportamiento de la misma. Siendo los tipos de función que podemos crear en Javascript los siguientes:

Function declaration
Function expression
IIFE (Immediately Invoked Function Expression)
Shorthand method definition
Arrow function
Generator function
Function constructor

En este ocasión dejaré los títulos en inglés para un mejor reconocimiento posterior. Por si lees otros artículos y/o manuales y puedas distinguirlas fácilmente.

Function declaration.

Comenzaremos por la más sencilla de todas, la "Function declaration".

Este tipo de función se creará con la palabra reservada function, seguido obligatoriamente por un nombre, que identificará a nuestra función, una lista de parámetros entre paréntesis, y el símbolo de las llaves {}. Qué será el que delimite el contenido de nuestro conjunto de sentencias.

La lista de parámetros cuando creamos una función no es obligatoria, podemos definir una función sin parámetros.

Cuando estemos trabajando con funciones es importante que diferencies entre parámetro y argumento. Un parámetro es/son la/s variables que definimos cuando creamos la función. Y los argumentos son los datos que pasamos a la función cuando la invoquemos. Serán los valores de los parámetros de la función.

Una vez hemos visto cómo definir nuestra función en Javascript, realicemos un simple ejemplo.

function hola(nombre){
     console.log(`Hola ${nombre}.`)
}

hola('Victor');    // => Hola Victor

En este ejemplo definimos nuestra función hola con un parámetro "nombre" y escribirá por consola hola y el nombre con el que hayamos invocado nuestra función.

Otra característica es que por defecto las funciones devuelven el valor "undefined". Si queremos que nuestra función devuelva algún valor debemos utilizar la instrucción return en nuestro bloque.

function respuesta(){
}

console.log(respuesta());    // => undefined

function respuesta2(){
     return 'Hola';
}

console.log(respuesta2());   // => Hola

Además este tipo de funciones son compatibles con el hoisting. El hoisting es una característica de Javascript por la cual las definiciones se ejecutan al principio de la ejecución del código.

Si por ejemplo escribimos el siguiente código.

hola('Victor');      // => Hola Victor

function hola(nombre) {
    console.log(`Hola ${nombre}.`)
}

No obtendremos error al invocar la función hola, que aún no ha sido creada, ya que Javascript lo habrá ejecutado de la siguiente forma:

function hola(nombre){
    console.log(`Hola ${nombre}.`)
}

hola('Victor');    // => Hola Victor

Function expression.

La siguiente forma de declarar una nueva función que vamos a ver es muy similar al tipo de anterior, "Function Declaration". La sintaxis para crear estas funciones es similar a la anterior. La única diferencia es que la definición de nuestra nueva función no comienza por instrucción function y el nombre de la función es opcional.

Este tipo de funciones las podemos almacenar en una variable. Lo cual nos permite utilizarlas en algunos de los siguientes ejemplos.

// Asignarla a una variable como un objeto
const ejemplo = function(...) { ... }

// Crear un método en un objecto
{
    ...
    'suma': function(...) { ... },
    ...
}

// Utilizar la función como un callback
.cb(function(...) { ... })

A continuación vamos a ver cómo crear una función que sumará dos al argumento que enviemos a la función.

const SUMADOS = function sumaDos(valor) {
     return valor + 2;
}

console.log(SUMADOS(5));    // => 7

Si al crear nuestra nueva función no utilizamos un identificador estaremos creando una función anónima.

Veámoslo con el mismo ejemplo.

const SUMADOS = function(valor) {
     return valor + 2;
}

console.log(SUMADOS(5));    // => 7

Como puedes ver el resultado es el mismo.

Un diferencia con las "Function Declaration" es que estas no son compatibles con el hoisting. Por ello si invocas una de estas funciones antes de su declaración antes de su definición obtendrás un error.

hola('Victor')
// ReferenceError: hola is not defined


const hola = function hola(nombre) {
    console.log(`Hola ${nombre}.`)
}

IIFE (Immediately Invoked Function Expression)

Normalmente cuando definimos una función es porque la vamos a llamar en varias ocasiones, pero y sí sólo queremos llamar a la función en una sola ocasión y obtener un resultado. Para ello podemos utilizar la funciones IIFE. Este tipo de funciones se ejecutan inmediatamente y no son accesibles posteriormente.

Para crear una función de este tipo deberemos crearla en un operador de agrupación (). Seguido de (), lo que posibilitará el interpretado directamente en el motor de JavaScript.

Veámoslo con un pequeño ejemplo.

( function () {
    let nombre = 'Victor'
    return `Hola ${nombre}`
})()

// Hola Victor

Al definir nuestra función dentro de un operador de agrupación no permitimos acceder a variables fuera del IIFE, así como no "contaminar" el scope global.

(function () { 
    var nombre = "Victor";
})();

console.log(nombre);
// Uncaught ReferenceError: nombre is not defined

Shorthand method definition.

El cuarto tipo de definición que vamos a ver es el "Shorthand method". Este forma de crear las funciones puede ser utilizado como método en la declaración de un objeto o en las clases de ES6.

Para crear este tipo de función debemos asignar un nombre de función seguido de una lista de parámetros entre paréntesis y los símbolos de llaves para delimitar el cuerpo de las instrucciones.

Lo veremos mejor con un ejemplo.

const poblacion = {
  personas: [],
  add(...personas) {
    this.personas.push(...personas);
  },
  saluda(index) {
    return `Hola soy ${this.personas[index]}`;
  }
};

poblacion.add('Luis', 'Jesus', 'Victor');
poblacion.saluda(1) // => 'Hola soy Jesus'

Veamos en detalle este ejemplo. Add() y saluda() son dos métodos de la clase poblacion que hemos definido con el método "Shorthand". A continuación hemos invocados los dos métodos de la clase. En primer lugar poblacion.add para añadir tres personas, Luis, Jesus y Victor. Y posteriormente hemos invocado al método saluda, enviando como parámetro 1 que nos devuelve un saludo de la persona número 1, en nuestro ejemplo Jesús.

Como puedes observar esta sintaxis es muy sencilla, si escribiéramos esta misma función de una manera clásica sería como a continuación.

const poblacion = {
  personas: [],
  add: function(...personas) {
    this.personas.push(...personas);
  },
  saluda: function(index) {
    return `Hola soy ${this.personas[index]}`;
  }
};

poblacion.add('Luis', 'Jesus', 'Victor');
poblacion.saluda(1); // => 'Hola soy Jesus'

Arrow function.

Otra de las novedades de ES6 son las "Arrow function". La forma de crear estas funciones es la siguiente: Primero definiremos la lista de parámetros, en caso de ser necesario, entre paréntesis seguido del símbolo => y las {} para indicar las instrucciones que se van a realizar.

Además de la sintaxis que es diferente a las anteriores este tipo de funciones tienen las siguientes características.

Las "arrow function" no crean su propio contexto al ejecutarse. Al contrario que las "function expression" o las "function declaration" que crea su propio contexto.
Las "arrow function" son anónimas.
El objeto arguments no se encuentra en el contexto de la función.
Si al definir la función no utilizamos el símbolo de las llaves. La función devolverá como resultado de la función el resultado de la ejecución de la instrucción que hayamos indicado.

Como en las demás ocasiones vamos a verlo con un pequeño ejemplo.

const saluda = (nombre) => {
   return `Hola ${nombre}`;
}

console.log(saluda('Victor'))   // => Hola Victor

// Vamos a compactar un poco más el código.
const saluda2 = (nombre) => `Hola ${nombre}`;

console.log(saluda2('Victor'));  // => Hola Victor

En estos dos ejemplos hemos escrito una "arrow function" a la cuál le enviamos como parámetro un nombre y nos devuelve la cadena de texto "Hola ". Ambas funciones son iguales, pero en el segundo ejemplo podemos observar como las "arrow function" nos han devuelto un cadena de texto sin utilizar la instrucción return.

Generator function.

Hasta el momento todas las funciones que hemos visto se ejecutan completamente, y no se paran hasta la última línea de la función Si queremos salir con antelación de una función debemos ejecutar un return, o lanzar un error. Por lo que las instrucciones que se encuentren a continuación del return o el error no se ejecutarán.

Pero la característica más significativa de estas funciones es que nos permite parar o salir de la función en un punto dentro del conjunto de instrucciones que forman nuestra función y retornar posteriormente la ejecución desde el punto en el que paramos anteriormente.

La sintaxis de estas funciones es igual a las "function declaration" o "function expression". Sólo debemos utilizar el símbolo * al comienzo de la definición de nuestra función.

Otra diferencia de estas funciones es que siempre retorna un objeto con la siguiente estructura cada vez que invoquemos a la función next().

{
    value: any,
    done: true|false
}

Como puedes observar el objeto tiene dos propiedades. Values, qué es el valor actual del objeto y done que nos indica si la función a finalizado o no.

Pero ahora mismo te estarás preguntando cómo debo salir de la función y cómo vuelvo después a ella, y se sigue ejecutando desde el punto en que salí.

Veámoslo con un simple ejemplo donde lo explicaré detalladamente y será más sencillo comprender el funcionamiento de este tipo de funciones.

function *generatorFunction()
{ 
  console.log('Ejemplo generator Function.');
  // yield. Salimos de la función.
  // La propiedad value es igual a 'Un kit kat'
  yield 'Un kit kat';  

  console.log(' ¿ Continuamos ?');  
  // yield. Volvemos a salir de la función.
  // La propiedad value es igual a 'Fin del ejemplo'
  yield 'Fin del ejemplo';

}

const gen = generatorFunction();

console.log(gen.next().value);                    
console.log('La función se encuentra pausada');        
console.log(gen.next().value);
console.log(gen.next().value);

// El resultado de la ejecución sería el siguiente: 

// => Ejemplo generator Function.
// => Un kit kat
// => La función se encuentra pausada
// => ¿ Continuamos ?
// => Fin del ejemplo
// => undefined

Lo primero que hemos realizado en este ejemplo ha sido crear la función generatorFunction. Posteriormente hemos asignado a la constante gen nuestra función. Una vez realizada la tarea de asignación de nuestra función a una variable la invocamos por primera vez.

console.log(gen.next().value);

De esta forma comienza la ejecución de nuestra función. Donde la primera instrucción muestra en la consola el mensaje "Ejemplo generator Function". La siguiente instrucción es:

yield 'Un kit kat';

La instrucción yield nos retorna un objeto, como ya vimos anteriormente. Cuyas propiedades son el texto que enviamos 'Un kit kat' en value, y false en la propiedad done.

Ahora ya estamos fuera de la función, podemos ejecutar las instrucciones que deseemos, mientras nuestra función se encuentra en pausa. En nuestro ejemplo mostramos por consola el mensaje "La función se encuentra pausada".

Una vez ejecutada(s) nuestra(s) instrucción(es) invocamos de nuevo a nuestra función que se encontraba en pausa.

console.log(gen.next().value);

Que nos mostrará por consola el siguiente mensaje "¿ Continuamos ?". Y finalizará nuestra función con el siguiente mensaje por consola "Fin del ejemplo".

Function constructor.

Y finalmente la "Function constructor". Es una forma bastante inusual de declarar las funciones pero vamos a verla también. Tal vez no sea útil en algún momento.

En Javascript las funciones son objetos de "primera clase". Esto quiere decir que se pueden crear nuevas funciones durante la ejecución del programa. Veamos más en detalle cómo crear esta tipo de funciones.

Las funciones en Javascript, son funciones, y poseen el constructor Function. Por ello podremos crear una variable que invoque a un objeto Function. Cuando invoquemos a este objeto podremos enviar todos los argumentos que deseemos. Los primeros n argumentos serán los parámetros de nuestra función y el último argumento será el código de nuestra función.

Veámoslo en detalle con el siguiente ejemplo. Imaginad que necesitamos crear una función que sume dos valores en tiempo de ejecución.

const sumaFunction = new Function('numero_1', 'numero_2', 
   'return numero_1 + numero_2'
);

// Ejecutamos nuestra función.
console.log(sumaFunction(10, 15)) // => 25

En este ejemplo hemos creado la constante sumaFunction que crea una nueva instancia del objeto Function al cual le enviamos tres argumentos. Los dos primeros argumentos, 'numero_1' y 'numero_2' serán los parámetros de nuestra nueva función y el tercer parámetro será el cuerpo de nuestra función.

Esta forma de definir esta función es equivalente a la siguiente:

const sumaFunction = function(numero_1, numero_2) {
    return numero_1 + numero_2
}

// Ejecutamos nuestra función.
console.log(sumaFunction(10, 15)) // => 25

Conclusión.

En este artículo hemos visto 7 formas diferentes de definir funciones en Javascript. No podemos decir que hay una forma mejor que otras. En función de la situación en la que nos encontremos o el problema que queramos resolver será mejor utilizar unas u otra.

Espero que con este artículo conozcas un poco mejor la versatilidad y la potencia de las funciones en Javascript.

Javascript - ES6. Symbols.

Victor de Andres — Sun, 09 Jun 2019 16:37:17 +0000

Javascript - ES6. Symbols.

Una de las novedades de ES6 – ECMAScript2015 fue añadir un nuevo tipo de dato, symbol. Es verdad que desde el lanzamiento de este nuevo standard de javascript allá por Junio de 2015 ha pasado bastante tiempo, pero al igual que otras características de ES6 las cuales utilizamos habitualmente. Por ejemplo las arrow functions, los template strings, o el uso de let y const para definir variables, por poner sólo algunos ejemplos, el uso de symbol es residual por no decir inexistente.

¿Qué es Symbol?

Lo primero que debemos es saber qué es symbol. Symbol es nuevo tipo de dato de JavaScript que se engloba dentro de los tipos primitivos, que son aquellos tipos de datos que son inmutables. Recuerda, en javascript los tipos inmutables son: boolean, null, undefined, number, string y por supuesto symbol, que acabamos de incluir en esta lista de tipos.

Otra característica de este nuevo tipo es además de ser inmutable es que siempre es un tipo único.

Cuando definamos un nuevo valor de tipo symbol podremos asociar un valor de tipo string o undefined que nos servirá únicamente como descripción.

const variable = Symbol(‘test’);

La función Symbol() no es un constructor por ello si utilizamos la siguiente sintaxis para crear una nueva variable de tipo symbol obtendremos un error.

const variable = new Symbol(‘test’);  // output: TypeErrpor

Un ejemplo sencillo.

Si definimos dos variables con el mismo valor y las comparamos obtendremos true como respuesta.

const valor_1 = ‘test’
const valor_2 = ‘test’
console.log(valor_1 === valor_2 );          // output: true

En cambio, realizando esta misma operación definiendo las variables como de tipo symbol obtendremos false.

const valor_1s = Symbol(‘test’)
const valor_2s = Symbol(‘test’)
console.log(valor_1s === valor_2s);     // output: false

Recuerda que anteriormente he indicado que al tipo symbol podemos asociar un tipo string como descripción, en este ejemplo ‘test’ es una descripción para ambas variables.

Sí mostramos por la consola el valor que tenemos almacenado en la variable valor_1s obtendremos los siguiente:

console.log(valor_1s);                  // output: Symbol(test)

Cómo nos puede ayudar symbol.

Ya hemos descrito como es el nuevo tipo de dato symbol, y sus características. A continuación, veamos algunas situaciones donde symbol nos puede ayudar.

Evitar duplicaciones.

Dado que las variables de tipo symbol son únicas e inmutables nos puede ayudar a evitar las duplicaciones al extender funcionalidades de objetos y clases.

Veámoslo con un ejemplo. Supongamos que tenemos el siguiente objeto.

const vehiculo = {
                motor: ‘combustion’,
                cv: 150,
                puertas: 3
}

Si quisiéramos añadir un nuevo motor eléctrico a nuestro vehículo, para hacerlo híbrido.

vehiculo.motor = ‘electrico’;

Cuando fuéramos a leer las propiedades de nuestro vehículo. Pensaríamos que el vehículo es eléctrico no híbrido.

console.log(vehiculo);
// output: { motor: ‘electrico’, 
//           cv: ‘150’,
//           puertas: 3 }

Pero si partimos del objeto inicial y creamos una nueva propiedad de tipo symbol con el identificador motor y se la añadimos a nuestro objeto vehículo.

const motor = Symbol(‘motor’);
vehiculo[motor] = ‘electrico’;

Al ver las propiedades del objeto obtendremos la siguiente respuesta.

Console.log(vehiculo);
// output: { 
//            motor: ‘combustion’,
//            cv: ‘150’,
//            puertas: 3,
//            Symbol(motor): ‘electrico’ }

Simular propiedades/métodos privados.

Otra característica de symbols es que son no-enumerables, por ello los hacen inaccesibles cuando hacemos un loop, for … in, o utilizamos el método Object.getOwnPropertyNames().

Si hacemos un loop para ver las propiedades de nuestro objecto el resultado que obtenemos es el siguiente:

for ( características in vehiculo ) {
    console.log(`${caracteristicas }: ${ vehículo[caracteristicas]} `);
}
// output
// motor: combustion
// cv: 150
// puertas: 3

Podemos observar sólo hemos obtenido las propiedades, motor, cv y puertas. No vemos el valor de la propiedad Symbol(motor).

A la vista del resultado anterior y al ser no-enumerables puedes pensar que en un objeto o clase puedes hacer propiedades o métodos privados. Pero no es así.

Podríamos definir a estas propiedades o métodos como semiprivados ya que, si tenemos acceso a ellos, haciendo un acceso directo a ellas.

console.log(vehiculo[motor]); // output: electrico

O podemos enumerar todas las propiedades de tipo symbol en nuestro objeto si utilizamos el método Object.getOwnPropertySymbols()

console.log(Object.getOwnPropertySymbols(vehiculo)); // [Symbol(motor)]

Es más, si quisiéramos obtener todas las propiedades de nuestro objeto o métodos de nuestra clase, independientemente de que sean o no de tipo symbol sin hacer un join de ambos métodos Object.getOwnPropertyNames() y Object.getOwnPropertySymbols(). Podemos utilizar el método ownKeys del objeto Reflect que nos devolverá un array con todos los valores.

console.log(Reflect.ownKeys(vehiculo)); 
// output: [motor, cv, puertas, Symbol(‘motor’)]

Conclusión.

Tal vez la utilización de este funcionalidad de Javascript no sea aún muy extendida, ya que las ocasiones en la que puedes hacer un uso de este tipo de datos es muy concreto. Sin embargo entiendo que es importante conocer las características y uso de este tipo datos para conocer más en profundidad este lenguaje y aprovechas todas las funcionalidades que nos aporta para hacer un código mejor y más legible.

Tutorial implementación de notificaciones push en Angular

Victor de Andres — Sun, 19 May 2019 10:17:53 +0000

Estamos acostumbrados a recibir notificaciones de nuestro calendario, correo, ect, … tanto en nuestros smartphones, como en nuestros ordenadores. En este post veremos cómo implementar esta tecnología en una página web desarrollada con Angular.

Este post se va a dividir en dos partes. En esta primera parte desarrollaremos una página web con angular que incluirá la posibilidad de recibir notificaciones push, y en la segunda parte desarrollaremos un servidor web que será el encargado de emitir las notificaciones.

Comencemos.

Antes de comenzar con este nuevo proyecto debemos conocer la clave pública con la cual nos conectaremos a nuestro servidor de notificaciones. Cómo obtener esta clave pública lo veremos en el siguiente artículo, dedicado a la parte del servidor. O desde la siguiente página web, puedes generar tus claves. Una vez tengamos nuestra clave podremos comenzar con el desarrollo de nuestro cliente web.

Cliente Web.

Lo primero que haremos, como es habitual en un proyecto angular será crear nuestro nuevo proyecto.

ng new angular-push-notifications --prefix ang-pn

Una vez hemos creado nuestro proyecto el primer paso que vamos a realizar es crear un servicio para encapsular nuestro código.

ng genarate service ./services/webPushNotifications

Inicialización del servicio.

Lo primero que deberemos será definir el constructor de nuestro servicio y inicializar las variables que vamos a utilizar en el servicio.

private _swRegistration;
private _isSubscribed: boolean;
private applicationServerPublicKey: string;

constructor ( private httpClient: HttpClient ) {
    this.applicationServerPublicKey = 'nuestra clave privada';
}

Chequeo web browser.

En este servicio crearemos los siguientes métodos:

private checkServiceWorkerPushEnabled(): boolean { 
    return ('serviceWorker' in navigator && 'PushManager' in window);
}

Este primer método nos devolverá un valor booleano indicando si el navegador web que está utilizando el cliente soporta la funcionalidades Service Workers y Notificaciones Push.

Si el navegador de nuestro cliente soporta ambas funcionalidades el siguiente paso que debemos realizar es registrar nuestro Service Worker.

private enableServiceWorker(): void {
    navigator.serviceWorker.register('/app/serviceWorker/sw.js', {scope: '/app/serviceWorker/'})
        .then( swReg => {
            console.info('Service Worker esta registrado', swReg);
            this.swRegistration = swReg;
            this.initialiseUI();
    })
    .catch(function(error) {
        console.error('Service Worker Error', error);
    });
}

Veamos en detalle esta función.

Lo primero que realizamos es registrar el fichero sw.js, que en este ejemplo he ubicado en la carpeta ‘/app/serviceWorker/’ del proyecto y que será donde se encuentre la lógica de nuestro Service Worker. Este fichero lo escribiremos posteriormente.

Una vez registrado con éxito nuestros fichero procederemos a llamar a a la función initialiseUI en la cual verificaremos si el usuario nos ha habilitado para enviarle notificaciones en cuyo caso estableceremos la comunicación con el servidor, o en caso contrario le pediremos permiso para enviarle notificaciones.

private initialiseUI(): void {
this.swRegistration.pushManager.getSubscription()
    .then( subscription => {
        this.isSubscribed = !(subscription === null); 
        if (this.isSubscribed) { 
            this.sendSubcriptionObject(subscription);
        } else {
            console.log('Usuario NO esta registrado');
            this.subscribeUser();
        } 
    });
}

Como he comentado anteriormente en esta función chequeamos si el usuario ya nos dio permiso para enviarle notificaciones y estableceremos la conexión con el servidor, para ello invocamos a la función sendSubcriptionObject o solicitaremos permiso al usuario, función subscribeUser para poder enviarle notificaciones.

Solicitar permiso al usuario.

Con esta función solicitaremos permiso al usuario para enviarle notificaciones. Si el usuario nos da permiso para enviarle notificaciones el siguiente paso que deberemos dar será establecer la comunicación entre el cliente y el servidor.

private subscribeUser(): void {
    const applicationServerKey = this.urlB64ToUint8Array(this.applicationServerPublicKey);             
    this.swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) {             
        console.log('Usuario suscrito: ', subscription);
        this.isSubscribed = true;
    })
    .catch(function(err) {
        console.log('Fallo al realizar la suscripción: ', err);
    });
}

Antes de comenzar deberemos convertir la clave pública con la cual debemos conectarnos al servidor al formato UInt8Array, que es el formato esperado por llamada de la suscripción.

A continuación llamamos a subscribe que es una promesa que se resolverá correctamente si el usuario nos otorga permiso para recibir notificaciones y el navegador a enviado una solicitud a un servicio push, o en caso contrario mostraremos un mensaje de log por la consola.

Notificación al servidor.

Una vez obtenido el permiso para recibir las notificaciones, o en caso de tener ya permiso para recibirlas enviaremos al servidor la información necesaria para recibir las notificaciones. Para ello llamaremos a nuestra última función sendSubcriptionObject.

private sendSubcriptionObject(subscription): void {
    const apiUrl = `${environment.apiRoot}/subscribe`;
    this.httpClient.post(apiUrl, subscription).subscribe();
}

Esta función enviará a nuestro servidor el objeto subcription que entre otra información lleva almacenado el endpoint de nuestro dispositivo que posteriormente necesitaremos para enviar las notificaciones.

Nota: En esta parte del ejemplo deberemos comentar esta parte del código ya que aún no hemos desarrollado nuestro servidor de notificaciones. O indicar la ruta de nuestro servidor de notificaciones.

Las notificaciones.

Una vez hemos desarrollado la conexión con nuestro servidor, el siguiente paso que vamos a realizar es el tratamiento de las notificaciones. Al principio del artículo al comienzo del desarrollo escribimos el siguiente código.

... 
navigator.serviceWorker.register('app/serviceWorker/sw.js', {scope: '/app/serviceWorker/'}) .then( swReg => { 
...

En este código registramos el fichero sw.js que es el fichero donde se vamos a escribir el listener de las notificaciones enviadas desde el servidor.

'use strict';

self.addEventListener('push', function(event) { 
    const title = 'Comunicacion Ejemplo Push Notificaction';
    const options = { 
        body: event.data.text()
    };        
    event.waitUntil(self.registration.showNotification(title, options));
});

Compilación.

Si ahora construimos nuestra aplicación web y la ejecutamos obtendremos un error similar al siguiente:

A bad HTTP response code (404) was received when fetching the script.

Error Service Worker TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

Esto es debido a que al realizar la construcción de nuestra aplicación todo el código de la misma se une en un único fichero. Por ello al intentar registrar el listener de las notificaciones el sistema no encontrará ese fichero.

Para excluir este fichero de nuestro proceso de construcción simplemente deberemos ir nuestro fichero de configuración del proyecto y añadir la siguiente línea.

...
"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/app/serviceWorker"
],
...

De esta manera al construir nuestro proyecto no se incluirá nuestro listener y nuestro desarrollo funcionará correctamente.

La prueba.

Una vez ya hemos corregido el error de registro y hemos ejecutado nuestra página web sin problema es tiempo de enviar una notificación para comprobar que nuestra aplicación funciona correctamente.

Dado que aún no hemos creado nuestro propio servidor de notificaciones vamos a hacer la prueba desde la consola de depuración de nuestro navegador. Yo normalmente trabajo con Chrome, así que los pasos que voy a indicar son los necesarios para para este navegador.

Lo primero es acceder a la opción Application de la barra de opciones y seleccionar la opción “Service Workers” de las opciones del menú de Application. Esto nos mostrará una pantalla similar a la siguiente:

Si pulsamos el botón push enviaremos el mensaje a nuestra aplicación web, la cual hemos habilitado para recibir notificaciones push. Si todo funciona correctamente veremos una notificación con el mensaje que hayamos enviado.

Punto y aparte.

Hasta aquí la primera parte de este artículo donde hemos visto cómo desarrollar nuestro cliente con notificaciones push con Angular. Dispones de todo el código de este proyecto en el siguiente repositorio https://github.com/VictorDeAndres/Angular_PushNotifications.

En la siguiente parte de este artículo veremos cómo crear nuestro propio servidor de notificaciones con NodeJs y Express.

Javascript - ES6. Diferencia entre Array y Set

Victor de Andres — Sun, 12 May 2019 09:23:49 +0000

Como desarrollador seguro que en tu día a día utilizas los Arrays. Desde la llegada de la especificación ECMAScript 6 disponemos de un nuevo tipo de estructura, Set. En este post veremos en las diferencias entre ambos tipos de estructuras los Arrays y los set. Además veremos los principales métodos para utilizar esta nueva estructura.

Array vs Set.

La gran diferencia entre un array y un set es la siguientes: Los duplicados. En un array podemos almacenar valores duplicados, salvo que tú indiques lo contrario, mientras que en Set no está permitido.

Esta gran diferencia viene dada por la naturaleza del array y del set. Un Array es una colección de índices y un Set es una colección de claves.

Un momento que quiero decir con esto, que diferencia existe entre una colección de índices y una colección de claves. Profundicemos en las definiciones de ambos términos. Una colección de índices es una colección de datos que se encuentran ordenados por un índice. Y una colección de claves, es una colección de datos que usa claves, y esas claves contienen elementos con los que podemos iterar en el orden en el que fueron insertados.

¿Cuáles son los principales métodos de Set?

Inicialización.

Para inicializar un objeto de tipo set siempre deberemos utilizar un objeto iterable como parámetro en el constructor. Veamos unos ejemplos.

const mySet = new Set();
// Se inicializará un set vacío.

const mySet = new Set([1, 2, 2, 3]);
// Se inicializará un set nuevo set con los valores 1,2,3.
// Recuerda que un set no permite valores duplicados.

const mySet = new Set(1);
// Error. Siempre debemos utilizar un objeto iterable en el constructor.

Añadir elementos.

Cuando queramos añadir nuevos elementos a nuestro Set deberemos utilizar el método Add. A diferencia de los Arrays donde podemos indicar si queremos realizar la inserción al principio del array, unshift, o al final del mismo, push. En un Set siempre se almacenarán los nuevos valores al final del mismo.

Y sólo en caso de que el valor a insertar no se encuentre ya en el Set, si el valor que queremos añadir ya existe en nuestro Set, se ignorará la inserción del nuevo valor, e importante no lanzando ningún error.

const mySet = new Set([1, 2, 3]);
mySet.add(4);
// Añade 4 a nuestro set

console.info(mySet.values());
// 1, 2, 3, 4

mySet.add(3);
// No añade 3 a nuestro set ya que existe anteriormente.
// Ignora la inserción y tampoco obtenemos ningún error.

console.info(mySet.values());
// 1, 2, 3, 4. Seguimos teniendo el mismo set.

Borrar elementos.

Al igual que en la inserción en el momento de borrar elementos en nuestro Set tenemos algunas diferencias respecto a los Array.

Un array nos permite eliminar el último valor del array, pop, borrar el primer valor, shift, o borrar un valor o rango de ellos con el método splice.

Pero en un Set sólo podremos borrar el set completamente, clear, o borrar un único elemento con delete, indicando cómo parámetro el índice que queremos eliminar.

const mySet = new Set([1,2,3]);
mySet.delete(2);
// Borra el elemento 2

console.log(mySet.values());
// 1,3

Tamaño Set.

Si queremos saber el tamaño de nuestro Set utilizaremos el método size. Similar al método length de un array.

const mySet = new Set([1, 2, 3]);
console.log(mySet.size);
//3

Acceso elementos.

A diferencia de los arrays en un objeto Set no podemos acceder directamente a un elemento. Recuerda que un set son una colección de claves. Por ello en un objeto Set sólo podemos iterar a través de todos sus elementos por medio de un loop. Para realizar estos loop podemos utilizar la construcción for … of o forEach.

const mySet = new Set([1, 2, 3]);
for ( let myValue of mySet ) {
    console.log(myValue); 
}
// 1, 2, 3

ojavascript const mySet = new Set([1, 2, 3]); mySet.forEach( myValue => console.log(myValue) ); // 1, 2, 3`
Aunque veas qué dispones de la construcción forEach, que es igual a la que puedes utilizar en un array desde un Set no tenemos acceso a los métodos filter, map o reduce. Métodos a los que sí podemos acceder desde un Array.

Buscar elemento.

Cuando queremos buscar un elemento concreto dentro de nuestro Set utilizaremos el método has, que nos devolverá un true o un false, en función de si existe el valor buscado o no. A diferencia del método Find de un array, que nos devolverá el primer valor dentro del array que coincida con el elemento buscado o -1 en caso de no encontrarse el valor buscado en el Array.

`javascript
const mySet = new Set([1, 2, 3]);

console.log(mySet.has(1));
// true

console.log(myset.has(4));
// false
`

Conclusión.

Cómo has podido leer los objetos de tipo Set y Arrays son bastante similares, pero en ningún caso excluyentes el uno del otro. Siempre dependerá del uso que quieras hacer será mejor el uso de un tipo u otro.

Por ejemplo, si quieres disponer de un objeto, que puedas hacer lecturas, borrados, o modificaciones muy concretas deberás utilizar un array. En caso de que sólo desees hacer principalmente lecturas usa un Set.