¿Sabes qué es el llamado ‘Callback Hell’ en programación?

Señalización y sincronización de eventos

Si nos dedicamos al desarrollo de productos web seguro que consideramos de gran importancia la correcta codificación y señalización en el proceso de carga de los elementos web. Las devoluciones de llamada de nuestras funciones generan lo que es denominado ‘Callback Hell’ y los subprocesos deben seguir un patrón establecido de estados para que todo funcione como esperamos justo cuando lo necesitamos, como si se tratara de la señal de un director de orquesta. Un ejemplo brillante de señalización a través de la música es el siguiente:

Callback Hell

¿Verdad que en la música todo tiene sentido siguiendo un orden lógico? En programación ocurre algo muy parecido y se requiere sobre todo organización. El infierno de devolución de llamada o ‘Callback Hell’ es causado por malas prácticas de codificación al intentar escribir lenguaje síncrono generalmente en Javascript intentando que la ejecución se lleve a cabo visualmente de arriba abajo como en este ejemplo:

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

En este caso podéis comprobar la dificultad en el manejo de las excepciones o errores en el código además de que no se tiene muy claro cuándo suceden las acciones y los cambios de estado del programa. Para un programador en lenguajes síncronos es muy importante no anidar funciones y elevarlas a la parte superior del script, para que sean cargadas y posteriormente llamadas. También es necesario manejar cada error con un enfoque claro al diseño por módulos. Y, por último, dedicar tiempo en organizar su código y su funcionamiento.

Diagrama de estados

Una herramienta que nos ayuda a representar un patrón de funcionamiento de nuestro producto es el diagrama de estados. Los procesos complejos muchas veces requieren algo más que memoria, buenas prácticas y conocimiento. Podemos ir de lo general a lo concreto y, aunque a simple vista veamos un dibujo poco intuitivo que parece más un circuito electrónico, yo lo considero como la mejor manera de encontrar respuestas porque es lo que mejor transmite al resto del equipo como debería funcionar la lógica de producto para hacer Zoom-in sobre una sección en concreto cuando se desea mejorarla. Este diagrama de a continuación fue el primero que hice, de manera sencilla, para representar el paso de nuestros usuarios por la web de EncuentraSport.

Limitaciones en las devoluciones de llamada o callbacks

Otro de los ejemplos en los que la utilización de los diagramas me ayudó, sobre todo a comprender los estados de mi programa, tiene que ver con las limitaciones que encontramos en el desarrollo de un producto utilizando el framework de Python llamado Dash.

Las callbacks o devoluciones de llamada de Dash proporcionan interactividad a la aplicación a través de componentes de entrada y salida. Estas entradas y salidas son sencillamente las propiedades de los componentes web. Cada vez que una propiedad de entrada cambia, la función callback será llamada automáticamente y proporciona un nuevo valor a la propiedad de salida.

La limitación de Dash es que no permite la existencia de más de una función callback para la misma salida, por lo que, se debe desarrollar una única callback por cada componente Output y debe actualizarse conforme a los estados de los componentes de nuestra plataforma. Todo esto debe realizarse de manera controlada y señalizada para optimizar los tiempos de carga, piensa que la lógica de tu aplicación es el núcleo principal y de aquí dependerá la optimización en su ejecución.

En este caso en concreto también se utiliza la declaración de variables de estado para obtener los valores de ciertas propiedades de los componentes que serán importantes para controlar y decidir la salida. Pero ¿qué pasa si nuestra lógica de estados se vuelve más compleja?

Lógica compleja a través de diagramas – ¿Pérdida de tiempo o mapa detallado?

En este punto el problema que podemos encontrar es que la plataforma no sea lo suficientemente óptima en tiempos de carga y más cuando se realizan cálculos estadísticos sobre un origen de datos de gran volumen de manera simultánea. Habrá quien considera una pérdida de tiempo el diagrama anterior, pero ¿y si estamos pasando algo por alto del proceso? ¿Recurrimos a idea feliz o somos más meticulosos en los procesos? Podemos tomar una actitud para mirar fuera de la caja o entrar en ella en detalle sobre un área en específico. Esto tan sólo depende de ti.

La ejecución de nuestro código debe funcionar de manera asíncrona a través de un buen sistema de señalización y marcar estados globales y locales para que sirvan de marcadores para inicializar la carga de según que componentes en paralelo. Vemos nuevamente la similitud que nos representa el video de la parte superior entre la programación y la música. El director de orquesta está representado en mi diagrama.

¿Qué más podríamos hacer si programamos con lenguajes síncronos?

Aquí es donde puedo introducir un nuevo concepto relacionado con Javascript o Jquery: los llamados JavaScript Deferred Objects y las Promesas. Durante estas últimas semanas he tenido la oportunidad de comprobar las ventajas que ofrece la utilización de estos objetos para conseguir desarrollar un código reutilizable a través de llamadas o peticiones asíncronas. En este diagrama de a continuación se resume el diagrama de estados de un objeto con estas características.

Gracias a este tipo de objetos y el manejo y control de sus estados, se puede realizar código asíncrono que vaya estableciendo por pasos o estados cada una de las variables y características que se van necesitando para nuestra plataforma. Por otro lado, se van a poder controlar el manejo de las excepciones o errores y dotar a nuestro código de una ejecución lógica y optimizada.

Las promesas, como su propio nombre indica, se tratan de objetos que esperan tener un valor determinado permitiendo la continuación del programa para volver a tratar la salida posteriormente. Básicamente nos dice en tiempo de ejecución: “Estamos trabajando en ello, cuando lo tenga, pásate y continúa por aquí, ya te dejaré todo preparado que para que puedas analizar la salida que me has pedido.”

Como veis, realmente supone otro gran avance que tener en cuenta para realizar productos web optimizados. Si tienes en cuenta todo lo que he comentado, no tengo ninguna duda de que estarás evitando el famoso “Callback Hell” y buena parte de los incendios forestales.

Me gustaría por último añadir varios enlaces sobre el ‘Callback Hell’ y las promesas en Javascript por si te interesa saber más y te espero pronto por el tech.

Algo más de conocimiento, un café intenso y jazz de fondo. Así es como me gustaría imaginar que has disfrutado este artículo.
Ginés Molina
Fundador y Coordinador
tecologia en coronavirus

El Impacto de la tecnología en la gestión del COVID-19

El COVID-19 ha representado todo un reto para las naciones, china por ejemplo se vio obligada a la construcción de 2 hospitales en menos de 10 días, el cierre por completo de ciudades, además de tomar medidas de restricción de movilidad nunca antes vistas,

Leer Más >>

Contenido digital y gameplays.

Previous Next Videojuegos y todo el contenido digital que puedas imaginar. Bienvenidos a la sección de gameplays y contenido digital, donde encontraréis desde información acerca de nuevas actualizaciones hasta propios participantes grabando sus horas de juego. ¿Te lo vas a

Leer Más >>
Inteligencia Artificial en la ciencia

Inteligencia Artificial y su importancia en la Ciencia

Índice1 ¿Cómo funciona una Inteligencia Artificial?1.1 ¿Qué es exactamente una IA?1.2 ¿Y si nos sumergimos un poco más?1.2.1 ¿Que es una neurona? ¿Y una red neuronal?2 ¿Por qué es tan importante la Inteligencia Artifcial en la ciencia?3 Inteligencia Artificial en

Leer Más >>

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba