The impressive growth of JavaScript

Over the past decade, digital engineers have adopted a healthy respect for JavaScript as a programming language. Despite its many shortcomings, developers have learned to write modular applications that truly exploit the functionality of this programming language, which executes inside web browsers and servers universally. The framework that eventually changed the game was something called jQuery. It was then written by John Resig in order to simplify the client-side scripting of HTML in JavaScript. Released in 2006, it is the most popular framework in the JavaScript library today.

The greatest innovation in jQuery was the selector engine called Sizzle that allowed JavaScript programming to filter out the DOM elements by declarations, allow traversal, and perform algorithm through a type of collection comprehension. It introduced a new direction for JavaScript development.

It is not just jQuery that has been driving JavaScript. In truth, the progress can be tracked back to the re-discovery of AJAX techniques and the emergence of several competing frameworks such Script.aculo.us and Prototype.

The following is an example of a JavaScript code that uses jQuery:

var xenonique = xenonique || {}

xenonique.Main = function($) {
    // Specifies the page marker ID
    var siteNavigationMarker = '#navigationMarker';

    var init = function() {
      $(document).ready( function() {
        $('#scrollToTheTopArrow').click( function() {
        $('html, body').animate({
                scrollTop: 0
            }, 750);          
        })      
      })
    }

    var oPublic = {
       init: init,
        siteNavigationMarker: siteNavigationMarker,
    };

    return oPublic;
}(jQuery);

Please do not worry if you are struggling to understand the preceding code and certainly do not run away from this piece of JavaScript. The code shows the modern idiom of developing JavaScript in a good, reliable, and maintainable way without using global variables. It perfectly illustrates the module technique of keeping the JavaScript variables and function methods inside an enclosing scope. Scope is the most important item to understand in JavaScript programming.

The preceding JavaScript code creates a namespace called xenonique, which exists in its own scope. We make use of the Module Pattern to create a module called Main, which depends on jQuery. There is a method defined called init(), which executes a jQuery selector with an anonymous function. Whenever the user clicks on the HTML element with the ID #scrollToTheArrow, the web page scrolls the top automatically in 750 milliseconds.

The JavaScript module pattern

The critical technique in this code, as elaborated by Douglas Crockford in his seminal book, JavaScript: The Good Parts, is to create a module that acts like a singleton object. The module is invoked by the interpreter immediately because of the parameter argument statement at the end of the declaration, which relies on a jQuery instance.

Let's simplify the module for effect:

var xenonique = xenonique || {}

xenonique.Main = function($) {
    /* ...a */
    return oPublic;
}(jQuery);

The module xenonique.Main in the preceding code is actually a JavaScript closure, which has its own scope. Thus, the module pattern simulates the private and public members and functions. The return value of the closure is an object that defines the publicly accessible properties and methods. In the module, the init() method and the siteNavigationMarker property are publicly accessible to other JavaScript variables. Closure is preserved in the return object with the JavaScript execution context and, therefore, all private and public methods will exist throughout the lifetime of the application.

JavaScript advanced libraries

For some engineers, writing custom JavaScript, even around a jQuery selector, is too detailed and low-level. AngularJS is an example of a JavaScript framework that takes the evolution of client-side programming further along its trajectory. AngularJS notably features two-way data binding of the DOM elements declaratively to each other or to the JavaScript module code. The creators of AngularJS intended to bring the Model-View-Controller (MVC) design pattern and the separation of concerns to web application development, as well as inspire behavior driven-design through a built-in testing framework.

AngularJS (http://angularjs.org/) is one of the highlights of the new modern movement in JavaScript. Whilst there is a JavaScript library being invented every week, it seems, the standouts in the professional development life also include GruntJS, Node.js, RequireJS, and UnderscoreJS.

GruntJS (http://gruntjs.com/) is particularly interesting, as it works like Make in C or C++ and Maven or Gradle in the Java space. Grunt is a JavaScript task management system and it can build applications, execute unit tests, compile Sass and LESS files to CSS, and perform other duties with the resources. It can also invoke utilities that will compress JavaScript using a process called minification, and optimize them into ugly (hard-to-reverse-engineer) files for both speed and some degree of security.

Note

Sass (http://sass-lang.com/) and LESS (http://lesscss.org/) are CSS preprocessors used by designers and developers. These tools transform reusable common-style configurations into specific device and site style sheets.

For a new digital engineer, I think you will, perhaps, find this discussion overwhelming. So I will summarize it in the following table:

JavaScript Item	Description
jQuery	The most important open source JavaScript library for manipulating the DOM and for selecting elements by ID and name. It has a very popular plugin architecture with many products on offer. http://jquery.org/
jQuery UI	This is a popular plugin that extends the standard jQuery, and adds additional animations, customizable themes, and UI components including a date calendar picker. http://jqueryui.org/
RequireJS	A dependency management framework of a JavaScript file and modules loader. This framework has the ability to optimize bundles of modules for larger applications, especially through Asynchronous Module Definition API. http://requirejs.org/
Nashorn	A JavaScript runtime engine built by Oracle and shipped as standard with Java SE 8. Nashorn runs on the JVM, it is open source, and a part of the OpenJDK project. http://openjdk.java.net/projects/nashorn/
Dojo Toolkit and microkernel architecture	A refactored JavaScript modular framework and toolkit full of widget components. It makes use of AMD for fast download speed and the efficiency of modules to only load what is necessary for the client-side application. Dojo Toolkit has useful graphs and visualization components. http://dojotoolkit.org/
Ember JS	Ember is a framework for building client-side web applications. It uses JavaScript for invoking the templates to generate page content. Ember is aimed at the mobile developers who want to compete with native applications. The framework makes use of the Handlebars templating library. http://emberjs.com/
Handlebars JS	Handlebar is a JavaScript templating library for client-side web applications. The templates, on first examination, resemble HTML with the addition of the expressions tokens. Those familiar with AngularJS will see that the expressions are very similar in syntax. http://www.handlebarsjs.com/
Underscore JS	This is a JavaScript developer library that brings functional programming ideas and constructs into the language through an API. It has over 80 library helpers that include methods like select, map, flatMap, filter, reduce, forEach, and invoke. http://underscorejs.org/
Backbone JS	A JavaScript Framework that adds a modeling aspect to the client-side applications. It provides models with key-value binding to DOM and custom application events. Models and collections can be saved to the server. Backbone also provides views with declarative data binding. In many ways, this framework is seen as a viable competitor to AngularJS. http://backbonejs.org/
Angular JS	AngularJS is a JavaScript framework that provides two-way data binding between the DOM elements and custom JavaScript module code. It has a Model-View-Controller architecture and also provides support for custom HTML components through a feature called directives. Angular JS is also strongly supported by the developers who currently work at Google, and therefore, it is a famous JavaScript framework. Its strength lies in single-page web applications and declarative programming. http://angularjs.org/

As you can see, there are a lot of challenges to face if you happen to work with front-end (interface developer) engineers versed in many of the above technologies. An enterprise Java or server-side engineer has to be aware of other peoples' skill sets. (See the worker roles in Appendix C, Agile Performance – Working inside Digital Teams).