JavaScript Data Binding Frameworks

Posted by dwahlin on ASP.net Weblogs See other posts from ASP.net Weblogs or by dwahlin
Published on Sun, 08 Jul 2012 23:17:00 GMT Indexed on 2012/07/09 21:16 UTC
Read the original article Hit count: 990

Filed under:
|
|
|
|
|
|
|
|

Data binding is where it’s at now days when it comes to building client-centric Web applications. Developers experienced with desktop frameworks like WPF or web frameworks like ASP.NET, Silverlight, or others are used to being able to take model objects containing data and bind them to UI controls quickly and easily. When moving to client-side Web development the data binding story hasn’t been great since neither HTML nor JavaScript natively support data binding. This means that you have to write code to place data in a control and write code to extract it. Although it’s certainly feasible to do it from scratch (many of us have done it this way for years), it’s definitely tedious and not exactly the best solution when it comes to maintenance and re-use.

Over the last few years several different script libraries have been released to simply the process of binding data to HTML controls. In fact, the subject of data binding is becoming so popular that it seems like a new script library is being released nearly every week. Many of the libraries provide MVC/MVVM pattern support in client-side JavaScript apps and some even integrate directly with server frameworks like Node.js. Here’s a quick list of a few of the available libraries that support data binding (if you like any others please add a comment and I’ll try to keep the list updated):


image
AngularJS

MVC framework for data binding (although closely follows the MVVM pattern).

image
Backbone.js

MVC framework with support for models, key/value binding, custom events, and more.

image
Derby

Provides a real-time environment that runs in the browser an in Node.js. The library supports data binding and templates.

image
Ember

Provides support for templates that automatically update as data changes.

image
JsViews


Data binding framework that provides “interactive data-driven views built on top of JsRender templates”.

image
jQXB Expression Binder

Lightweight jQuery plugin that supports bi-directional data binding support.

image
KnockoutJS

MVVM framework with robust support for data binding. For an excellent look at using KnockoutJS check out John Papa’s course on Pluralsight.

image
Meteor

End to end framework that uses Node.js on the server and provides support for data binding on  the client.

image
Simpli5

JavaScript framework that provides support for two-way data binding.

image
WinRT with HTML5/JavaScript

If you’re building Windows 8 applications using HTML5 and JavaScript there’s built-in support for data binding in the WinJS library.

 

I won’t have time to write about each of these frameworks, but in the next post I’m going to talk about my (current) favorite when it comes to client-side JavaScript data binding libraries which is AngularJS. AngularJS provides an extremely clean way – in my opinion - to extend HTML syntax to support data binding while keeping model objects (the objects that hold the data) free from custom framework method calls or other weirdness. While I’m writing up the next post, feel free to visit the AngularJS developer guide if you’d like additional details about the API and want to get started using it.

© ASP.net Weblogs or respective owner

Related posts about .NET

Related posts about databinding