Aprendiendo Python

13716004_10154359822774314_7376618903244361115_nAyer participé de la Millennial Game Jam en Córdoba. Como en todas las Game Jams, el objetivo era crear algún juego en un lapso corto de tiempo. En esta oportunidad, menos de 6 horas (Muy corto lapso de tiempo).

Pero mi objetivo era ligeramente diferente al de la Jam. Si bien sí iba a crear un videojuego, lo principal era hacerlo en algún lenguaje de programación que no conociera y en algún framework que tampoco supiera nada de él.

Hacía un tiempo que quería aprender algo de Python pero no había encontrado la oportunidad ni la motivación para hacerlo. Así que esta Jam era esa oportunidad.

En menos de 6 horas, con el equipo que decidió sumarse a esta loca idea, hicimos un prototipo de juego usando Python 2.7 y Pygame.

Por supuesto, el código creado no fue de lo mejor, pero fue suficiente para justificar el tiempo.

Si quieres ver un poco el código: https://github.com/MatiasIac/millenialGJ


Ya en librerías

Programación de videojuegosFinalmente el libro de desarrollo de videojuegos con HTML5 y JavaScript ha salido a la luz.

En Argentina, puedes conseguirlo en librerías y kioskos, así cómo desde la página de la editorial.

http://www.redusers.com/noticias/publicaciones/programacion-de-videojuegos/


Agilidad, psicología y otras yerbas

Anoche di una charla sobre sesgos cognitivos y cómo estos influyen en nuestro comportamiento diario, en los proyectos en los que participamos, en los equipos, y un largo etc.

Si quieres ver la charla, puedes hacerlo desde YouTube: https://www.youtube.com/watch?v=Zv7awyGxmjI&feature=youtu.be


Patrón Singleton con JavaScript

Seguimos con esta idea de presentar diferentes patrones de diseño desde la mirada de JavaScript. En esta oportunidad les traigo el patrón singleton.

En muchos lenguajes de programación este patrón ya viene encapsulado en la propia sintaxis. Usar, por ejemplo, un tipo static en C# es básicamente lo mismo que un singleton, pero sin tener que escribir el código del patrón y al mismo tiempo con ventajas sobre el manejo de hilos y procesos.

En otros lenguajes, como en el caso de JavaScript, aún tenemos que hacerlo al viejo estilo (O por lo menos eso queremos para que este post tenga sentido).

Este patrón nos permite, para resumirlo de forma rápida, obtener una misma instancia de determinado objeto. Una ventaja de esto sería si necesitamos que un proceso particular no pueda ser manejado desde diferentes objetos por más que sean una copia del mismo código.

Un ejemplo simple de imaginar (Aunque no relacionado de forma directa a JavaScript) sería el de tener un formulario para una aplicación de escritorio, el cuál se abre al presionar un botón. Si para abrir este formulario necesitáramos crear un nuevo objeto del mismo, tendríamos copias de este formulario tras cada creación. Con un singleton, por el contrario, podríamos llamar al mismo formulario una y otra vez asegurándonos que siempre será el único y originalmente creado el que se muestre al usuario.

Pero vamos con el código para JavaScript:

(function (w) {
 var _instance = null;
 
 var singleton = function () {
  this.URL = "";
 };
 
 singleton.prototype.conectar = function () {
  console.log("Conectando a ", this.URL);
 };
 
 w.conector = {
  getInstance: function () {
   if (_instance === null) {
    _instance = new singleton();
   }
 
   return _instance;
  }
 };
}(window));

Analicemos un poco el código. Lo que usamos para generar todo el objeto es una función auto ejecutada (Tiene otros nombres, pero puede que ese nombre ayude a entender cómo funciona). Esta función se ejecuta automáticamente y debido a la forma en cómo JavaScript maneja las variables y su alcance (Closure) podremos mantener la variable _instance a la espera de una instancia de un nuevo objeto.

Luego crearemos en la variable singleton lo que sería una representación de nuestro objeto (Como si fuese una clase en otros lenguajes). Esta posee una variable URL y una función conectar.

Por último, inyectaremos al objeto window (Padre del árbol de objetos en el navegador) un objeto llamado conector y que tendrá una función getInstance. Es esta función la que nos permite crear y manejar el singleton. En ella, cada vez que alguien pide una instancia de nuestro singleton verificamos si la variable _instance tiene ya una referencia al objeto en cuestión. Si no la tuviere, creamos un nuevo objeto y retornamos ese valor, pero si por el contrario ya hubiera sido instanciado por otra llamada, entonces retornaremos el mismo objeto ya creado, haciendo que el consumidor de nuestro objeto siempre obtenga la misma referencia al objeto singleton.


Patrón State con JavaScript

Siguiendo con esta idea de los patrones de diseño con JavaScript, y a pedido de (Otra vez) algunos amigos, vamos con el patrón State.

Este patrón es bastante simple pero puede ser implementado de diferentes formas, dependiendo del lenguaje de programación que usemos. En JavaScript, desde lo personal, me gusta jugar un poco con las funciones y algunas referencias a las mismas.

Este patrón, en resumen, permite modificar el comportamiento de un objeto en base a cosas que pudiesen pasar dentro del mismo. De cara al consumidor del objeto, esto se aprecia solo por medio de los resultados del objeto. Otro motivo por el cual utilizar este patrón es el de ahorrarnos en complicados switchs e ifs para realizar determinadas acciones.

Supongamos lo siguiente:

contador += 1
if (contador < 10)
  EjecutarX()
else
  EjecutarY()

En el caso anterior, el código se repetiría indefinidamente, sumando la variable contador y evaluando el if constantemente. Internamente, una función o la otra se ejecutarían en base al estado interno de la variable. El problema de esto es que (Y si bien así como lo vemos no es un problema realmente) si tenemos muchos estados (ifs o switchs) puede ser difícil de mantener y depurar por lo que el patrón en cuestión sería una mejor aproximación.

var State = (function () {

   var state = function () {
      ...
       this._counter = 1;
    };
 
    state.prototype.run = function () {
       var self = this;
      ...
    };
 
    return state;
}());

Lo primero es crear un objeto. En este dejamos la variable _counter y una función run. Además agregaremos dos funciones que representarán el estado del objeto en diferentes momentos de la ejecución.

 state.prototype.state1 = function () {
   console.log("Estado 1");
    this._counter++;
    if (this._counter > 10) {
       this._innerPointer = this.state2;
    }
 };
 
 state.prototype.state2 = function () {
    console.log("Estado 2");
 };

También una función vacía, que si notamos en la función state1 notaremos que se utiliza para asignar la función state2 cuando el contador es superior a 10.

 state.prototype._innerPointer = function () {
 };

El último cambio será en la función run donde iniciaremos un intervalo de 1 segundo ininterrumpido y que llamará a la función _innerPointer. Esta función fue asignada con el estado 1 al inicio del objeto. De esta forma, cada vez que se llame a _innerPointer en realidad se estará llamando a state1. Luego de ser llamada 10 veces, state1 cambiará la referencia de _innerPointer a state2 y esta función se ejecutará indefinidamente.

var State = (function () {

   var state = function () {
       this._innerPointer = this.state1;
       this._counter = 1;
    };
 
    state.prototype.run = function () {
       var self = this;
       setInterval(function () {
          self._innerPointer.call(self);
       }, 1000);
    };
 
    state.prototype._innerPointer = function () {
    };
 
    state.prototype.state1 = function () {
       console.log("Estado 1");
       this._counter++;
       if (this._counter > 10) {
          this._innerPointer = this.state2;
       }
    };
 
    state.prototype.state2 = function () {
       console.log("Estado 2");
    };
 
    return state;
}());

 


Patrón Interpreter con JavaScript

Hace unos días publicaba un ejemplo bastante simple de cómo implementar el patrón cadena de responsabilidad con JavaScript. Un amigo me largó la idea de ir por el patrón Interpreter. Así que aquí vamos.

El patrón Interpreter es útil para, como lo dice su nombre, interpretar cosas. Muy útil para la creación de analizadores sintácticos; El principio de la creación de las reglas de un lenguaje de programación por ejemplo, o para transformar un texto en otra cosa, como números romanos a decimales.

En nuestro caso supongamos lo siguiente:

get http://jsonplaceholder.typicode.com/posts/1 => data

En vez de tener que escribir el código para esta acción, queremos que el interpretador lea la cadena de texto y realice una acción particular. En este caso, realizar una petición HTTP mediante GET a una URL y luego almacenarla en una variable de nombre DATA.

Podemos separar, entonces, nuestro texto en ACCION [parámetros] LUEGO [variable].

Lo primero que necesitaremos será un objeto (Clase) que nos permita crear las diferentes parte de nuestro idioma, teniendo como parte de nuestro idioma aquello que pusimos en mayúsculas (GET y =>).

var expressionBase = Class.extend(function () {
    this.interpret = function (context) { };
});

(Volvemos a usar, como en el caso del patrón anterior, ExtendJS y además jQuery)

Luego crearemos cada una de las secciones de nuestro idioma derivadas de esta clase.

var getExpression = expressionBase.extend(function () {
 this.interpret = function (context) {
 if (context._expression.substring(0, 4) !== "get ") { throw "Incorrect syntax"; }
 
 var target = context._expression.substring(4, context._expression.indexOf(' ', 4));
 
 $.ajax({
 url: target,
 async: false,
 success: function (data) {
 context._data = data;
 }
 });
 };
});

var thenExpression = expressionBase.extend(function () {
 this.interpret = function (context) {
 var validator = context._expression.split(' => ');
 if (validator.length !== 2) { throw "Incorrect syntax near =>"; }
 };
});

var creatorExpression = expressionBase.extend(function () {
 this.interpret = function (context) {
 var holder = context._expression.substring(context._expression.indexOf('=> ') + 3).trim();
 window[holder] = context._data;
 };
});

Por supuesto, hay muchas formas de tomar los valores del texto y actuar en consecuencia. Lo importante es que hemos separado cada una de las partes funcionales de nuestro lenguaje en diferentes clases y cada una de ellas tiene una responsabilidad.

Lo siguiente será crear una pseudo factory (Otro patrón) que nos ayude a crear las reglas de nuestro lenguaje. Aquí hay que aclarar que lo mejor sería tener un árbol con toda la estructura y no una lista, pero para el ejemplo vale.

var context = function () {
 
 this._data = null;
 this._expression = null;
 var expressionTree = [];
 
 expressionTree.push(new getExpression());
 expressionTree.push(new thenExpression());
 expressionTree.push(new creatorExpression());
 
 this.expressionResult = function () {
 return this._data;
 };
 
 this.setContext = function (expression) {
 this._expression = expression;
 
 for (var i = 0; i < expressionTree.length; i++) {
 expressionTree[i].interpret(this);
 }
 };
};

Como podemos ver, la variable expressionTree (Que es un array) define el orden del lenguaje. Primero el GET, luego => y finalmente la variable destino. Con una mejor estructura podríamos crear todas las combinaciones de nuestro propio lenguaje.

Por último, ejecutamos el interpretador:

 var myContext = new context();
 myContext.setContext('get http://jsonplaceholder.typicode.com/posts/1 => data');
 
 console.log(data);

Gracias al dinamismo de JavaScript la variable data es creada conteniendo el valor resultante de la llamada.


Cadena de responsabilidad con JavaScript

Ya que estamos por acá y hacía mucho que no publicaba nada, vamos con un ejercicio práctico rápido.

Una de las cosas que me gustan, y mucho, de escribir código son los patrones de diseño. Esas piezas de código que solucionan algún problema particular de forma elegante.

Hay miles, pero tal vez los más recordados sean los propuestos por el GoF. Patrones que muchas veces usamos sin saberlo o hemos escuchado y mal usado (Porque es el único que recordamos) en todos lados (Ejem… singleton).

Así que, no vamos a hacer un singleton, si no, una cadena de responsabilidades.

Para este caso, hay un par de formas de hacerla pero a la larga es más o menos lo mismo, así que vamos con una forma bastante clásica. Esto es: Teniendo una clase base particular, creamos otras que tendrán tareas específicas y heredan de la base. En cada una de las clases realizaremos una validación o tarea o “responsabilidad“, para luego pasarle la responsabilidad a la siguiente parte de dicha cadena. Si un eslabón falla, la cadena falla. Es un todo o nada.

Suele ser muy útil para validar contraseñas o aplicar reglas a un objeto, tener las reglas separadas y encapsuladas (No una masa de ifs) y poder encadenar dicha cadena de la forma en que nos de la gana. Incluso por código, pudiendo cambiar el comportamiento de la misma sin tener que modificar línea alguna.

En este caso, para ahorrarme algo de código he usado la librería ExtendJS, que permite crear una herencia al estilo de lenguajes como Java o C#, pero por debajo usa prototipos y demás dulzuras de JavaScript.

Lo primero, la clase base:


var chainBase = Class.extend(function(){
this._next = null;
this.goNext = function (value) {
if (this._next !== null) {
this._next.validate(value);
}
};
this.validate = function (value) {};
});

La clase base tiene una propiedad _next donde alojaremos el siguiente eslabón de la cadena, una función goNext para ahorrarnos escribir el código de movernos por la cadena en cada eslabón y una función validate que luego será sobre escrita en las demás clases.

var charMin = chainBase.extend(function () {
this.super();
this.validate = function (value) {
if (value.length < 3) {
throw "No es sufientemente largo";
}
this.goNext(value);
};
});

El primer eslabón se encarga de validar que el largo de nuestro texto a validar no sea superior a los 3 caracteres. Si todo está en orden entonces pasará la tarea al siguiente. Por lo que necesitaremos otro eslabón.

var charMax = chainBase.extend(function () {
this.super();
this.validate = function (value) {
if (value.length > 10) {
throw "Es muy largo";
}
this.goNext(value);
};
});

Este verificará que el largo no supere los 10 caracteres y si todo está bien, pasará al siguiente eslabón.

Podremos crear tantos validadores como creamos necesarios y luego enlazarlos.


var a = new charMin(),
b = new charMax();
a._next = b;
a.validate('abcd');


Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.551 seguidores