Client side scripting (Javascript) & Its Evolution in Web Application Development

Client-side scripting, like JavaScript, can be embedded into the page on the client’s browser. This script will allow the client’s browser to alleviate some of the burden on your web server when running a web application. Client-side scripting is source code that is executed on the client’s browser instead of the web-server, and allows for the creation of faster and more responsive web applications.

The Need for Client-Side Scripting

As web applications become more and more powerful and sophisticated, it is expected that they function and act just like a windows application. The basic architecture for a web application is that most of the source code and assemblies reside and are processed on a web server. The sole task of a web server is to accept incoming HTTP requests and to return the requested resource in an HTTP response. There is never a continuous live connection between the client’s browser and the web server. Web pages will always be in the form of HTML.

Client-side scripting (embedded scripts) is code that exists inside the client’s HTML page. This code will be processed on the client machine and the HTML page will NOT perform a PostBack to the web-server. Traditionally, client-side scripting is used for page navigation, data validation and formatting. The language used in this scripting is JavaScript. JavaScript is compatible and is able to run on any internet browser.

The two main benefits of client-side scripting are:

• The user’s actions will result in an immediate response because they don’t require a trip to the server.
• Fewer resources are used and needed on the web-server.

There are several JavaScript frameworks available which are very useful have become essential today for any advanced web programming. Here we are briefing few of the widely used JavaScript frameworks:

AngularJS: an open-source web application framework maintained by Google and a community of individual developers and corporations that aims to simplify both development and testing of singe-page applications. Angular uses an MVC framework, along with components commonly used in rich internet applications.

Backbone.js: a lightweight JavaScript library with a RESTful JSON interface, Backbone is based on the MVP and Actor model application design paradigm and is designed for developing single-page web applications.

Capuccino: an open source application development framework for developing web applications that look and feel like Mac OS X desktop applications. Cappuccino consists of two distinct components: the Objective-J programming language, and an object-oriented library that is the Objective-J port of several Cocoa frameworks.

D3.js: a JavaScript library using digital data to drive the creation and control of dynamic and interactive graphical forms running in web browsers. D3 is a tool for data visualisation in W3C-compliant computing, and makes use of the widely implemented SVG, JavaScript, HTML5, and CSS3 standards.

Echo: a platform for building web-based applications using a component-oriented and event-driven API. Developed by NextApp, Echo helps to build applications that approach the capabilities of rich clients.

Ember.js: an open-source client-side JavaScript web application framework based on MVC patterns. Ember allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, and automatically-updating templates powered by HTMLBars.

Ext JS: a pure JavaScript application framework for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting. Ext JS was originally built as an add-on library extension of YUI, and includes interoperability with jQuery and Prototype.

Google Web Toolkit: an open source development toolkit created by Google, GWT allows web developers to build and maintain complex JavaScript front-end applications in Java.

Handlebars: a semantic web template system, started by Yehuda Katz of Ember.js. Handlebars is a superset of Mustache, and can render Mustache templates in addition to Handlebars templates. Handlebars adds extensibility and minimal logic., distinguishing it from Mustache, a logicless templating language.

JavaWebToolkit: an open source widget-centric web application framework for Java. JWT aims to benefit from the stateful component model used in desktop applications APIs, applied to web development, instead of the traditional MVC model. Instead of using MVC at the level of a page, MVC is pushed to the level of individual components.

jQuery: an open source cross-platform library, jQuery is designed to simplify the client-side scripting of HTML. jQuery is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

Kinetic.js: an HTML5 Canvas JavaScript framework, Kinetic extends the 2d context by enabling high performance event detection for desktop and mobile applications. While active development, it has been forked as Konva.js.

Kendo UI: an HTML5, jQuery-based framework for building web apps. Kendo features various UI widgets, including a rich data visualization framework, an auto-adaptive mobile framework, and tools for HTML5 app development, such as data source, templates, MVVM, drag-and-drop component.

Knockout: an open source, standalone JavaScript implementation of the MVVM pattern with templates. Knockout features Declarative bindings, Automatic UI refresh, Dependency tracking and Templating.

MooTools: an open source lightweight, object-oriented, JavaScript framework. MooTools aims to take advantage of the flexibility and power of JavaScript in a way that emphasises greater modularity and code reuse.

ReactJS: an open-source JavaScript library for creating user interfaces. React is maintained by Facebook, Instagram and a community of individual developers and corporations, and aims to address challenges encountered in developing single-page applications.

Rialto: a cross browser Ajax-based JavaScript widgets library that aims to ease the access to Rich Internet application development to corporate developers.

Socket.IO: a JavaScript library for realtime web applications. SocketIO enables realtime, bi-directional communication between web clients and server, and consists of a client-side library that runs in the browser, and a server-side library for node.js.

Underscore.js: a JavaScript library which provides utility functions for common programming tasks. While Underscore is similar in features provided by Prototype.js and the Ruby language, it instead opts for a functional programming design instead of extending object prototypes.

Durandal: a lightweight JavaScript framework that aims to make building SPAs simple and elegant. Coming with strong support for MVC, MVP and MVVM, Durandal is on built on libs like jQuery, Knockout and RequireJS.

Aurelia: An open source next-generation JavaScript client framework. Written with vanilla ES6 and ES7, Aurelia is transpiled and polyfilled to work on today’s Evergreen browsers

Meteor: An open-source real-time JavaScript web application framework written on top of Node.js. Meteor allows for very rapid prototyping and produces cross-platform (web, Android, iOS) code.

While all the above are great JavaScript framework, AngularJS is gaining lot of importance because of few unique reasons:

• An All-star backing of Google, as it is maintained by Google and deployed in Google’s own products.
• Enables a new breed of complex single-page applications (SPA) that act more like desktop or mobile apps. These next-generation SPAs are easy to spot: When you click on links and buttons, the page doesn’t reload.
• AngularJS uses the MIT license, an extremely permissive and popular proprietary software license. This license allows reuse within proprietary software, and is GPL-compatible, meaning developers have a lot of freedom with the code.
• AngularJS was written with testing in mind, and even comes with built-in testing libraries. Using these libraries, your developers can mimic user behaviors in automated tasks (such as clicking buttons).
• AngularJS is leading the charge for sophisticated browser-based applications that behave more like native apps.