Introduction

Modern Web Applications Architecture that is built on client side MVC framework and utilizing server side RESTful web services to provide desktop-like rich browser interfaces and leads to reusability, simplicity, extensibility, and clear separation of component responsibilities compare to traditional web application architecture.

Ajax (client side MVC) and RESTful Web services naturally fit with each other. They both leverage widely available Web technologies and standards such as HTML, JavaScript, browser objects, XML/JSON, and HTTP.

There is absolutely no need to buy, install, or configure any other major component to enable effective interaction between Ajax front ends and RESTful Web services. RESTful Web services provide Ajax with a very simple API to deal with the interactions with resources on the server.

Challenge

Advances in client-side technologies are driving changes in the role of today’s web application server.

Android, iOS and purely browser-based clients are powerful computing platforms in their own right. Their success has led to a reevaluation of ‘classic’ web applications.

Client side MVC frameworks, such as Angular, Backbone, Ember, Ext, have been developed that enable client-side developers to build powerful and compelling UIs.

RESTful Web services have emerged as a promising alternative to SOAP-based services due to their simplicity, lightweight nature, and the ability to transmit data directly over HTTP.

The question that remains is how to design and implement these modern web applications.

This next section provides guidance for web application developers and architects wanting to learn how to incorporate browser-based clients into an existing service-based architecture.

Solution

Application software engineering team at eInfochips have implemented Modern Web Application Architecture which is also known as Single Page Application (SPA) solution for clients.

Single Page Application (SPA) is developed using AngularJS, Bootstrap and RESTful web service API. AngularJS was used mainly because of its smaller footprint (370k), large community support, responsive design and Google’s backing. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Below code snippets explains technical aspects of modern web application’s components (AngularJS and RESTful Web Service API) in brief.

Define AngularJS library, other JS files and index.html.

Index.JS

@ Line # 28, ng-app tag defines it as an AngularJS application and ng-controller tag defines the name of controller in this case “homeController”

App.js file is the main configuration file in AngularJS based application and contains all configuration information related to view mapping with controller.

app.JS

Controllers.JS

All Ajax calls defined in service.js file.

Services.JS

RESTful web services layer which is built upon spring framework. Services will be called from client through AJAX call from AngularJS code and presentation view will be updated dynamically.

Conclusion

To conclude, here is a summary of some of the key benefits of modern web application architecture which is also known as Single Page Application (SPA) implemented in AngularJS + RESTful web services by eInfochips team for clients.

• The AngularJS JavaScript based client-side MVC framework supports the rapid development of client-side applications. Rich user experiences can be easily implemented by HTML5 and JavaScript. This eliminates the need for server-side HTML rendering.
• Single Page Application based on client side MVC framework have ability to update particular portion of page dynamically without retrieving whole HTML page through AJAX call which will provide better user interaction and quick response from server as compare to the traditional web application.
• Flexibility in UI design is other major advantage of modern web application architecture where re-writing front-end with zero impact on the server aside from some static resource file. This will be helpful in deployments and version consistency of API.