programación

¿Qué es Redux?

Redux es una librería que se encarga de emitir actualizaciones de estado en respuesta a acciones. En lugar de modificar directamente el estado, la modificación se maneja a través de objetos sencillos llamados acciones. Luego escribes una función especial llamada reductor para decidir cómo cada acción transforma el estado de toda la aplicación. Y por último todo se maneja desde un solo lugar llamado store (ya somos experto en Redux! No?). Ya que la repetición nos ayuda a recordar las cosas podemos decir que los elementos principales de esta arquitectura o patron de diseño son:

  • Acciones
  • Reducers
  • Store

La librería Redux en sí es sólo un conjunto de ayudas para “montar” reductores a un único objeto de store global. Veamos los detalles.

Redux overview
Ilustración por Lynn Fisher

Aunque no sea importante para entender qué es Redux, debemos indicar que para instalar la versión estable usamos npm:

npm install --save redux

Principios fundamentales

Como los requisitos para las aplicaciones tipo SPA en JavaScript se han complicado cada vez más, nuestro código debe gestionar más states que nunca. Las librerías como React, Angular y Vuejs intentan resolver parte de este problema en el layer de vista eliminando tanto la asincronía como la manipulación DOM directa. Sin embargo, la gestión del state de la data se deja a tu discreción. Aquí es donde Redux entra.

Redux intenta hacer predecible las mutaciones de estado imponiendo ciertas restricciones sobre cómo y cuándo pueden suceder las actualizaciones. Estas restricciones se reflejan en los tres principios de Redux.

Única fuente de verdad

El estado de toda la aplicación se almacena en una estructura de árbol dentro de un único store.

Esto hace que sea fácil crear aplicaciones universales, ya que el estado en el servidor puede ser serializado e hidratado en el cliente sin ningún esfuerzo adicional de codificación. Un solo árbol de estado también facilita la depuración o la introspección de una aplicación. Esto permite que el ciclo de desarrollo sea más rápido.

El estado es read-only

La única manera de cambiar el estado es emitir una acción, un objeto que describe lo sucedido.

Esto garantiza que nada modificará directamente al estado de tu aplicación. Por el contrario, la acción expresa una intención de transformar el estado. Debido a que todos los cambios están centralizados y suceden uno por uno en un orden estricto, no hay race conditions que necesitemos monitorear. Dado que las acciones son objetos sencillos, se pueden registrar, serializar, almacenar y reproducir posteriormente para fines de depuración o pruebas.

Los cambios se realizan a través de funciones puras

Para especificar cómo se transforma el estado por acciones, se escriben reducers puros.

Los reducers son funciones puras que toman el estado anterior y una acción, y devuelven el siguiente estado. Esta función debe devolver objetos que presentan el nuevo estado, en lugar de cambiar el estado anterior. Puedes comenzar con un solo reductor y, a medida que la aplicación vaya creciendo, divídelo en reductores más pequeños que administren partes específicas del estado.

Actions

Las acciones son cargas útiles de información que envían datos desde su aplicación a su store. Son la única fuente de información para el store. Los envía al store mediante el método store.dispatch ().

Las acciones son simples objetos en JavaScript. Las acciones deben tener una propiedad conocida como type que indica el tipo de acción que se está realizando. Los types normalmente se deben definir como una cadena de constantes. Una vez la aplicación haya crecido, puedes mover las acciones a módulos independientes. Veamos un ejemplo:

var action = {
  type: 'ADD_USER',
  user: {name: 'Dan'}
};

Action Creators

Los creadores de acciones son exactamente eso, funciones que crean acciones. Es fácil combinar los términos “acción” y “creador de acción” al momento de buscarle nombres a nuestros elementos, así que haz lo mejor que puedas para usar el término apropiado. Así evitaras confusiones.

// Action type
const ADD_USER = 'ADD_USER';

// Action Creator
var addUser = function(name) {
  return { type: ADD_USER, name}
}

// Dispatch envía un object
store.dispatch(addUser('Jaime'));

La función dispatch() se puede accesar directamente desde el store como store.dispatch(), pero es más conveniente utilizar el método connect() que tenemos en la librearía react-redux. Puedes utilizar bindActionCreators() para asociar automáticamente cuantos creadores de acción desees a la función dispatch(). Ya empezamos a tocar un poco de profundidad asi que mejor vamos a continuar con el próximo tema.

Reducers

Las acciones describen el hecho de que algo ocurrió, pero no especifican cómo cambia el estado de la aplicación en respuesta a esa intención de cambio. Este es el trabajo de los reductores. El reductor es una función pura que toma el estado anterior y una acción, y devuelve el siguiente estado.

(previousState, action) => newState

Es muy importante que el reductor se mantenga puro. Cosas que nunca debes hacer dentro de un reductor:

  • Modificar sus argumentos (entonces ya no es una función pura)
  • Ejecutar acciones como llamadas a algún API o jugar con las rutas (routes)
  • Ejecutar funciones no-puras, por ejemplo Date.now(), Math.random(), etc

La documentación es enfática en destacar que el reductor debe ser puro. Dado los mismos argumentos, debes calcular el siguiente estado y devolverlo. Sin sorpresas. Sin efectos secundarios. No llamadas de API. No mutaciones. Sólo una simple evaluación. Veamos un ejemplo:

import { combineReducers } from 'redux'
import { ADD_USER } from './actions'

function users(state = [], action) {
  switch (action.type) {
    case ADD_USER:
      return [
        ...state,
        {
          text: action.text
        }
      ]
    default:
      return state
  }
}

const reducers = combineReducers({
  users
})

export default reducers

Store

Como hemos visto las acciones representan los hechos sobre “lo que pasó” y los reductores actualizan el estado de acuerdo a esas acciones. El store es el objeto que los reúne (yey!). El objeto store tiene las siguientes responsabilidades:

  • Almacena el estado de aplicación
  • Permite el acceso al estado a través del método getState()
  • Permite que el estado se actualice a través del método dispatch(action)
  • Registra los listeners mediante el método subscribe(listener)
  • Maneja remover el registro de los listeners a través de la función que invocó al subscribe(listener). Te lo aclaro con el siguiente ejemplo:
const remove = subscribe(myListener);
// para remover:
remove();

Ya cubierto lo básico podemos tener una idea de lo que es Redux. Veamos el ejemplo completo (en producción se debe perseguir crear módulos para cada parte):

// Reducers
const users = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [
        ...state, {
          text: action.text
        }
      ]
    default:
      return state
  }
}

//Actions
const addUser = (text) => {
  return {
    type: 'ADD_USER',
    text
  }
}

// Redux y amigos
const { combineReducers, createStore } = Redux
const userApp = combineReducers({ users })

let store = createStore(userApp)
// Registra el estado inicial
console.log(store.getState())

// cada vez que haya un cambio en el state, registrarlo
// Observa que la función subscribe() devuelve una función para remover el listener
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

// Dispatch some actions
store.dispatch(addUser('Wolverine'))
store.dispatch(addUser('Batman'))
store.dispatch(addUser('Ironman'))

// Remover listeners a la actualización del state
unsubscribe()

Conclusión

Esto es solo el comienzo. Esta arquitectura puede parecer un poco pesada para proyectos pequeños, pero la belleza de este patrón de diseño es lo bien que escala en aplicaciones grandes y complejas. Además, es fácil de integrar en ya sea en React, Angular, Vuejs etc.

tecnología

Encuesta oficial de Programadores Puerto Rico sobre Análisis de Salario


En los pasados años uno de los temas recurrente entre los usuarios del grupo Programadores Puerto Rico es el asunto del salario ofrecido por los patronos de la isla. Las historias generadas alrededor de este asunto han sido muy interesantes. Los números capturados por varias iniciativas también han sido igual de interesantes. No obstante no hemos logrado colectar una muestra representativa para poder realizar un análisis más detallado.

Versión 2017

Este año para incentivar la participación estaremos regalando dos certificados de Amazon cada uno de $25.00. Además hemos creado una encuesta un poco más abarcadora pero a la vez fácil de responder. A pesar de que el origen de esta iniciativa nace en el Grupo Programadores Puerto Rico, nuestro deseo es poder también atender a la comunidad hispano parlante. Ten la confianza de completar la encuesta aun si no resides en Puerto Rico. La encuesta también toma en consideración diferentes especializaciones dentro de la Industria de Tecnología y no solamente a la programación como oficio. Contamos con tu participación. Puedes completarla a continuación o visitando el enlace a final.

Encuesta oficial de Programadores Puerto Rico sobre Análisis de Salario

programación

Componentes Vue.js en español

Vayamos rápido al grano sobre el tema de componentes en Vue.js. Por ahora, sólo necesitas saber que todos los componentes en Vue son esencialmente una extensión a la instancia de Vue.

// Instancia Vue
new Vue({
  el: '#some-element',
  // options
})

Utilizando el entorno ofrecido por la herramienta vue-cli, vamos a utilizar los archivos iniciales para ver como trabajamos con los components. Veamos el siguiente ejemplo:

import Vue from 'vue'
import App from './App.vue'

// Extendemos las instancia para crear los componentes
Vue.component('comp1', {
  template:'<div>Component 1</div>' 
}) 

Vue.component('comp2', { 
  template:'<div>Component 2</div>' 
}) 

Vue.component('comp3', { 
  template:'<div>Component 3</div>' 
}) 

// Instancia de Vue 
new Vue({ 
  el: '#app', 
  render: h => h(App) 
})

Continuar la lectura…

programación

Construir un ambiente de desarrollo para Vue.js usando Webpack

Después de haber escrito sobre lo básico de Vue.js es momento de pasar al próximo nivel, Vue.js usando Webpack. La idea este “próximo nivel” es poder tener un ambiente relativamente completo para desarrollar nuestro front-end.

Vue ha desarrollado una herramienta increíblemente práctica para este propósito. La herramienta es conocida como vue-cli y contiene todo lo necesario para arrancar el ambiente de desarrollo. Lo bueno de utilizar esta herramienta es que provee una manera oficial y opinionada de empezar un proyecto. Además provee espacio para adaptarlo a nuestra necesidades y gustos.

Para comenzar a utilizar vue-cli debes tener: Node.js (>=4.x, 6.x siendo preferido) y Git. En cuanto a npm una recomendación es tener npm >= 3.x.

Instalamos de la siguiente manera:

$ npm install -g vue-cli

Actualmente los templates oficiales disponible son:

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente. La documentación oficial lo explica con lujo de detalle.

Para propósitos de este tutorial y porque es el template que más utilizo estaremos trabajando con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Ya que hemos instalado vue-cli, vamos a utilizarlo para crear nuestro proyecto y de una vez procederemos a instalar las dependencias.

$ vue init webpack my-project

$ cd my-project

$ npm install

Ya con todo en su lugar vamos a inicial el proyecto.

$ npm run dev

Conclusión

Es hora de repasar que tenemos hasta el momento. Hemos creado un proyecto a través de la herramienta vue-cli. Esta herramienta utiliza Webpack para manejar todo el ambiente de desarrollo de Vue. Nada “fancy” por el momento pero si analizamos todo lo que tenemos con tan solo usar vue-cli, comprenderemos el gran ahorro en tiempo y stress que esta simple herramienta nos provee.

micro notas

Micro Notas #11

A través de estas micro notas hablo brevemente de aquellas noticias o enlaces que me han parecido curiosas y relevantes al mundo de la programación y la tecnología.

How DNS works – colorida y muy animada manera de aprender el proceso detrás del funcionamiento de un Domain Name Server. Si tienes curiosidad en saber que ocurre una vez accedes el url a través del navegador este recurso es estupendo. Prácticamente cubre todos los actores envueltos en proceso de resolver el domain name, el camino hasta el server final y de nuevo el regreso a casa.

Matrix Multiplication – Por esa misma línea de aprender como funcionan las cosas, este proyecto muestra de forma visual como funciona la multiplicación de matrices. Buen proyecto si estás aprendiendo Typescript.

Consejos para reforzar la destreza de la programación – A través de los artículos Proof You Can Become a Better Programmer y Tips for Self-Learning Programming podrás obtener buenos consejos para mejorar las destrezas de programación. Lo que me ha gustado de estos artículos es el contraste de como llegar al mismo fin por diferentes caminos.

programación

Malas costumbres

Recientemente estuve escuchando el episodio Two Anti-Patterns To Avoid del podcast Developer Tea (excelente podcast por cierto). En el episodio Jonathan Cutrell discute dos anti-patrones, o como mejor me gusta llamar, malas costumbres que podemos cometer en el código fuente de nuestro proyecto. Inicialmente pensé en saltarme el episodio pero teniendo en cuenta que solo discutiría dos me dio curiosidad. De todas esas cosas que sabemos no debemos hacer pero aún así hacemos mientras programados me llamó la atención que dos cosas el anfitrión destacaría en la conversación. Continuar la lectura…

tecnología

Hello Open Source

Es increíble el momentum que está experimentando el movimiento Open Source Software en la industria del desarrollo de software. Vemos como los principales nombres de la industria, lanzan proyectos en donde gente como tú y yo podemos colaborar. Con el OSS no solo podemos ver el código fuente sino también podemos sugerir y aportar modificaciones al mismo. Podemos crear una gran lista de pro vs cons de este mover, pero la evidencia apunta a que el beneficio mayormente es positivo tanto para los dueños de los proyectos como para nosotros los usuarios. Continuar la lectura…

diseño

Cómo Apple pasó de perdedor a culto a través de seis estrategias de diseño e innovación durante sus inicios

Artículo publicado originalmente en inglés en Brain Pickings: How Apple Went from Underdog to Cult in Six Design and Innovation Strategies from the Early Days por María Popova. Traducido con autorización.

“Apple ha tenido que hacer realidad los sueños de las personas que no sabían eran posible.”

En 1982, Apple contrató al diseñador industrial e inventor alemán-americano, Hartmut Esslinger para revisar la estrategia de diseño de la compañía. Él creó el lenguaje de diseño Snow White, que definiría  Apple, y tornaría al más débil de Silicon Valley no sólo en una fuerza global del diseño e innovación, sino también en una cultura singular – un culto a lo estético. Continuar la lectura…

programación

Primeros pasos usando Vue.js

Entonces un día decidí que solo aprenderé solo un, a lo máximo dos, Javascript frameworks. Así fue que me decidí por Vue.js. Y es que en estos días abundan miles de frameworks que de una forma u otra “te ayudan” a se ser más productivos. Este es el caso de Vue.js. Realmente se ha convertido en una herramienta que me hace sentir productivo. Llevo tiempo aprendiendo sobre el framework y me gustaría compartir lo divertido que ha sido utilizarlo.

Voy a utilizar como ejemplo un webapp que en resumen, se encarga de leer la lectura más reciente de los depósitos de agua en Puerto Rico, país donde resido. Hace un año atrás, nuestra isla sufrió una fuerte sequía. Durante ese proceso el tema de monitorear los niveles de las reservas de agua se convirtió en una costumbre cotidiana. En el repositorio de Github hablo un poco más sobre el asunto. Así que vayamos al grano.

¿Por qué Vue.js?

Una de las razones principales que me motivó a tratar esta librería, es la forma en que implementa el tema de reactividad en un webapp. Digamos que tenemos un objecto en Javascript definido de la siguiente manera:

var object = {
  message: 'Hello world!'
}

En el HTML tenemos un template de tipo handlebars:

<div id="example">
 {{ message }}
</div>

Con Vue.js solo decimos a donde miramos en el HTML y que objeto le voy a pegar y la librería posee toda la magia (lógica) para hacer nuestros dos elementos reactivos, two way binding sin esfuerzo alguno.

new Vue({
 el: '#example',
 data: object
})

Instalación de Vue.js

Vue.js es prácticamente compatible con cualquier browser moderno. Para este proyecto he usado la versión accesible a través de CDN.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Otra manera de utilizarla, es descargándola directamente a tu folder de trabajo. Bower es tremenda opción para esta configuración. Es altamente recomendable utilizar la versión de desarrollo (development version) y no la comprimida que es recomendable para producción. Esto debido a que la versión de desarrollo ofrece varios mecanismos que ayudan a depurar mucho más fácil el código. Para activar este modo solo necesitas añadir la siguiente declaración:

Vue.config.debug = true

Vue Instance

Antes de continuar con la descripción de la instancia de Vue, vamos a repasar lo que estamos tratando de construir. Este webapp necesita consumir data de un repositorio en Firebase. No tocaré el tema de Firebase en este momento, lo único que necesitamos saber es que desde Firebase vamos a recibir un objecto en formato JSON para poder consumirlo en el cliente. Cada vez que este objeto se actualice, Vue.js se encargará de sincronizar toda esta serie de eventos para poder ver los cambios de manera instantánea en nuestro browser. Solo necesitaremos un archivo index.html y un archivo main.js. La instancia la creamos de la siguiente forma en el archivo main.js:

var vm = new Vue({
 // opciones
})

La instancia de Vue es esencialmente la parte viewmodel del patrón MVVM, de ahí el nombre de la variable vm. Cuando creamos una instancia de Vue, necesitamos pasar un objeto de opciones que puede contener configuraciones para los datos, templates, elementos para montar, métodos, lifecycle callbacks etc. Para que nuestra instancia pueda comenzar a trabajar vamos incluir los siguientes dos métodos:

var vm = new Vue({
  el: #app",
  data: embalses
 // más opciones
})

El primero método es el nombre del tag que usaremos para mostrar la data. El método data es el objeto que contiene la información que mostraremos en el documento html. Con esto es suficiente para mostrar nuestra información. Veamos como podemos manejar esta data.

Directivas en Vue.js

v-for

Vue.js posee varias directivas que ayudan a modificar elementos del DOM. Una directiva es un marcador que se le coloca a un elemento del DOM para alterar su comportamiento o incluso para transformar elementos que se encuentren debajo de este elemento. Este marcador puede ser un  atributo, el nombre del elemento, un comentario o una clase CSS. En nuestro ejemplo he usado la directiva v-for para generar y presentar los elementos que se encuentran definidos como un arreglo en el objeto data de la instancia.

<div v-for="value in embalses">
  <div v-for="item in value">
    <div class="row">
      <div>
        <p>{{ item.city }}</p>
        <h3>{{ item.name }}</h3>
      </div>
      <div>
        <h2>{{ item.currentLevel}}</h2> 
        <p>{{ item.currentLevelTime }}</p>
      </div>
    </div>
  </div>
</div>

Debido a la estructura del objeto embalses he tenido que recurrir a utilizar un for anidado (nested for) para obtener la data de los embalses.

v-on

Esta directiva permite conectar un detector de eventos a los elementos del DOM. El ejemplo más sencillo es el evento click. Esta directiva la he utilizado para crear una serie de botones para ordenar la data por diferentes criterios.

<button type="button" v-on:click="sortBy('city')">Pueblo</button>
<button type="button" v-on:click="sortBy('currentLevel')">Nivel</button>

Métodos y eventos

En Vue.js conectar a un elemento del DOM un detector de eventos es asunto trivial. Veamos como lo hacemos para el clásico evento de onclick. De esta manera utilizaremos el evento para invocar un método que contenga la lógica para reorganizar nuestra data. En Vue.js este método es parte de la instancia. O sea que el método termina siendo una opción mas que podemos configurar fácilmente. Digamos que nuestro método se llama sortBy:

var vm = new Vue({
  el: '#app',
  data: {
    embalses,
    order: 1,
    sortKey: 'city'
  },
  methods: {
    sortBy: function(key){ 
      this.sortKey = key;
      this.order = this.order * -1;
    }
  }
})

Ahora veamos como pegamos todo esto a través de la opción de filtros. Una directiva que nos facilita completar la función de ordenar los elementos es la directiva de orderBy.

<div v-for="item in value | orderBy sortKey order">

Usando el filtro orderBy de Vue.js junto al método creado de sortBy podemos usar parte de la configuración de la instancia (sortKey, order) para organizar los elementos del objeto data.

Producto final

See the Pen Order by in Vue.js by Jaime Olmo (@jamespr) on CodePen.4734

¿Qué es lo próximo?

Hemos tocado solo lo básico del tema. El próximo paso será cómo crear componentes reactivos que es donde realmente Vue.js se destaca con su sencillez y simpleza para crear interfaces de usuarios modernas para la plataforma Web. Aún queda mucho por aprender.