Professional Documents
Culture Documents
The JavaScript Cheese Is Moving Data-Oriented Vs Control-Oriented Programming
The JavaScript Cheese Is Moving Data-Oriented Vs Control-Oriented Programming
The JavaScript Cheese Is Moving Data-Oriented Vs Control-Oriented Programming
Page 1 of 3
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.
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.
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
Terms of Use
http://weblogs.asp.net/dwahlin/archive/2012/07/27/The-JavaScript-Cheese-is-Moving_3... 8/3/2012