Usar knockoutjs después de odiar angular

Angular y knockout son frameworks javascript del tipo modelo vista controlador, con intención de limpiar y ordenar el código.  hace 2 semanas me vi en la penosa necesidad de hacer un refactor a 450 lineas de código javascript  para una interfaz web  que refrescaba bloques de datos y permitía interacciones sencillas.

Ya que no soy fan de hacer interfaces mi primer aventura fue usar jquery, específicamente  la función GetJson() y dentro de esta función  refrescaba algunos componente html usando mas jquery.

cuando termine la interfaz y vi el código; me dio tanto asco  lo poco ordenado que estaba y la cantidad de acciones repetidas que difícilmente podía abstraer en una sola función… Por primera vez decidí explorar alternativas para ordenar código en javascript.

 

Tenia varios nombres en mente, entre ellos Angular por ser de google. También tenia varias ideas de como quería que se viera el código:

  • Orientado a objetos, necesitaba poder tener objetos como: “notificación”, “equipo”, “comentario”, “columna de notificaciones”
  • Funciones que actuaran sobre los datos del mismo objeto desde el que se llamaban.
  • HTML limpio y con posibilidad de hacer foreach de forma fácil.
  • Usar apis con respuesta json y parámetros get.
  • Las funciones del framework anfitrión deben ser explicitas en su nombre.
  • Evitar anidar cosas.. odio anidar cosas.. (“¬¬)

 

Con esos puntos en mente empece a explorar angular quedando con muy mal sabor de boca tratando de hacer un experimento básico de modificar un div de forma externa desde múltiples lados

pensemos en una entidad notificacion donde una clase define su color y necesitamos que ese color cambie por N circunstancias entre dos clases  “leido|no-leido”.

tengo que admitir que el html se ve muy limpio, pero su contra parte javascript  puede presentar varios dolores de cabeza al querer modificar “leido”.  mas que nada por que muchos por no decir todos los tutoriales expresan el conjunto de variables de angular como diccionarios. En segundo lugar por la forma en que “funcion_cambiar_leido” deberá cambiar el valor leído de ese bloque especifico (recordando que podríamos tener al rededor de 200 bloques html  iguales). y para finalizar que pasa si necesito cambiar “leido” desde otra función que minuto a minuto cheque si  la notificación cambio de estado por otro evento en el backend.

¿tiene solución el problema? si… ¿la solución es lógica para un novato en javascript y puede encontrarla en menos de 1 día? no, al menos que tengas un guru de angular a un lado. pero no es mi caso.

 

Días mas tarde tomando un café con un amigo y platicando  mi necesidad de limpiar código este me recomendó knockoutjs  el cual cumple con la función mas básica de angular en forma mas fácil orientada a objetos.

 

 

Quede muy satisfecho con el código y su orientación a objetos  (a pesar de que javascript es muy sucio)  los métodos de knockoutjs son muy explícitos  “ko.observable()”  nos expresa mejor que es un valor  rastreado cuando cambia que el “$scope” de angular. Ademas si tenemos al objeto ya creado y guardado en un diccionario, podemos  decir  diccionario[‘id’].leido(‘nuevo valor’).

Por otro lado, su html es ligeramente mas sucio que angular. Pero es mas lógico usar los “data” de html que forzar a javascript a detectar los {{variable}} en el texto.

 

PD: y si, reduje de 450 lineas a 400 sin un montón de funciones anidadas y extrañas que jquery obliga a tener.

Martin Quinta

Crecí con una computadora desde el kinder. Empece a programar a los 14 y hoy, mas de una década después… realmente odio estar frente a una computadora. Pero programar es en lo que soy bueno, por lo tanto me desahogo en este blog mientras bebo cerveza artesanal y pienso en un mundo bonito donde Java no existe.

Facebook Twitter LinkedIn  

Entradas relacionadas:

Leave a Reply

Your email address will not be published. Required fields are marked *