Una de las dificultades en el momento de empezar a implementar una aplicación es saber qué frameworks se van a utilizar. Hoy en día existen muchos frameworks que están destinados a la misma utilidad, algunos con más funcionalidades que otros. Es por este motivo que hay que tener especial cuidado al elegirlo. En este post voy a hablar de los frameworks de javaScript más utilizados para el data-binding.

Data-binding es el proceso que establece una conexión entre la UI y la lógica de negocio. Cuando una variable se modifica desde la UI, el modelo de negocio se actualiza automáticamente y viceversa.

El planteamiento de este post, es el de una comparativa entre las diferentes librerías mas famosas: AngularJs, KnockoutJs, BackboneJs y EmberJs, que además de ofrecernos data-binding nos pueden ofrecer otras utilidades. Antes de empezar tengo que aclarar que cada uno tiene sus ventajas y desventajas; la experiencia, y el tiempo que se alargue un proyecto, sumado a otros factores se deberán tener en cuenta en la elección del framework.

En la descripción de cada framework, se detalla un ejemplo de implementación de un pequeño «Hello World», para que el lector pueda visualizar de una forma un poco más clara, las diferencias y particularidades de cada uno de los frameworks.

BackboneJs:

Backbone es una librería muy pequeña y tiene una única dependencia (Underscore.js), la curva de aprendizaje es muy pequeña, ya que conociendo un poco Jquery se puede empezar a trabajar, además está pensado para proyectos pequeños o medianos ya que con la poca lógica que tiene detrás, es muy fácil mantener el control de nuestra aplicación. Permite realizar routing de una forma rápida y sencilla.

html:

<form id=»edit-form»>

first name: <input id=»first_name» type=»text»><br/>

</form>

<br/>

Hello

js:

SimpleSample = {};

SimpleSample.Person = Backbone.Model.extend({});

SimpleSample.FormView = Backbone.View.extend({

el: «#edit-form»,

initialize: function(){

Backbone.ModelBinding.call(this);

}

});

SimpleSample.DisplayView = Backbone.View.extend({

el: «#display»,

initialize: function(){

Backbone.ModelBinding.call(this);

}

});

SimpleSample.App = function(){

this.start = function(){

var person = new SimpleSample.Person();

var formView = new SimpleSample.FormView({model: person});

var displayView = new SimpleSample.DisplayView({model: person});

}

$(function(){

var app = new SimpleSample.App();

app.start();

})

AngularJs:

Con Angular, que es una librería sin dependencias que ofrece más posibilidades, la curva de aprendizaje es más pronunciada, por lo que implica perder tiempo en aprender cómo funciona y aplicarla a nuestro proyecto. Con Angular se tarda mucho más en desarrollar en un principio, pero permite ahorrar mucho tiempo de implementación y líneas de código. La imagen que se adjunta, detalla de una forma divertida las diferentes fases a las que se enfrenta alguien que desarrolla un proyecto con AngularJS a lo largo del tiempo. Al igual que Backbone permite implementar routing. Como punto negativo, la integración de «third parties» es complicada.

html:

Write your name:

Hello {{ sometext }}

KnockoutJs:

Una de las ventajas que presenta KnockoutJs es que no tiene ninguna dependencia. La integración «third parties» es fácil y cómoda. A diferencia de las librerías anteriores, no se puede implementar routing directamente, pero gracias a otras librerías sí que es posible. Knockout no proporciona ninguna herramienta para el testing, pero una vez más, gracias a su Third Party Integration se suple esta carencia, por ejemplo, con SinonJS. Una de las características más importantes de Knockout es que permite crear nuevos bindings aparte de los que ya incorpora en su librería.

html:

First name:

Hello

js:

var ViewModel = function() {
this.firstName = ko.observable(«»);
};

ko.applyBindings(new ViewModel());

EmberJs:

Ember, al contrario que Knockout y Angular, sí que presenta dependencias: HandleBars y JQuery. La integración de third parties es posible, aunque más compleja que con otras librerías aquí descritas como Backbone y Knockout. También proporciona routing, aunque es complejo de implementar, y herramientas para testing.

html:

your name: {{view Ember.TextField valueBinding=»App.appsController.name»}}

Hello {{App.appsController.name}}

js:

App = Ember.Application.create();

App.appsController = Ember.Object.create({

name: «»

});

Conclusiones:

Si bien es verdad que la elección de un framework depende de muchos factores, como por ejemplo los requerimientos funcionales del proyecto o las limitaciones técnicas del mismo (además, por supuesto, de elecciones de tipo personal), como conclusión de lo expuesto en este artículo, me quedo con 2 de los framworks:

KnockoutJS: Dada la posibilidad de crear nuevos Bindings aparte de los que ya existen por defecto, por su facilidad de la integración de Third Party y por su sencillez de comprensión e implementación, queda como uno de los vencedores de la comparativa.
AngularJS: Mención especial ya que actualmente es uno de los frameworks más utilizados en todo el mundo para la realización de SPA’s y por ser uno de los mejores documentados que hay actualmente en el mercado (ligado a su gran popularidad), lo que resulta de gran utilidad a la hora de solucionar problemas que puedan aparecer en la implementación.

Para finalizar, aparte de los frameworks aquí mencionados, ha aparecido en escena un nuevo framework llamado Aurelia, que hereda muchas bondades aquí descritas y que está adquiriendo muchísima popularidad en muy poco tiempo, lo que auspicia que ha llegado para quedarse mucho tiempo entre nosotros, lo cual es una gran noticia ya que nos proporciona otra herramienta más con la que poder llevar a cabo nuestros desarrollos de una manera sencilla y efectiva.

Más información:

Irene Carchano es ingeniera superior en informática por la Universidad Autónoma de Barcelona. Entró en Sogeti España en julio de 2014 como programadora junior.