La finalidad de los operadores async y await es simplificar aun más la forma en que trabajamos con las promesas, de tal forma que permite ejecutarlas y esperar el resultado de forma síncrona, si la necesidad de los famosos bloques then y catch.

El contenido de este artículo también lo explico por Youtube, recuerda suscribirte por que estaremos subiendo más contenido como este:

Los que ya tiene tiempo utilizando Javascript, recordaran lo complicado que era trabajar con las Callback y el famoso problema llamado callback hell, por suerte, luego apetecieron las promesas, una nueva forma de resolver el problema de asincronicidad de Javascript, permitiendo definir una serie de bloques then y catch que al final eran son muy parecidas a las callback, con la diferencia de que permitía tener una mejor organización del código, sin embargo, y pesar de estas mejoras significativas, Javascript seguía teniendo el mismo problema, y era la asincronicidad.

Dicho lo anterior, los operadores async/await se agregan a Javascript a partir de la versión ECMAScript 7 para simplificar la forma de trabajar con las promesas, con las cuales es posible ejecutarlas de forma síncrona y bloqueando la ejecución hasta que sean resueltas.

Para comprender mejor como funcionan los operadores async/await vamos a realizar un ejemplo, en el cual consumiremos un recurso de Internet mediante el API Fetch. En este primer ejemplo veremos como se hace sin async/await:

const fetch = require( 'node-fetch')

function getCountry(){
    return fetch('https://pkgstore.datahub.io/core/country-codes/country-codes_json/data/471a2e653140ecdd7243cdcacfd66608/country-codes_json.json')
        
}

let hello = getCountry()
hello.then(response => response.json())
    .then(response => response.map(country => country['CLDR display name']))
    .then(response => console.log(response))

Cómo podemos observar, hemos creado la función getCountry encargada de retornar una promesa con la búsqueda de un recurso de Internet, este método es ejecutado y seguido es necesario resolver la promesa con una serie de bloques then. Podemos observar que estos es un poco verboso, pues en cada bloque hay que definir la variable response, definir una callback (o arrow function) y retornar los resultados para ser procesados por el siguiente bloque then. Otro de los problemas es que el resultado solo estará disponible dentro del bloque then, complicando la forma en que trabajamos y manejamos los errores.

Ahora bien, antes de explicar como funciona async/await quiere que veas un ejemplo, lo análisis y después pasaremos a explicar todo a detalle:

const fetch = require( 'node-fetch')

async function getCountry(){
    let response = await fetch('https://pkgstore.datahub.io/core/country-codes/country-codes_json/data/471a2e653140ecdd7243cdcacfd66608/country-codes_json.json')
    let json = await response.json()
    return json.map(country => country['CLDR display name'])
}

(async function(){
    let hello = await getCountryAsync()
    console.log("log => ", hello)
})()

Para empezar, vemos un código mucho más limpio, además, la función getCountry ejecuta todas las instrucciones de forma asíncrona. Pero que está pasado.

Lo primero que debemos de saber es que el operador await esperará hasta que la promesa sea resuelta, lo que provocará que el hilo de ejecución hasta que la promesa se resuelva, y una vez resuelta, el hilo de ejecución continuará donde se quedo.

Otra cosa importante, es que await solo se puede utilizar en funciones que tengan el operador async, en caso contrario, se lanzará el siguiente error:

SyntaxError: await is only valid in async function

Los método con el operadores async son llamados async methods, y no solo permiten utilizar el operador async, si no que provocara que todo lo que retornemos sea encapsulado dentro de una promesa:

async function helloWorld(){
    return "hello world"
}
let hello = helloWorld()
console.log(hello) 

// Output
// Promise { 'hello world' }

En este ejemplo tenemos una función que solo regresa un string, sin embargo, vemos que en el output, el string "hello world" está encapsulado dentro de una promesa.

Regresando al ejemplo, si ejecutamos la función getCountry, este nos regresará un promesa, por lo que si imprimiéramos el resultado de la función podemos observar que nos regresa una promesa

console.log(getCountry())

// Output
// Promise { <pending> }

En este punto te podrías estar preguntando, ¿que sentido tiene utilizar await, si al final me regresará una promesa?, puede que tengas razón sin embargo, recordemos que con await podemos esperar hasta que se resuelva una promesa, entonces podemos hacer lo siguiente:

(async function(){
    let hello = await getCountry()
    console.log("log => ", hello)
})

// Output
// 'Guinea-Bissau',
//  'Guyana',
//  'Haiti',
//  ... 150 more items ]

En este ejemplo, vemos que hemos ejecutado la función getCountry dentro de una async method por lo que podríamos utilizar await para resolver la respuesta de getCountry.

Excepciones

Otra de las grandes ventajas que ofrece el operadores async/await es que nos permite controlar las excepciones mediante el clásico bloque try-catch, sin necesidad de utilizar bloque .catch() de las promesas:

async function getCountry(){
    try {
        let response = await fetch('https://pkgstore.datahub.io/core/country-codes/country-codes_json/data/471a2e653140ecdd7243cdcacfd66608/country-codes_json.json')
        let json = await response.json()
        return json.map(country => country['CLDR display name'])
    } catch (err) {
        console.log("Error ==> ", err)
    }
}

Conclusiones

Cómo hemos podido comprobar, los operadores async/await proporcionan una forma mucho más imple para trabajar con promesas, permitiendo trabajar de forma síncrona.

The post Javascript – Async/Await appeared first on Oscar Blancarte - Software Architecture.

La función filter permite filtrar los elementos de un array y generar uno nuevo con todos los elementos que cumplen una determinada condición.

Sin lugar a duda, filter es una de las funciones más importantes a la hora de trabajar con arreglos, pues permite filtrar fácil y rápido los elementos de un array sin afectar el array original, respetando la inmutabilidad del array original.

Quizás te interese ver como funciona la función map

La función filter está definida en Array.prototype, lo que hace que todos los arrays cuente con esta función por default. Como parte de su definición, filter acepta como parámetro una función (callback) la cual se ejecutará por cada elemento del array y deberá de retornar true para indicar que el elemento actual debe de ser incluido en el nuevo array o false en caso contrario. Veamos un ejemplo:

let numArray = [1,2,3,4,5,6,7,8,9,10] 
let filterNumArray = numArray.filter(element => element > 5)

console.log("numArray => ", numArray)
console.log("filterNumArray => ", filterNumArray)

//Output
//numArray =>  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
//filterNumArray =>  [ 6, 7, 8, 9, 10 ]

En este ejemplo hemos creado el array numArray, el cual cuenta 10 número, seguido, utilizamos la función filter para filtrar todos los números mayores a 5, dando como resultado el array filterNumArray, el cual es nuevo arreglo.

Finalmente podemos comprobar el resultado de la ejecución, donde el array original numArray permanece intacto, es decir, no fue mutado, por otro lado, se creo el nuevo array filterNumArray que contiene solo los número mayores a 5.

Hace un momento dijimos que filter recibe una función como parámetro, pero a partir de la versión ECMAScript 6, es posible enviarle una Arrow funtion, la cual tiene el mismo resultado que enviarle una función, veamos las diferencias:

//ECMAScript 5
var filterNumArray = numArray.filter(function(element) { return element > 5})
//ECMAScript 6
let filterNumArray = numArray.filter(element => element > 5)

El resultado será el mismo, la única diferencia es que las expresiones Arrow Functions son más limpias y memos verbosas

Parámetros disponibles

La función que enviamos a filter no solo recibe el elemento actual del array, si no que tiene otros parámetros que podemos definir de forma opcional cuando sea necesario:

• element: elemento actual que está siendo procesado
• index: corresponde a la posición (index) del element dentro del array.
• array: corresponde al array original que estamos filtrando.

newProductsArray = productsArray.filter((product, index) => index > 2)
console.log("newProductsArray => ", newProductsArray)
//newProductsArray =>  [ 
//  { id: 4, name: 'watermelon', price: 400 },
//  { id: 5, name: 'grape', price: 500 } 
//]

En este nuevo ejemplo hemos filtrado todos los elementos que su index sea mayor a 2.

Cabe mencionar que si bien, filter no muta el array original, hay que tener cuidado con el parámetro array, pues este corresponde al array original, por lo que cualquier cambio que realicemos sobre el, tendrá un impacto sobre el array original, provocando su mutación, lo cual es considerado un anti-pattern y siempre debe de ser evitado.

Conclusiones

Cabe mencionar que si bien, la función filter no muta el array original, si que es posible mutarlo mediante el parámetro array, el cual contiene el array original y que desde la función

The post Javascript – la función filter appeared first on Oscar Blancarte - Software Architecture.

Mediante la función map es posible crear un nuevo arreglo a partir de uno existente, tan simple como eso ¿o no?.

Puedes ver este mismo artículo en mi canal de Youtube, y no olvides suscribirte subo videos con regularidad:

Sin lugar a duda, la función map es una de las más importantes al momento de trabajar con arreglos, pues permite iterar y controlar la forma en que procesaremos cada unos de los elementos del arreglo en un solo paso. Veamos el siguiente ejemplo:

let numArray = [1,2,3,4,5,6,7,8,9,10]
let numArray2 = numArray.map(current => current*2)

console.log("numArray => ",  numArray)
console.log("numArray2 => ", numArray2)

// Output
// numArray =>  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
// numArray2 =>  [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]

Cómo podemos comprobar en el fragmento de código anterior, la función map siempre regresará un nuevo arreglo, dejando intacto el arreglo origen, esto es importante por que mantiene la inmutabilidad del array origen, permitiendo crear tantas variantes del arreglo original sin afectar el original.

La función map recibe cómo parámetro una función (callback) la cual se ejecutará para cada elemento del array, sin embargo, en ECMAScript 6 es posible utiliza Arrow Functions en lugar de una callback. Veamos las diferencias:

//ECMAScript 6
let numArray2 = numArray.map(current => current*2)

//ECMAScript 5
var numArray2 = numArray.map(function(current)  {
    return current*2}
)

Con la función map es posible no solo procesar arrays de tipos primitivos, si no que podemos procesar objetos completos. Veamos este otro ejemplo:

let orders = [
    {
        orderNum: 1,
        total: 100,
        customer: {
            name: "Oscar Blancarte"
        }
    },{
        orderNum: 2,
        total: 200,
        customer: {
            name: "Carlos Raygoza"
        }
    },{
        orderNum: 3,
        total: 300,
        customer: {
            name: "Andres Bedoya"
        }
    }
]

let simpleOrders = orders.map(order => {return {orderNum: order.orderNum, total: order.total, customerName: order.customer.name}})

console.log("orders => ",       orders)
console.log("simpleOrders => ", simpleOrders)

// orders =>  [ { orderNum: 1,
//     total: 100,
//     customer: { name: 'Oscar Blancarte' } },
//   { orderNum: 2, total: 200, customer: { name: 'Carlos Raygoza' } },
//   { orderNum: 3, total: 300, customer: { name: 'Andres Bedoya' } } ]

// simpleOrders =>  [ { orderNum: 1, total: 100, customerName: 'Oscar // Blancarte' },
//   { orderNum: 2, total: 200, customerName: 'Carlos Raygoza' },
//   { orderNum: 3, total: 300, customerName: 'Andres Bedoya' } ]

En este nuevo ejemplo hemos convertido un arreglo de ordenes a un nuevo arreglo más simple. Por si no lo notaste, hemos simplificado el array origen, al pasar el nombre del cliente directamente sobre el objeto de la orden.

Ahora bien, podemos utilizar la función map de forma anidada, para simplificar los arrays todavía más. Imagina que las ordenes anteriores puedan tener dentro un array de productos, y necesitemos sacar solo los productos y el cliente al que pertenece:

let orders = [
    {
        customer: {
            name: "Oscar Blancarte"
        },
        products: [
            {
                id: 1,
                name: "Banana"
            },{
                id: 2,
                name: "strawberry"
            }
        ]
    },{
        customer: {
            name: "Carlos Raygoza"
        },
        products: [
            {
                id: 3,
                name: "apple"
            },{
                id: 2,
                name: "strawberry"
            }
        ]
    },{
        customer: {
            name: "Andres Bedoya"
        },
        products: [
            {
                id: 4,
                name: "Watermelon"
            },{
                id: 2,
                name: "apple"
            },{
                id: 1,
                name: "Banana"
            }
        ]
    }
]

let simpleOrders = orders.map(order => {
    return order.products.map(product => {return {customer: order.customer.name, product: product.name}})
})

console.log("simpleOrders => ", simpleOrders)

// simpleOrders =>  [ [ { customer: 'Oscar Blancarte', product: 'Banana' },
//     { customer: 'Oscar Blancarte', product: 'strawberry' } ],
//   [ { customer: 'Carlos Raygoza', product: 'apple' },
//     { customer: 'Carlos Raygoza', product: 'strawberry' } ],
//   [ { customer: 'Andres Bedoya', product: 'Watermelon' },
//     { customer: 'Andres Bedoya', product: 'apple' },
//     { customer: 'Andres Bedoya', product: 'Banana' } ] ]

En este nuevo ejemplo hemos pasado de un array con un objeto muy complejo a un un array con tan solo el nombre del cliente y el producto, evitando tener toda la estructura original.

Sin embargo, hay un pequeño detalle, y es que el nuevo array generado es un array de arrays, es decir, todos los productos de un mismo clientes están dentro de un array, esto se debe a que el map que usamos sobre los productos retorna un array, y luego, ese array es retornado para el map que usamos sobre el objeto orders, y como map regresa un array, entonces lo que hace es generar un array con cada array retornado por los products.

Para solucionar este problema es necesario utiliza la función reduce de la que hablaremos en otra ocasión. Déjanos un comentario si quieres que continuemos hablando de la función reduce.

Hace un momento dijimos que map recibe una función, sin embargo, falto detallar que esta función puede recibir 3 parámetros, los cuales son los siguientes:

• currentValue: elemento actual que se esta procesando.
• index: corresponde a la posición (index) donde se encuentra el currentValue dentro del array.
• array: corresponde al array original que estamos procesando.

Cabe mencionar que si bien la función map no muta el array original, hay que tener cuidado con el parámetro array, pues dentro de la función callback podríamos mutar el array original, lo cual es un anti-patrón, pues debemos respetar la inmutabilidad de los parámetros.

Conclusiones

Cómo hemos podido observar, la función map es muy util para crear variaciones de un array, permitiendo en un solo paso, crear un array a partir de otro.

The post Javascript – la función map appeared first on Oscar Blancarte - Software Architecture.

Los props se envían a los componentes al momento de crearlos, y es tan fácil como mandar las propiedades como un atributo del <tag>  del componente, por ejemplo, supongamos que tenemos un componente <ItemList> , el cual necesita recibir los datos de un producto, dicho producto debe contener el nombre y un precio:

<ItemList product={item}/>

Mandar objetos es una forma simple y limpia de mandar propiedades, pero también lo podríamos hacer en varias propiedades, por ejemplo:

<ItemList productName={product.name} productPrice={product.price}/>

La única diferencia entre estos dos métodos será la forma de recuperar las propiedades. Para recuperar una propiedad es necesario usar el prefijo, this.props , por lo que en el primer ejemplo, el ítem se recupera como this.props.product , y en el segundo ejemplo, sería this.props.productName  para el nombre y this.props.productPrice  para el precio.

Una limitación que tenemos para mandar props, es la de no utilizar un nombre de propiedad que coincida con los atributo de React, por ejemplo: onClick , onChange , className , etc.

Las propiedades son inmutables
La propiedad tiene la característica de ser inmutables, es decir, no debemos de modificarlas o actualizarlas, pues es considerada una mala práctica, solo las debemos utilizar de modo lectura.

Regresemos al ejemplo del formulario que vimos en la sección de componentes con estado y sin estado del que hablamos en un artículo pasado. En este ejemplo, creamos el componente App  y sobre este montamos un formulario de registro de empleados. Ahora bien, ¿qué pasaría si quisiéramos que la acción de guardar la controlara el componente padre? La solución es simple, el componente padre tendría que enviar como props la función de guardar, para que el hijo la ejecute.

Lo primero será pasar el formulario a un componente externo, por lo cual, crearemos un componente llamado EmployeeForm , el cual se verá como a continuación:

import React from 'react'

class EmployeeForm extends React.Component{

  constructor(){
    super(...arguments)
    this.state = {
      firstName: '',
      lastName: '',
      age: ''
    }
  }

  componentDidMount(){
    this.refs.firstName.focus();
  }

  handleChanges(e){
    let newState = Object.assign(
      this.state, {[e.target.id]: e.target.value})
    this.setState(newState)
  }

  saveEmployee(e){
    this.props.save(this.state)
  }

  render(){
    return (
      <form>
        <label htmlFor='firstName'>Nombre</label>
        <input ref='firstName' id='firstName'
          type='text' value={this.state.firstName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='lastName'>Apellido</label>
        <input id='lastName' type='text' value={this.state.lastName}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <label htmlFor='age'>Edad</label>
        <input id='age' type='number' value={this.state.age}
          onChange={this.handleChanges.bind(this)}/>
        <br/>
        <button onClick={this.saveEmployee.bind(this)}>Guardar</button>
      </form>
    )
  }
}
export default EmployeeForm

Este componente tiene dos cosas a resaltar, lo primero es que agregamos un botón (línea 44), el cual, al ser presionado, ejecutar la función saveEmployee  declarada en este mismo componente, lo segundo es la función saveEmployee  que declaramos en la línea 24, la cual ejecuta la función save  enviada por el parent como prop.

Por otra parte, tenemos al componente App  que será el padre del componente anterior:

import React from 'react'
import { render } from 'react-dom'
import EmployeeForm from './EmployeeForm'

class App extends React.Component{
  
  save(employee){ 
    alert(JSON.stringify(employee))
  } 
		
  render(){
    return (
	  <EmployeeForm save={ this.save.bind(this) }/> 
	) 
  } 
} 
render(<App/>, document.getElementById('root'));

Podemos ver que al momento de crear el componente EmployeeForm , este le envía como una prop la función save . De esta forma, cuando el componente EmployeeForm , ejecute la propiedad, se lanzará una alerta con los datos capturados (línea 8).

Cuando es necesario “bindear” una función con una prop o queremos utilizar una función en un evento como onClick , onChange , etc. es necesario siempre empezar con this , y finalizar con binding(this)  como se ve a continuación this.<function>.bind(this) .

Debido a que un componente padre puede enviar cualquier propiedad a sus componentes hijos, React proporciona un mecanismo para validar las propiedades que espera un determinado componente, validar su estructura, tipo de dato y definir un valor por default, para eso existen dos términos llamados PropTypes y DefaultProps, de los cuales estaremos hablando en otra ocasión.

Conclusiones

Como hemos visto, las propiedades son el único método que ofrece React para transmitir información de forma descendente, desde un componente padre hacia sus hijos, sin embargo, existe otras alternativas como Redux, una librería que permite gestionar la información de la aplicación totalmente desacoplada de los componentes.

The post React Props (Propiedades) appeared first on Oscar Blancarte - Software Architecture.

Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras en pantalla, hasta como se representa la información, de esta forma, el estado puede cambiar la apariencia gráfica de un componente y la forma en que se muestra la información. Un ejemplo básico de un estado, es, por ejemplo, un formulario que puede pasar de modo lectura a escritura.

Como vemos en la imagen, una componente puede pasar de un formulario que no permite la edición, a otro donde los valores se muestran en <input>  para que el usuario pueda cambiar sus valores. Al guardar los cambios, el componente puede regresar a su estado principal. No vamos a entrar en los detalles de lo que es un estado, ni cómo es posible modificarlo, pues eso lo podremos para más adelante, por ahora, solo quiero que tengas una idea de lo que es el estado y cómo puede afectar la forma en que se muestra un componente.

Componentes sin estado

Este tipo de componentes son los más simples, pues solo se utilizan para representar la información que les llega como parámetros. En algunas ocasiones, estos componentes pueden transformar la información con el único objetivo de mostrarla en un formato más amigable, sin embargo, estos compontes no consumen datos de fuentes externas ni modifican la información que se les envía.

Los componentes sin estado también son llamados componentes de presentación, pero son mejor conocidos como Stateless Component por su nombre en inglés.

Para ejemplificar mejor este tipo de componentes vamos a analizar el siguiente archivo llamado ItemList.js , el cual representará un ítem de una lista de productos:

import React from 'react' 
class ItemList extends React.Component{ 
  constructor(props){ 
	super(props) 
  } 
  
  render(){ 
    return( 
	  <li>{this.props.product.name} - {this.props.product.price}</li> 
	) 
  }
 } 
 export default ItemList

Este componte utiliza algo que hasta ahora no habíamos utilizado, las Props, las cuales son parámetros que son enviados durante la creación del componente. En este caso, se le envía una propiedad llamada product, la cual debe de tener un nombre (name ) y un precio (price ).

Las propiedades o simplemente props, son parámetros que se le envían a un componente durante su creación. Los props pueden ser datos para mostrar o información para inicializar el estado. Como regla general, las props son inmutables, lo que quieres decir, que son de solo lectura. Para obtener las propiedades de un componente es necesario obtenerlas mediante el prefijo this.props , seguido del nombre de la propiedad.

Observemos que el componente ItemList  solo muestra las propiedades que recibe como parámetro, sin realizar ninguna actualización sobre ella.
Para completar este ejemplo, crearemos el componente App  que quedará de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemList from './ItemList' 

class App extends React.Component{ 
  render(){
    let items = [{ 9. name: 'Item 1', 10. price: 100 11. }, { 12. name: 'Item 2', 13. price: 200 14. }] 
	
	return ( 
	  <ul> 
	    <For each="item" index='index' of={ items }> 
		  <ItemList product={item}/>
		</For> 
	  </ul> 
	)
  } 
}

render(<App/>, document.getElementById('root'));

Veamos que hemos creado un array de ítems (línea 8), los cuales cuentan con un nombre y un precio. Seguido, iteramos los ítems para crear un componente <ItemList>  por cada ítem de la lista, también le mandamos los datos del producto mediante la propiedad product , la cual podrá ser accedida por el componente <ItemList>  utilizando la instrucción this.props.product .

Otra cosa importante a notar, es la línea 3, pues en ella se realiza la importación del nuevo componente para poder ser utilizando.

Componentes con estado

Los componentes con estado se distinguen de los anteriores, debido a que estos tienen un estado asociado al componente, el cual se manipula a mediad que el usuario interactúa con la aplicación. Este tipo de componentes en ocasiones consumen servicios externos para recuperar o modificar la información.

Un ejemplo típico de componentes con estados, son los formularios, pues es necesario ligar cada campo a una propiedad del estado, el cual, al modificar los campos afecta directamente al estado. Veamos cómo quedaría un componente de este tipo. Regresaremos al componente App  y lo dejaremos de la siguiente manera:

import React from 'react' 
import { render } from 'react-dom' 
import ItemItem from './ItemList' 

class App extends React.Component{ 
  constructor(){ 
    super(...arguments) 
       this.state = { 
       firstName: '', 
       lastName: '', 
       age: '' 
      }  
  } 
  
  handleChanges(e){ 
    let newState = Object.assign(this.state, {[e.target.id]: e.target.value}) 
    this.setState(newState) 
  } 

  render(){ 
    return ( 
      <form> 
        <label htmlFor='firstName'>Nombre</label> 
        <input id='firstName' type='text' value={this.state.firstName}  onChange={this.handleChanges.bind(this)}/>
        <br/> 
        <label htmlFor='lastName'>Apellido</label> 
        <input id='lastName' type='text' value={this.state.lastName}  onChange={this.handleChanges.bind(this)}/> 
        <br/> 
        <label htmlFor='age'>Edad</label> 
        <input id='age' type='number' value={this.state.age}  onChange={this.handleChanges.bind(this)}/> 
      </form> 
    ) 
  } 
} 
render(<App/>, document.getElementById('root'));

No vamos a entrar en detalle acerca de los estados, ni cómo se actualizan, más adelante lo veremos, por lo que solo te cuento rápido que está pasando.
Primero que nada, vemos que en el constructor se establece el estado inicial del componente, el cual tiene un firstName  (nombre), lastName  (apellido) y ege  (edad). Los cuales están inicialmente en blanco.
Seguido tenemos la función genérica handleChanges  que modifica el estado a medida que vamos capturando valores en los campos de texto. Y finalmente en el método render , retornamos 3 campos, correspondientes a las 3 propiedades del estado, adicional, cada campo está ligado a una propiedad del estado mediante la propiedad value . Cuando el usuario captura valores en los campos, se dispara la función handleHanges  para actualizar el estado.

Seguramente al ver esta imagen, no quede muy claro que está pasando con el estado, es por eso que utilizaremos el plugin React Developer Tools que puedes descargar desde chrome para analizar mejor como es que el estado se actualiza. Para esto, nos iremos al inspector, luego seleccionaremos el Tab React:

Una vez en el tab React, seleccionamos el tag <App>  y del lado izquierdo veremos las propiedades y el estado. Con el inspector abierto, actualiza los campos de texto y verás cómo el estado también cambia.

Se le conoce como componente con estado, a aquellos componentes que tiene estado y que adicional, manipulan el estado a medida que el usuario interactúa con ellos. Estos componentes también son conocidos como Componentes Contenedores, pero es más común llamarlos Stateful Components, por su nombre en inglés.

Conclusiones

Como hemos podido analizar en este artículo, existen dos tipos de componentes, con estado y sin estado, los cuales podrán ser utilizados según las necesidades que tengamos. Recordemos que los componentes sin estado solo se utilizan para representar las propiedades enviadas como parámetros o mostrar una estructura estática, mientras que los componentes con estados permiten interacturar con un estado que representa la información interna del componente, lo que les permite afectar la forma en que se ven y la como muestran los datos antes el usuario.

The post Componentes con estado y sin estado appeared first on Oscar Blancarte - Software Architecture.

Es impresionante pensar como JavaScript, un lenguaje desarrollados en los 80’s con el único objetivo proporcionar validaciones de formularios y alertas a los usuarios, se ha convertido en el lenguaje de programación más utilizado en el mundo, sobre pasando a lenguajes tan populares como Java o Python y ejecutándose prácticamente en todos lados, desde FrontEnd, BackEnd y Dispositivos Móviles.

The post Javascript se está comiendo el mundo [VIDEO] appeared first on Oscar Blancarte - Software Architecture.

Que es un Token

Lo primero que debemos de entender, es que es un token, pues será un concepto fundamental para entender el resto del artículo.

Un token es una cadena alfanumérica con caracteres aparentemente aleatorios, como el siguiente:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

o el siguiente:

24353689

Estas cadenas de texto, pueden no aparentar un significado, sin embargo, tiene un significado real para el servidor o institución que lo emitió, el cual puede entender y así, validar al usuario que intenta acceder a la información, e incluso, puede tener datos adicionales.

Te dejo un video donde explico que es un Token:

Un caso simple de tokens, es el dispositivo que dan los bancos para realizar transacciones desde internet, este token te genera un valor numérico que luego tenemos que ingresar al sistema, para que de esta forma, el portal pueda asegurarse de que efectivamente somos nosotros y no un impostor.

En el caso de los tokens bancarios, no se almacena una información real dentro del Token, sino que simplemente es un valor generado que luego puede ser validado por el banco como un valor real generado por nuestro token. Sin embargo, con JWT podemos enviar cualquier dato del cliente dentro del token para que el servidor pueda obtener mucha más información de nosotros.

Que son los JSON Web Tokens

Bien, una vez que comprendemos que son los Tokens podemos decir que los JWT son un tipo de token el cual engloba una estructura, la cual puede ser desencriptada por el servidor y de esta forma, autenticarnos como usuario en la aplicación.

Veamos la estructura de un JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

Observemos que la cadena está dividida en 3 secciones separadas por un punto. Estas tres secciones tienen un significado:

1. HEADER: la primera parte, corresponde a los Header, y se almacena por lo general el tipo de token y el algoritmo de encriptamiento.
2. PAYLOAD: La segunda parte, contiene los datos que identifican al usuario, como puede ser su ID, nombre de usuario, etc.
3. FIRMA: La tercera parte es la firma digital, la cual se genera con las secciones anteriores y sirve para validar que el contenido no haya sido alterado.

Ejemplo del Header

{
  "alg": "HS256",
  "typ": "JWT"
}

Ejemplo del Payload

{
  "id": "1234567890",
  "name": "Oscar Blancarte",
  "rol": “admin”
}

La firma por otra parte es el header y el payload en base64 y después encriptado.

Puedes leer más de JWT en su página oficial

Como se utiliza los JWT

Como ya hablamos, los JWT se utilizan para autenticar a los usuarios, para ello, el usuario requiere de un login tradicional como es el usuario y password. Una vez, que el sistema de Backend valida que el usuario y contraseña son correctos, este retorna un token al usuario. Este token lo deberá guardar el cliente, pues de aquí en adelante, todas las peticiones que realice al servidor, deberá llevar el token.

El token es por lo general almacenado en Cookies o en el LocalStorage del navegador, y cuando es requerido enviar un request al servidor, se recupere y se envía como header.

Un dato interesante del token es que no requiere que el servidor lo almacene para compararlos cuando lo envíe el cliente, pues el token por si solo puede ser auto validado, y como tiene un payload, es posible determinar de quien es el token. Veamos el siguiente payload:

{
  “userID”: 12345,
  “username”: “oblancarte”,
  “rol”: “admin”
}

Cuando el servidor desencripte el token, podrá recuperar este payload y con ello, podrá saber que usuario es e incluso, es posible guardar datos adicionales como el rol o cualquier dato en formato JSON.

Otro dato interesante del token es que expira, es decir, el token solo es válido por un tiempo determinado. Por lo que el usuario deberá volverse a logear una vez que el token expire.

Veamos cómo funcionaría todo el ciclo de vida de un JWT

Ya hemos hablado de como JWT funciona, pero ahora entraremos a ver como es la interacción que tiene un usuario al autenticarse por medio de JWT, para lo cual veamos la siguiente imagen:

Los pasos son los siguientes:

1. El usuario requiere de una autenticación tradicional con el servidor, es decir usuario y password (o cualquier otro tipo de autenticación).
2. El servidor validará que los datos introducidos sean correctos y generará un Token.
3. El servidor enviará el token al usuario y este lo tendrá que almacenar de cualquier forma.
4. Una vez con el token, el usuario realiza una petición al servidor, enviando en el header el token previamente generado.
5. El servidor validará que el token sea correcto, desencriptandolo mediante la misma llave que utilizo para encriptarlo.
6. Si el token es correcto, entonces el servidor retornará los datos solicitados.

Cabe mencionar que los puntos 4,5 y 6 se pueden repetir indeterminado número de veces hasta que el token caduque, cuando esto pase, entonces será necesario reiniciar desde el paso 1.

Como implementar un JWT

Existe una serie de librerías que nos permite crear un JWT, y todo dependerá del lenguaje que utilicemos. Sin embargo, quiero mostrarte como crear un JWT con NodeJS.

Lo primero, es que será necesario importar el módulo jsonwebtoken:

npm install –save jsonwebtoken

Generación del Token

ya con la dependencia instalada podemos crear el token de la siguiente manera:

var jwt = require('jsonwebtoken')

function generateToken(user) {
  var u = {
   username: user.username,
   id: user.id
  }
  return token = jwt.sign(u, ‘password’, {
     expiresIn: 60 * 60 * 24 // expires in 24 hours
  })
}

Lo primero que haremos será crear una función que reciba el objeto usuario o cualquier otro objeto que contenga la información requerida para la autenticación. Luego mediante el objeto usuario, creamos el objeto u, el cual solo contiene el username y el ID del usuario. Este objeto se convertirá en el payload del JWT, es decir la segunda parte del token.

Seguido, procedemos a crear el token mediante el módulo jwt, el cual nos proporciona el método sign que recibirá el payload y un password, este password deberá ser secreto, pues con él, podremos crear y desencriptar los tokens. Finalmente, el tercer parámetro son las opciones, aquí podremos seleccionar el algoritmo de encriptación, la fecha de expiración, etc.  En este ejemplo dejamos la configuración por default, pero agregamos que el token sea válidos solo por 24 horas.

Finalmente, el token es retornado al cliente.

Validación del token

Hasta este punto solo hemos visto la parte de la generación del Token, pero falta la segunda parte, en donde tenemos que validar que el Token que el cliente nos manda, es válido.

Para validar el Token podemos utilizar un Middleware de Express que valide de forma automática todas las URL que inicien con /secure. El middleware se ve de la siguiente manera:

router.use('/secure',function(req, res, next) {
  var token = req.headers['authorization']
  if (!token) {
    res.status(401).send({
      ok: false,
      message: 'Toket inválido'
    })
  }

  token = token.replace('Bearer ', '')

  jwt.verify(token, ‘password’, function(err, token) {
    if (err) {
      return res.status(401).send({
        ok: false,
        message: 'Toket inválido'
      });
    } else {
      req.token = token
      next()
    }
  });
});

Podemos ver que en la primera llínea inicializa el middleware, luego en la segunda línea obtenemos el token del header “authorization”. Si el token es Null regresamos un 401 indicando que no el cliente no tiene privilegios.

Los token generados por JWT se crean con la palabra “Bearer” al inicio del token, por lo que en la línea 10 quitamos esa parte del token, seguido, en la línea 12 realizamos la validación del token mediante el método verify.

Este método recibe el token como primer parámetro, como segundo parámetro, mandamos el password para desencriptar el token. Finalmente se envía como tercer parámetro una función Callback una vez que el token sea validado.

Si todo salió bien, el token estará en la variable token, en caso contrario, tendremos el error en la variable err.

Conclusiones

Como pudimos ver, los tokens son una magnifica forma de administrar la autenticación de los usuarios, pues permite crear de forma fácil, un mecanismo para comunicarse de forma segura entre el cliente y el servidor, además, de que permite mantener autenticado a un usuario por un tiempo determinado, evitando tener que iniciar sesión cada vez que entre a nuestra aplicación.

The post Autenticación con JSON Web Tokens appeared first on Oscar Blancarte - Software Architecture.