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 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.
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:
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).