FreshCutDevelopment Blog

4 out of 5 dentists recommend this WordPress.com site

Month: August, 2012

What’s all this about ECMAScript 5?

ES5 is coming. With the majority of modern browsers supporting a large portion of the ES5 specification it is time to take a look at what this enhanced specification has to offer us as web developers. In large part the ES5 specification improves our ability to safely write large scale web applications by enhancing our ability to constrain what can be done with our objects at run time. As developers have moved from using JavaScript as a scripting language for adding UI widgets as an afterthought to their websites at the end of a development project, toward an increasing focus on rich client side user actions a requirement to bring safety features and constraints to the language has arisen.

Locking Down our Objects

The following features have been added to JavaScript with ES5 to allow us to lock down our objects, preventing them from being manipulated at run time when the need for this is identified:

Accessors

Accessors allow us to configure various attributes of object properties such as whether the property is read only or enumerable. Full detail of what attributes are available for configuration when defining properties using accessors can be found on the Mozilla developer network. An example of when this would be useful is if you had a Person object in your application, who needed to be created with a date of birth. Of course a persons date of birth should not be modifiable after a person as been created. In this case the date of birth could be initialised into a read-only property to prevent modification for the lifetime of the application.

An example of defining a read-only property accessor with a value of 13, which may not be enumerated can be found below:

Code Sample

var o = {};

Object.defineProperty(o, "a", {value : 13,
writable : false,
enumerable : false});

Getters and Setters

JavaScript finally has getter and setter support built in. Some of the great things that  this allows us to do are as follows:

  1. The example above where we wish to constrain the date of birth for our person object to be read-only can also be achieved by defining a DateOfBirth property with a get accessor only.
  2. The functionality related to getting or setting the property values can be encapsulated.
  3. Calls to getters and setters may be intercepted by frameworks to achieve all manner of wild and wonderful things. An example of this is eventing. We could wire an event to update a related DOM element when a property value is set implementing our own basic version of the functionality that frameworks such as KnockoutJS provide.
  4. Much much more…

Code Sample

var person;

Object.defineProperty(person, "Age", {
get : function(){ return bValue; },
set : function(newValue){ bValue = newValue; }
});

Object.Seal

The new Object.Seal method prevents methods/properties from being added or removed from an object at runtime. Values of properties may still be modified when an object has been sealed. This can be useful when you want to ensure that your object is used in the way that it was designed. Read more…

Code Sample

var sealedPerson = Object.seal(person);

Object.Freeze

The Object.Freeze method renders an object completely immutable. This means that no values may be modified on this object, and no properties or functions may be added or removed at run time. Immutability of objects allows developers to reason about the code that they write in ways that are not possible when objects are mutable. A later post will discuss the pros and cons of immutability in more detail.

Code Sample

var frozenPerson = Object.freeze(person);

Object.PreventExtensions

This method provides similar benefits to the seal function in that methods may not be added to an object at runtime when extensions have been prevented. However counter sealed objects non-extendable objects may have their properties dynamically removed at runtime.

Code Sample

var nonTrainablePerson = Object.preventExtensions(person);

That sums up the overview of the ES5 offerings for locking down our objects. Still to come on further blogs are the various enhancements added to other areas of the JavaScript language.

Advertisements

KnockoutJS

Elevator Pitch 

KnockoutJS is an MVVM framework for the web designed to simplify the process of creating web pages with rich user interactions. This is achieved by a model binding system analogous to the way XAML based MVVM frameworks in the .NET space.

KnockoutJS Utility Belt (Tool 1) – Simple Model Binding

Knockout uses a simple template based ViewModel binding system to wire up various parts of your UI and keep them in sync. As demonstrated below:

Le Template..

<h1>Hello <data-bind="text: name"></h1>
Name:<input type="text" data-bind="value: name"/>

Le binding code…

// wires up the 'name' property of
//our ViewModel into the
//Knockout binding system
function SampleViewModel() {
this.name = ko.observable("");
}

// Activates knockout.js binding system
ko.applyBindings(new SampleViewModel());

The above code  specifies a template using the HTML5 ‘data-‘ attribute to create a binding to the name property of the ViewModel defined at the end of the code snippet. Updating a value in the text box causes a corresponding update in the heading text. This is a toy example of Knockouts model binding capabilities. Coming tutorials will delve into the inner workings of the binding system and flex them in a more compelling set of scenarios.

Getting a start in blogging

A recent post by Scott Hanselman has finally convinced me that I need to get a start in the pursuit of blogging. The aim of this blog is to provide an online source of information on technological topics along with other miscellaneous endeavours.

I will try to post a brief overview of each new topic that I learn. The aim of this is two fold, firstly to provide a short overview on the various topics covered to readers, and secondly to save the information for future referral.

That brings the first post to an ending point. We’ll see whether the initial momentum can be maintained…