• Home
  • About me
  • Projects
  • Blog
que es flux y por donde comenzar

Qu茅 es Flux y por d贸nde comenzar

02 mayo 2018

Decid铆 escribir una serie de art铆culos, relacionados con la arquitectura flux aplicados con React y Vue, encontr茅 la necesidad de aportar con contenido de valor para desarrolladores que no sabemos muchas veces por donde comenzar para adoptar un nueva tecnolog铆a.

Intentare detallar lo conceptos necesarios para comenzar a implementar tus nuevos proyectos Frontend y migrar los actuales.

Flux

Flux es la arquitectura de aplicaciones que Facebook usa para construir aplicaciones web del lado del cliente. Utilizando un flujo de datos unidireccional.

Los datos de una aplicaci贸n con la arquitectura flux, fluyen en una sola direcci贸n.

Un flujo de datos unidireccional es fundamental para el patr贸n Flux, y el diagrama anterior debe ser el modelo mental principal para el programador.

驴Pero que quiere decir flujo de datos en una sola direcci贸n?

Los datos fluyen en una sola direcci贸n lo cual nos permite tener m谩s control de nuestra aplicaci贸n haciendo f谩cil detectar y corregir errores, lograr llevar tu aplicaci贸n a un estado anterior o siguiente sin muchas complicaciones, el concepto fue creado para mejorar los puntos d茅biles y la dificultad de controlar los cambios en el frontend del patr贸n MVC.

Problemas con el MVC

En este patr贸n legendario se consideran tres roles:

  • Modelo: Gestiona los datos y el comportamiento en la aplicaci贸n.
  • Vista Representa la visualizaci贸n del modelo en la interfaz de usuario.
  • Controlador toma la entrada del usuario, manipula el modelo y hace que la vista se actualice

MVC es utilizado desde 1976, ha resistido el paso del tiempo y proyectos muy grandes lo siguen utilizando aun.

> 驴Entonces cual es el problema?

El patr贸n MVC no se ajustaba a Facebook y uno de sus principales problemas era el flujo de datos bidireccional, donde un cambio en la interfaz dispara m煤ltiples eventos que afectan a m煤ltiples vistas generando efectos en cascada, haciendo muy dif铆cil depurar y resolver un problema.

Modelo, Vista y Controlador en acci贸n

como se puede ver en la imagen anterior un controlador muchas veces es responsable de m谩s de un modelo los cuales generan cambios a m谩s de una vista, de forma visual no se puede entender el flujo de los datos f谩cilmente, por eso muchas empresas est谩n cambiando el MVC por Flux en el cliente y servidor.

Decidiendo por donde comenzar.

Existen muchas implementaciones de Flux para distintos frameworks y librer铆as, yo recomiendo dos de las opciones m谩s populares Redux y Vuex, las cuales se pueden utilizar en casi cualquier cosa inclusive Vanilla Javascript , pero su desarrollo fue enfocado a React y Vue respectivamente.

React y Redux

Si tienes experiencia previa con React, no te molesta el JSX y tienes conocimientos medios de Javascript en general, deber铆as aprender Redux.

Redux se basa en 3 principios:

  • Una sola fuente de verdad

El estado de tu aplicaci贸n esta almacenado en un 谩rbol 煤nico llamado store, eso hace m谩s f谩cil depurar tu aplicaci贸n.

  • El Estado es de solo lectura

La 煤nica forma de modificar el estado es emitiendo una acci贸n, un objeto describiendo que ocurri贸, esto te asegura que ni tu vista ni callbacks de red van a modificar el estado directamente.

  • Los cambios se realizan con funciones puras.

Los reducers son funciones puras que toman el estado anterior y una acci贸n, y devuelven un nuevo estado.

Redux en 22 lineas de c贸digo, Encuentra el Gist explicado en http://es.redux.js.org/

Vue y Vuex

Es un patr贸n de gesti贸n de estado m谩s biblioteca para aplicaciones Vuejs. Tiene un store centralizado para todos sus componentes, con reglas que garantizan que el estado solo se puede mutar de manera predecible, esta inspirado en Redux, Flux y Elm.

A diferencia de Redux, Vue adicionalmente utiliza:

  • Estados derivados.

A veces es posible que tengamos que calcular el estado derivado en funci贸n del estado del store, Vuex nos permite definir getters el resultado de esa funci贸n se almacena en cache y solo se volver谩 a re-calcular cuando se realice un cambio a sus dependencias.

  • M贸dulos

Vuex nos permite dividir el store en m贸dulos. Cada m贸dulo puede contener su propio estado, mutaciones, acciones, getters.

Espero que te encuentres interesado(a) en implementar el patr贸n flux en tus pr贸ximos proyectos, seguir茅 escribiendo sobre temas relacionados y construiremos aplicaciones utilizando Redux y Vuex.

Lecturas recomendadas: