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.
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.
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.
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.
@ 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.
All Ajax calls defined in service.js file.
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.
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.