Declarative Programming in JavaScript Environments for App Development

by Zymr

Share It

Programming in JavaScript Environments for App Development


The recent emergence of declarative programming in JavaScript environments is largely due to the interpretive. Therefore, the lexical analysis and tokenizing capabilities were built into JavaScript. (JavaScript currently is in Edition v5.1, June 2011).

Declarative vs Procedural Programming

In declarative programming, the programmer instructs the computer on what is to be computed; how it is computed is determined by the underlying programming infrastructure. In procedural programming, the programmer has a significant focus on the how as well.

Declarative –> What
Procedural –> How

Both declarative and procedural programming are complementary approaches. It is often convenient for the programmer to specify the what and let the infrastructure supply the how. Other times, it is important for the programmer to be specific about how the algorithm must be executed.

Much of the modern web programming involves manipulation of the Document Object Model (DOM) of any web page. From the Worldwide Web Consortium (W3C) web page What is the Document Object Model?, we see:

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.

However, the front-end, i.e., browser-based, portion of the web application is so large that app development becomes impractical by manipulating individual DOM elements. A declarative approach is more useful for web application development.

Empower your business by developing interactive and intuitive appsCONTACT US

There are a whole host of modules that have sprung up in recent years to enable declarative programming in JavaScript, and the following are a select few:

  1. Angular.js
  2. d3.js
  3. Polymer.js

Declarative Approach in Angular.js

The approach taken by Angular.js is best understood by the zen of Angular, excerpted from the official Angular.js web site:

Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.

  • It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code.

  • It is a really, really good idea to regard app testing as equal in importance to app writing. Testing difficulty is dramatically affected by the way the code is structured.

  • It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.

  • It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.

  • It is always good to make common tasks trivial and difficult tasks possible.

A key characteristic of Angular.js are the concepts of templates, directives and expressions that can be declaratively associated with DOM elements to produce dynamic behavior suitable for the application. Angular.js has a good number of built-in directives built that can be embedded in an HTML page; and, you can also create your own custom directives too, as described in the Angular.js Developer Guide. In the example below, ng-model, ng-bind and their variants, and ng-controller are all built-in directives:


<script src=""></script>


<div ng-controller="Controller">
 Hello <input ng-model='name'> <hr/>
 <span ng-bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>

The result of the above program is also given in the Developer Guide.

[See Also: Using AngularJS Directives for Product Development]

Declarative Approach in d3.js

d3.js enables rendering of complex visualizations by a sequence of declarative statements regarding the various objects to be visualized. Many examples are available at Data Driven Documents – Examples. Basically, you define a data structure, either statically or through some real-time dynamic feed, declare the visualization you’d like to see, and off you go. The economy of declaratively instructing the computer, through d3.js, is exemplified by the following excerpt from the front page of the web site, on how to render all paragraph elements in white color:

Normal, procedural, JavaScript:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
 var paragraph = paragraphs.item(i);"color", "white", null);

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

d3.selectAll("p").style("color", "white");

D3.js has a module for angular.js so that complex declarative programming using d3.js can be accomplished in the angular.js environment.

Declarative Approach in Polymer.js

Polymer.js enables the programmer to create custom elements, thus extending the element vocabulary present in the standard definition of HTML5, useful for custom application development.

Perhaps a good example of the power of Polymer.js is the manner in which tabs are constructed without Polymer.js, excerpted from Google engineer Rob Dodson’s slides online:


With custom-created elements in Polymer.js, such as x-tabs and x-tab, one could easily program the tabs thus:

Polymer Yahoo.png

Look at the simplicity of the programming!

[See Also: Python Logging for Software Development Services]

Concluding Remarks

Declarative programming is one of the tools available to the software engineer or programmer in crafting the proper solution to a given problem. In addition to providing economy of expression, there is inherent strength to the logic created: A declarative approach conveniently follows an oft-tread logical path which will have been proven in its usage; the key consideration a programmer has to give is to assess the suitability of the solution to the problem at hand.

Everything you need to know about outsourcing technology development
Access a special Introduction Package with everything you want to know about outsourcing your technology development. How should you evaluate a partner? What components of your solution that are suitable to be handed off to a partner? These answers and more below.

Introduction Package

We understand your app needs.CONTACT US

Leave a comment

Your email address will not be published.

Let's continue the conversation!

    Please prove you are human by selecting the Truck.