sábado, 28 de noviembre de 2020

Javascript: Ejemplo de asincronía, callbacks y promises

 Un ejemplo de código asíncrono es:

function addToArray (data, array) {
     setTimeout(function() {  
         array.push(data);         
     }, Math.random() * 100);     
}

let array = [1, 2, 3]
addToArray(4, array);
addToArray(5, array);
addToArray(6, array);
setTimeout(() => console.log(array), 10000);

este código añade al array inicial tres números, el 4, el 5 y el 6. Estos números se añaden en un orden desconocido, el motivo es que la función addToArray hace uso de la función de javascript setTimeout. Esta función ejecuta el array.push después de un tiempo. En el caso del ejemplo el tiempo es elegido al azar por Math.random(). El resultado es que los elementos 4, 5 y 6 no se conoce de antemano en que orden apareceran. A cada ejecución el orden variará: [1, 2, 3, 5, 4, 6] o [1, 2, 3, 6, 4, 5] o cualquier otra combinación.

Utilizando callbacks esto se puede consguir que los elementos se añadan en orden creciente siendo el resultado siempre [1, 2, 3, 4, 5, 6]. Esto se consigue con:

function addToArray (data, array, funcAddNextNumbers) {
    setTimeout(function() {  
        funcAddNextNumbers(array.push(data));
    }, Math.random() * 100);  
}

let array = [1, 2, 3]

addToArray(4, array, function() {
    console.log ('Añade 4: ', array)
    addToArray(5, array, function(){
        console.log ('Añade 5: ', array)
        addToArray(6, array, function(){
            console.log ('Añade 6: ', array)
       });
   });
});

en este caso aunque addToArray sigue añadiendo los elementos en un tiempo indeterminado, se consigue que 4, 5 y 6 se añadan en el mismo orden siempre. Aquí la llamada a añadir el siguiente número es un callback del número anterior. Esto debido al funcionamiento interno de javascript que gestiona el orden en que se ejecutan las funciones con el stack queue y el callback queue hace que hasta que no se acaba de añadir el 4, no se añada el 5 y hasta que se acaba de añadir el 5 no se añada el 6. La importancia de esta técnica es conseguir sicronía cuando se necesita. Por ejemplo no mostrar una lista desplegable, mientras no tenemos disponibles los datos.

La técnica de callback, pronto se observó que conduce a un código no "limpio" (callback hell). Para evitar esto se ha incluido en javascript un objeto llamado Promise. Este objeto gestiona la asincronía. El ejemplo con Promise queda:

function addToArray (data, array) {
    const promise = new Promise(function (resolve, reject) {
        setTimeout(function() {  
               array.push(data);         
               resolve(array);
        }, Math.random() * 10 + 1000);  
       
    })
    return promise
}

let array = [1, 2, 3]
addToArray(4, array)
    .then((array) => addToArray(5, array))
    .then((array) => addToArray(6, array))
    .then((array) => console.log(array));

El método then del objeto promise hace que no se ejecute una función hasta que no haya terminado la anterior. Importante hacer notar que la función a controlar devuelve un objeto Promise.

Espero que este sencillo ejemplo le pueda ayudar a algún abnegado desarrollador para entender como funcionan las técnicas para manejar la asincronía intrinseca de javascript. 

Queda pendiente async-await para otro post.





jueves, 15 de octubre de 2020

Javascript: Ejemplo de Closure

Ejemplo

function inicial() {
    // var1 definida e inicializada para el scope de inicial()
    let var1 = 1;        

    function interna() {
        // var2 definida e inicializada para el scope de interna()
        let var2 = 2;    
        console.log( var1, var2 );
    }

    // inicial() retorna función. !OJO¡ totalmente distinto a
    // 'return interna()' que devolvería el retorno de interna()
    return interna;      
}

// a externa le asignamos el retorno de inicial(), que es
// la referencia a la función interna
let externa = inicial();             

// Resulta en consola 1 2 -- Accede al contenido de variables que
// están fuera de su scope.
// Estamos ante una !!!CLOSURE!!!, bueno dos: var1 y var2
externa();

Definición

Se produce una Closure cuando una función es capaz de recordar y acceder a su lexical scope mientras se ejecuta fuera de él.

Explicación

En este ejemplo a la variable externa se le asigna la función inicial(). Esta función declara dentro de su scope las variables var1 y var2.
 
Cuando en la última línea de código se ejecuta externa(), realmente la función que se está ejecutando es interna() que es el retorno de ejecutar inicial() en la sentencia let externa = inicial();. Esta  función interna() al ejecutarse hace uso de variables que están definidas e inicializadas en el scope de inicial() , pero se está ejecutando desde fuera del scope de inicial(). Esto es la closure.

Conclusión

Gracias a las closures, hay variables que pueden se usadas fuera de su scope. Eso sí, protegidas y manejadas por las funciones dentro de las que están declaradas. 

Bibliografía

'You Don't Know JS: Scope & Closures' de Kyle Simpson publicado por 'Reilly Media, Inc en Marzo 2014

domingo, 11 de octubre de 2020

Javascript: Ejemplo de expresiones regulares.

Esto es una ayuda para quien tenga que construir una expresión regular y no sepa como hacerlo.
Los ejemplos están desarrollados con el método test de regexp. El método "test" devuelve true cuando hay
coincidencia del patrón dentro de la cadena analizada y false cuando no.
Los ejemplos tienen la estructura:

    let patr = /patron/;  
    console.log (Descripción prueba, patr.test(cadena a analizar));

Ejemplos 

// Expresión regular sencilla>
let patr = /abc/; // contiene la subcadena 'abc'
console.log ("Creación expresión: true", patr.test("abcdefghi"));
console.log ("Creación expresión: false", patr.test("acdefghi"));

// Caracteres: Letras, numeros, espacios, etc
patr = /[abc]/; // contiene a y/o b y/o c
console.log ("Caracteres 1: true", patr.test("acdefghi"));
patr = /[a-c]/;
console.log ("Caracteres 2: true", patr.test("acdefghi"));
patr = /[abc]/;
console.log ("Caracteres 3: false", patr.test("defghi"));
patr = /[a-zA-Z0-9]/; //contiene alguna minúscula, mayúscula y/o
// un número de 0 a 9
console.log ("Caracteres 4: true", patr.test("defghi Amarillo"));
console.log ("Caracteres 5: true", patr.test("defghi98-Amarillo"));
console.log ("Caracteres 6: false", patr.test("!$%&/()="));
patr = /[^0-9]/; //negación, no contiene solo números del 0 al 9
console.log ("Caracteres 7: true", patr.test("98 y otras cosas"));
console.log ("Caracteres 8: false", patr.test("98"));

// Meta-caracteres (Ver tablas de meta-caracteres en readme)
patr = /\s/; // contiene caracter no visible en print:
// (tabulador, espacio, salto linea, enter, form feed)
console.log ("Meta-caracteres 1: true", patr.test("una   línea"));
patr = /\d/; // contiene dígitos del 0 al 9. Idéntico [0-9]
console.log ("Meta-caracteres 2: true", patr.test("Un numero 88"));
console.log ("Meta-caracteres 3: false", patr.test("No hay número"));

// Caracteres de comienzo y fin
patr = /^auto$/; // contiene exactamente auto
console.log("Comienzo y fin 1: true", patr.test("auto"));
console.log("Comienzo y fin 2: false", patr.test("automático"));
console.log("Comienzo y fin 3: false", patr.test("Qué bonito auto"));

patr = /auto$/; // acaba en auto
console.log("Comienzo y fin 4: true", patr.test("Qué bonito auto"));
console.log("Comienzo y fin 5: false", patr.test("Bonito auto rojo"));

// Boundaries. Definen límites de palabra.
patr = /\bco/; // La palabra empieza por "co"
console.log('Ejemplo de boundary 1 true ', patr.test("coche"));
console.log('Ejemplo de boundary 2 true ', patr.test("iré en coche"));
console.log('Ejemplo de boundary 3 false ', patr.test("acometida"));

// Caracter "." indica cualquier caracter
patr = /.......uto/;  // 7 caracteres cualesquiera y la cadena uto
console.log('Cualquier caracter 1 false', patr.test("auto"));
console.log('Cualquier caracter 2 false', patr.test("automatic"));
console.log('Cualquier caracter 3 true', patr.test("distributor"));

// Operadores de repetición: +, * y ?
patr = /[a-f]+/; // contiene una a o varias, o una b, .. o una f
console.log('Operador + 1: true', patr.test("Hace 10 días que no le veo"));
console.log('Operador + 2: true', patr.test("castaña"));
console.log('Operador + 3: false', patr.test("Auto"));
console.log('Operador + 4: false', patr.test("42"));

patr = /[a-f]*/; // contiene ninguna a o varias, o ninguna b, .. o una f
console.log('Operador * 1: true', patr.test("Hace 10 días le vi"));
console.log('Operador * 2: true', patr.test("castaña"));
console.log('Operador * 3: true', patr.test("Auto"));
console.log('Operador * 4: true', patr.test("42"));

patr =/^a.*/; //comienza por a minúscula
console.log('Operador * 5: false', patr.test("amarillo"));
console.log('Operador * 5: false', patr.test("rojo"));

patr = /.a?../; // En la segunda posición hay una a o ninguna
console.log('Operador ? 1: true', patr.test("casa"));
console.log('Operador ? 2: true', patr.test("sal"));
console.log('Operador ? 3: true', patr.test("box"));
console.log('Operador ? 4: false', patr.test("42"));

patr = /.al{2}../; // hay a en la segunda y l se repite 2 veces en la // tercera y cuarta posición
console.log('Operador {num} 1: true', patr.test("sallgo"));
console.log('Operador {num} 2: false', patr.test("palo"));

patr = /.a{1,5}../; // desde la segunda posición a se repite de 1 a 5 // veces
console.log('Operador {min,max} 1: false', patr.test("polo"));
console.log('Operador {min,max} 2: true', patr.test("vaale"));
console.log('Operador {min,max} 2: true', patr.test("vaaaaale"));

// Grupos
patr = /(ab)+/; // se repite la cadena 'ab' una vez o varias. Entre // paréntesis se especifican grupos
console.log('Ejemplo de grupo 1: true ',patr.test("abc"));
console.log('Ejemplo de grupo 2: true ',patr.test("abcabc"));
console.log('Ejemplo de grupo 3: false',patr.test("aacbb"));

//Referencias
patr = /(ab)+...\1/;
// se repite la cadena 'ab' una vez o varias después tres caracteres // cualesquiera y finalmente 'ab' una o varias veces.
// \1 es una referencia al grupo 1, en este caso (ab).
console.log('Ejemplo de referencia 1: true ',patr.test("abcccab"));
console.log('Ejemplo de referencia 2: false ',patr.test("abccc"));
console.log('Ejemplo de referencia 3: true',patr.test("abacbab")); 
 

 

 

 

domingo, 4 de octubre de 2020

Javascript: Ejemplo de función usada como parámetro (callback).

Las funciones son ciudadanos de primera clase en Javascript. Cuando se dice primera clase, es porque las funciones se tratan como cualquier otro tipo, ya sea primitivo o resultado de instanciar una clase creada por el desarrollador. Es decir, una función se puede utilizar igual que los otros tipos,  almacenándola en una array, utilizándola como parámetro de otra función, almacenándola  en una variable, etc.

Se muestra a continuación un ejemplo que hace uso de una función como parámetro de otra. Este ejemplo se muestra la misma funcionalidad codificada con 3 sintaxis distintas: funciones clásicas, funciones asignadas a una variable y funciones arrow asignadas a una variable.

1. Funciones clásicas

    function hi (name, lastName) {return `Hi ${name} ${lastName}`;}
    function bye (name, lastName) {return `Bye ${name} ${lastName}`;}
    function greeting (f) {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

2.  Funciones asignadas a una variable

    const hi = function (name, lastName) {
        return `Hi ${name} ${lastName}`;
        }
    const bye =  function (name, lastName) {
        return `Bye ${name} ${lastName}`;
        }
    const greeting = function (f) {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

3. Funciones arrow asignadas a una variable

    const hi = (name, lastName) => `Hi ${name} ${lastName}`;
    const bye = (name, lastName) => `Bye ${name} ${lastName}`;
    const greeting = (f) => {
        const name ="pepe";
        const lastName = "suarez";
        return f(name, lastName);
    }
    console.log (greeting(hi));
    console.log (greeting(bye));

 
 
Estos tres códigos son equivalentes, es decir si los ejecutamos obtenemos el mismo resultado:

    Hi pepe suarez
    Bye pepe suarez

Las funciones conocidas como callback, son funciones que se pasan como parámetros de otras funciones y que se ejecutan dentro de éstas. Es decir el ejemplo tiene  dos funciones hi y bye que son llamadas como callbacks desde la función greeting.

Esta posibilidad de llamar a funciones desde otras funciones que las han recibido como parámetros, acerca a javascript hacia la programación funcional. La programación funcional permite desarrollar código más estable, porque está menos acoplado y es más legible frente a la programación imperativa.

Si se supone que no se puede utilizar una función como parámetro. Una posible codificación para conseguir una funcionalidad idéntica a la mostrada podría ser:

    function hi (name, lastName) {return `Hi ${name} ${lastName}`;}
    function bye (name, lastName) {return `Bye ${name} ${lastName}`;}
    function greeting (greetingType) {
        const name ="pepe";
        const lastName = "suarez";
        if (greetingType=="hiType"){
          return hi(name, lastName);
        } else {
          return bye(name, lastName);
        }
    }
   console.log (greeting("hiType"));
   console.log (greeting("byeType"));

Este código tiene sabor a lo que se conoce como programación tipo imperativa.

Si fuese necesario incluir un nuevo tipo de saludo por ejemplo “Buenas tardes” los cambios a realizar serían en cada caso serían:

- En el caso “tipo funcional” tendríamos que añadir la función goodEvening(name, lastName) y una  llamada a la función greetings, es decir greetings(goodEvening). Ningún cambio más es necesrio.

- En el caso “tipo imperativo” tendríamos que añadir la función goodEvening(name, lastName), un  nuevo tipo de saludo greeting(“goodEveningType”) y modificar la función greeting para que el if considerase que pueden existir un nuevo tipo de saludo.

Conclusión.

La posibilidad de utilizar funciones como parámetros permite generar un código más orientado a la extensión que a la modificación. Esto es debido a que en el caso “tipo funcional” extendemos el comportamiento del sistema sin la necesidad de cambiar nada en la función greeting. La modificación es más costosa en el caso “tipo imperativo” incluye tener que modificar la propia función greeting.


 

miércoles, 19 de agosto de 2020

Ejemplo de prueba de React con Jest

Para realizar pruebas automatizadas de las aplicaciones escritas con javascript es posible utilizar Jest. Jest tiene entre otras , una librería específica para probar componentes de React.

Aquí se describe una app realizada con React. Esta App tiene un único componente que dispone de una prueba automatizada realizada con Jest.

El código se puede descargar en https://github.com/MarisaAfuera/app-react-with-test 

Pasos seguidos para la realizar el ejemplo

1. Crear la app React con el comando ´npx create-react-app app-react-with-test`

2. Modificar el fichero app.js para que haga uso del componente CheckboxWithLabel.js. El fichero app.js queda con el siguiente contenido:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import CheckboxWithLabel from './components/CheckboxWithLabel.js';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Componente de tipo checkbox. Pulse el recuadro para cambiar el
        texto de On a Off y viceversa</p>
        <CheckboxWithLabel labelOn=" On" labelOff=" Off" />   
        <p>Podemos probar con Jest el correcto funcionamiento del componente
        ejecutando el comando <b>`yarn test`</b></p>      
      </header>
    </div>    
  );
}

export default App;

3. Copiar el componente CheckboxWithLabel.js y su fichero de prueba CheckboxWithLabel.Test.js que están en https://jestjs.io/docs/en/tutorial-react. El fichero de prueba se almacena en el directorio /tests, para aislar las pruebas de los fuentes de la aplicación. 

4. Se crea el fichero jest.config.js para indicar a Jest donde están los ficheros de prueba. Para que Jest utilice este fichero de configuración se modifica package.json, indicando donde está el fichero de configuración cuando se ejecute el script test.

4. Añadir la librería react-test-renderer para renderizar instantaneas de React con el comando: ´yarn add --dev react-test-renderer´

5.  Para eliminar el error `Jest encountered an unexpected token`

    5.1 Instalar `npm install --save-dev @babel/preset-react`

    5.2 Crear el fichero .babelrc con el contenido

{
    "env": {
        "development": {
            "plugins": ["transform-es2015-modules-commonjs"]
        },
        "test": {
            "plugins": ["transform-es2015-modules-commonjs",
            "@babel/plugin-proposal-class-properties"],
            "presets": [
                "@babel/preset-react"
            ]
        }
    }
}

    5.3 Instalar el módulo ´transform-es2015-modules-comonjs´ con el comando ´npm install --save-dev babel-plugin-transform-es2015-modules-commonjs´     

Terminando

Esto es todo.  Las versiones de las librerías utilizadas se pueden consultar en el archivo package.json de https://github.com/MarisaAfuera/app-react-with-test 

 Espero que esto sirva de ayuda a algún abnegado programador.

 

   




martes, 4 de agosto de 2020

Ejemplo XmlHttpRequest

El ejemplo muestra como una página html hace mediante javascript una petición XMLHttpRequest para comprobar si existe o no un usuario en el servidor. El usuario se consulta en un API mediante punto de entrada. Por ejemplo: http://localhost:3000/users?name=Pedro para comprobar si en el servidor existe el usuario Pedro. En el caso de que exista se muestra un mensaje "Valid User Id" y en caso de que no exista se muestra "Invalid User Id".

La petición al API se envía mediante XmlHttpRequest de forma asincrona y cuando se recibe la respuesta se refresca solo el mensaje en la página, no la página completa.


pagina.html

onClick del botón Validar utiliza la función "validateUserId()" que hace una llamada asincrona al servidor. Tiene además un "return false" para que al hacer click no se refresque la página html completa, solo se refresca el mensaje con la función "setMessageUsingDOM(message)".

ejemploXHR.js

Este fichero contiene las funciones que crean y hacen uso de un objeto XmlHttpRequest para solicitar datos del servidor. Para ello:


1. Define una variable global.


2. Funciones validateUserID() y ajaxFunction(). Crean el objeto de tipo XmlHttpRequest, lo configuran y hacen la petición al servidor.

3. Función processRequest(). Esta función se ejecuta cada vez que el objeto XMLHttpRequest cambia de estado. Cuando alcanza el estado 4, la petición ha sido respondida desde el servidor.

4. Función setMessageUsingDOM(message). Muestra un mensaje en la pantalla dependiendo del valor de "message". True el usuario existe, false no existe.


db.json

Este componente contiene los usuarios que existen en el servidor. El servidor se ha suplantado(mockeado) con json-server. Para instalarlo ejecutar el comando "npm install -g json-server". Para arrancar el servidor ejecutar el comando "json-server --watch db.json". Si todo ha ido bien ya se puede abrir en el navegador "http://localhost:3000/users" y se verán los usuarios existentes.


Todo listo

Llegados aquí se puede abrir pagina.html en el navegador y probar la página html. Si quieres obtener el código completo https://github.com/MarisaAfuera/XmlHttpRequest.