SPA with AngularJS

Introduction to SPA with AngularJS

We are going to introduce two concepts that have changed our perception about frontend web development: SPA and AngularJS. The former stands for Single-Page Application and the latter is a Javascript Framework that helps you making you app meet the requirements of a SPA.

The term SPA is self-explanatory; one SPA web application is an application that holds all its functionalities in one single web page. This changes how we conceived web development for a typical web application; instead of making a request to the server every time a user changes the section in the application (e.g. clicks on a link), the front-end client handles all those changes without requiring the transfer to another page or a page reload.

SPA Architecture

SPAs are rich and responsive applications implemented with Javascript and HTML5 using usually REST for the communication with the server. That means, that the backend will only be prompt when a user really needs information to populate the views (forget having to serve every dynamic html, javascript and css), and that implies a higher throughput per server and higher scalability.

Now is the turn of Angular. AngularJS is a powerful Javascript framework build to ease the development of SPAs. Angular main basis are testability and dependency injection, both are very well known for every Spring backend developer (though should be for each one of us).

It is, in broad terms, an MVC pattern framework with which a developer can design full, reusable components. Its main feature is two-way data binding (A strategy that is commonly used to build Flex Applications).

Suppose that as a developer you create an application with two components, A and B, and that both components share data of a model, for instance a User with its name, surname and age. Two-way data binding means that every time one of the components modify some attribute of that model, it will be instantly modified in the other module without needing to add any extra javascript code listeners or any DOM related code, Angular takes care of everything for you.

Right now we are developing an SPA application with Angular and we are starting to see huge benefits making use of it, we will keep posting here about our progress.