The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming -...

Page 1 of 3

The JavaScript Cheese is Moving: Data-Oriented vs.

Control-Oriented Programming
In a previous post I listed several of the JavaScript data binding frameworks that are available
and talked about why theyre essential as applications move more and more functionality to
the client. Data binding is a key aspect of client-centric programming that can significantly
minimize the amount of code written, simplify maintenance, and ultimately reduce the number
of bugs that crop up in an application. Without data binding you have to locate each control in
a page with code and then assign or extract a value to/from it something I call controloriented programming. Heres an example of control-oriented programming:

function loadApprovalDiv()
{
var subTotal = parseFloat($('#SubTotal').text());
$('#ClientSubTotal').val(subTotal.toFixed(2));
var salesTaxRate = parseFloat($('#SalesTaxRate').val()) / 100;
var salesTaxAmount = (subTotal * salesTaxRate) * .9;
var deliveryFee = parseFloat($('#DeliveryFee').val());
var adminFee = ((subTotal + salesTaxAmount + deliveryFee) * .05);
var total = (Round(subTotal) + Round(salesTaxAmount) + Round(deliveryFee) +
Round(adminFee));
$('#ClientTotal').val(total);
var deliveryAddress = $('#Delivery_Street').val();
//See if they entered a suite
if ($('#Delivery_Suite').val() != '') deliveryAddress += ', Suite ' + $('#Delivery_Suite'
deliveryAddress += ' ' + $('#Delivery_City').val() + ' ' +
$('#Delivery_StateID option:selected').text() + ' ' + $('#Delivery_Zip'
var data = {
FinalSubTotal : subTotal.toFixed(2),
FinalSalesTax : salesTaxAmount.toFixed(2),
FinalTotal
: total.toFixed(2),
DeliveryFee
: deliveryFee.toFixed(2),
AdminFee
: adminFee.toFixed(2),
DeliveryName
: $('#Delivery_Name').val(),
DeliveryAddress: deliveryAddress,
DeliveryDate
: $('#Delivery_DeliveryDate').val(),
DeliveryTime
: $('#Delivery_DeliveryTime option:selected').text(),
MainItems
: generateJson('Main'),
AccessoryItems : generateJson('Accessory')
};
$("#OrderSummaryOutput").html(
$("#OrderSummaryTemplate").render(data)
);
}

Looking through the code you can see that a lot of it is dedicated to finding controls in the page and extracting their
values. This works absolutely fine after all, many applications take this approach. However, when an application is
focused on controls and not on data a lot of extra code and plumbing ends up being written which complicates things
if control IDs are changed, new controls are added, or existing controls are removed. If you only have a few controls
thats not a big deal, but as the number of controls grows it becomes problematic. I think the cheese is definitely
moving when it comes to client-side programming and that the smart money is on building data-oriented applications
rather than control-oriented applications like the one above. Thats why were seeing more and more data binding
frameworks for JavaScript being released.

What is Data-Oriented Programming?

http://weblogs.asp.net/dwahlin/archive/2012/07/27/The-JavaScript-Cheese-is-Moving_3... 8/3/2012

The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming -... Page 2 of 3

I refer to applications that use data binding as being data-oriented (heres a previous post on that very topic) since
theyre focused on the actual data as opposed to writing code to access controls in a given page (control-oriented
as mentioned earlier). Ive built a lot of control-oriented applications over the years and found that making the
transition to building data-oriented applications definitely requires a different thought process. However, making the
move to building data-oriented applications is well worth the effort and ultimately results in better applications in my
experience. I think its especially important for client-centric applications built using JavaScript.
Although Im a big fan of jQuery, Ive started realizing over the past few years that when its used mainly to build
control-oriented applications (where jQuery is used to find controls, update values, extract values, etc.) a lot of
unnecessary code is being written that could be eliminated by using a data-oriented framework. jQuery absolutely
has its place in applications, but using it to build control-oriented applications isnt a good use of its functionality in my
opinion given some of the other options now available. Its great when you require low-level DOM access but not as
great when an application has a lot of CRUD operations going on. This probably sounds a bit controversial given the
popularity of jQuery (and to people who know Im definitely a huge jQuery fan), but when you understand what a data
-oriented application is and why its important, then using a data-oriented framework makes more sense for many
CRUD applications.

The Role of Data Binding

By using a data binding library/framework you can wire JavaScript object properties to controls and have the controls
and object properties update automatically (a process referred to as two-way binding) as changes are made on
either side without having to write control-specific code. This means that you dont have to write selectors to find
controls in the DOM and update them or grab values. If youve ever worked with application frameworks such as
Flex, Silverlight, or Windows Presentation Foundation (WPF) then youre used to this type of functionality and Im
willing to bet that you cant live without it. Data binding is addictive once you start using it.
With application frameworks like Flex or Silverlight the data binding engine is built-in so you use whatever the
framework gives you. The challenge in the JavaScript world is that there isnt simply one best data binding
framework to choose. Many different script libraries/frameworks are appearing on the scene with their own set of pros
and cons.
Im a big fan of data binding libraries such as KnockoutJS (my friend John Papa has an excellent course on
KnockoutJS if youre interested) but have been spending more and more time lately using a framework called
AngularJS and plan to write a series of posts on what it is and how it can be used in client-centric applications to
perform data binding, routing, Ajax functionality, validation, and much more when building data-oriented applications.
In the next post Ill provide a simple getting started example of using AngularJS for basic data binding (the post is
live now) and then follow-up with additional posts that provide more details on what AngularJS is capable of doing.
Until then, check out some of the data binding frameworks I wrote about previously if you want to get prepared for the
data-oriented application revolution thats coming.
Published Friday, July 27, 2012 3:52 PM by dwahlin
Filed under: .NET, JSON, jQuery, HTML5, JavaScript, jQuery Mobile, Databinding

Comments
# re: The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming
Sunday, July 29, 2012 11:58 PM by Jerrie Pelser
Looking forward to the Angular posts!
# re: The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming
Monday, July 30, 2012 1:55 AM by Sutikshan Dubey
Thanks Dan, I always find your blog entries very useful for our work. Yes, AngularJS is very intuitive and we are also
learning it. We will keenly wait for your AngularJS posts.
--Thanks Again :)
# JavaScript Data Binding with AngularJS ??? Getting Started - Dan Wahlin's WebLog
Monday, July 30, 2012 10:17 AM by JavaScript Data Binding with AngularJS ??? Getting Started - Dan Wahlin's
WebLog
Pingback from JavaScript Data Binding with AngularJS ??? Getting Started - Dan Wahlin's WebLog

http://weblogs.asp.net/dwahlin/archive/2012/07/27/The-JavaScript-Cheese-is-Moving_3... 8/3/2012

The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming -... Page 3 of 3

# re: The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming

Monday, July 30, 2012 11:12 PM by Jacks
I dont think Ive caught all the angles of this subject that the manner youve pointed them out.
Youre a true star, a rock star man. Youve got
so much to say and identify so much about that the subject that I think
you should just teach a class about it
# re: The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming
Tuesday, July 31, 2012 8:56 AM by Vijaya Malla
Loved the way you explained, getting interested in Angular now. Waiting for your second post.
# re: The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming
Tuesday, July 31, 2012 11:24 AM by Will
Really enjoyed the post, do these work with PHP at the server side?
# The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming - Dan Wahlin's
WebLog | Web tools and technologies | Scoop.it
Wednesday, August 01, 2012 11:27 AM by The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented
Programming - Dan Wahlin's WebLog | Web tools and technologies | Scoop.it
Pingback from The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming - Dan Wahlin's
WebLog | Web tools and technologies | Scoop.it
# Data Binding Frameworks « JavaScriptShadow
Thursday, August 02, 2012 12:14 PM by Data Binding Frameworks JavaScriptShadow
Pingback from Data Binding Frameworks « JavaScriptShadow
# Data Binding Frameworks « JavaScriptShadow
Thursday, August 02, 2012 12:16 PM by Data Binding Frameworks JavaScriptShadow
Pingback from Data Binding Frameworks « JavaScriptShadow

Terms of Use

http://weblogs.asp.net/dwahlin/archive/2012/07/27/The-JavaScript-Cheese-is-Moving_3... 8/3/2012