Cette page n'est pas disponible en français. Veuillez-nous en excuser.

ABIS Infor - 2016-02

Angular JS

Gie Indesteege (ABIS) - February 26th 2016

Abstract

The internet application world is evolving at fast speed. In the early 90ties only static content, defined via basic HTML pages, was possible. Each hyperlink request transferred a new page to the user. Adding more dynamic features started with the advent of Java applets, and later on with the support of JavaScript. Actual web applications are built on frameworks that support asynchronous interaction between client and server, using a lot of technologies. One of them is called Angular JS.

From static to dynamic web pages

When you want to add more dynamic capabilities to your web site, you can choose for a client based solution. This means that you are going to enhance the static HTML with dynamic features, that are interpreted by the local web browser (Firefox, Chrome, Internet Explorer, Safari, ...).

For example, JavaScript allows for a nice pop-up message, if you click on the corresponding widget: 

	<button onclick="sayHello()">OK?</button>
	<script>
	function sayHello() {
	    window.alert("Welcome to JavaScript");
	}
	</script>

JavaScript will be driven by a JavaScript engine, started up in the browser, and controlling the local page 'presentation'.

The writing of JavaScript can be enhanced by means of so called JavaScript libraries, that add nice functionalities in an easy way. Well known examples of libraries include JQuery, Dojo, or VelocityJS. (ref 1.)

Other (plug-in based) technologies are/were

  • Java Applets, controlled by a local Java Virtual Machine.
  • Adobe Flash, controlled by a local Flash Player
  • Microsoft ActiveX, controlled by a ActiveX Host or Control

Because of possible security risks, the plug-in technology (based on the Netscape Plugin Application Programming Interface (NPAPI) - will no longer be supported by browsers in the future. Also ActiveX is no longer provided in the Microsoft Edge browser.

Enhancing the dynamic behaviour of your web pages is also possible with the new HTML5, for instance to play interactive content without using plug-ins.

All these solutions are rather page oriented, regarding content, layout and local behaviour.

Responsive web?

But if you need server side information, prepared in a dynamic way, you have to choose a more integrated solution framework. Traditional solutions are based on e.g. Java EE frameworks like JSF (Java Server Faces) or Microsoft .NET ASP (Active Server Pages). Both are based on a "call and response" arrangement, where the client sends a backend request and waits for the result, or synchronous communication.

With the introduction of the XMLHttpRequest, used by AJAX (ref. 2), asynchronous communication became possible. Users do not have to refresh their web page or send themselves a new request to the server side.

Modern frameworks rely on asynchronous communication, but add additional features to offer full-fledged application oriented solutions. Important features include:

  • management of user interactions, dealing with browser incompatibilities
  • management of data, e.g. synchronisation and access to data stores or data bases
  • code management, including test and deployment

Here comes Google's AngularJS, and to be even more actual Angular 2 (ref. 3), into the spotlight. The framework is aimed at developing modern applications:

  • Mobile apps come first: efficient, user friendly, performant
  • prepared for Web Components: reusable widgets in web documents, that render in the browser
  • using Dependency Injection: code blocks are managed throughout the entire application
  • optimized routing: based on the URL request
  • supporting new standards: TypeScript, ECMAScript6, HTML5, CSS3

Angular defines components to display and control data. Each component (a JavaScript class) supports a "view" - part of the screen - and controls the associated data "model" (Do you remember the "good old" MVC paradigm?). Coordinated components make use of services to form an application. Components can be gathered in containers, called "modules".

The client side (browser) JavaScript engine of AngularJS controls/executes these application components, in order to render a nice presentation to the user, and to interact with the backend. To that end, the engine works closely together with the back-end runtime of Node JS which is event-driven server side based. Other elements can also be added to "complete" the application, e.g. Express JS as a backend web application framework, or MongoDB as a NoSQL DB (ever heard of the MEAN stack?).

Together, all these technologies and pieces allow for responsive web-based applications, used by a plethora of different (mobile or desktop) devices.

Conclusion

We tried to introduce the building blocks of (and also the rational behind) a modern web application framework called AngularJS. The mobile world is expanding very fast, and needs new possibilities for developing applications quickly. AngularJS is one of the upcoming environments to support this demand.

References

  1. List of JavaScript Libraries: https://en.wikipedia.org/wiki/List_of_JavaScript_libraries
  2. Asynchronous JavaScript and XML: https://en.wikipedia.org/wiki/Ajax_(programming)
  3. Angular 2: https://angular.io/