Web application development is as fickle as any other facet of development; one year’s standards are next year’s artifacts. A fairly new approach to web application development is the creation of single page applications (SPA), in which the web application is contained on a single web page that operates asynchronously in real-time. CRUD operations, workflows, and state management all take place on the page, and these can be initiated by either the server or the client using AJAX.

An SPA uses standard, open web technologies such as HTML, CSS, and JavaScript, and communicates via standard port 80. This means no special permissions are needed, and nothing other than allowing JavaScript needs to be done for the user to take full advantage of your SPA.

Single page applications tend to have the feel of a native application. There are no refreshes, and the interface displays real-time information. Even more exciting is the ongoing functionality of the application even if the user loses connection, since most of the page is cached.

Why use Node.js?

According to the Node.js homepage, “Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.”

This doesn’t translate to Node being the best thing the world has ever seen, barring sliced bread. Node shouldn’t be used for CPU intensive operations, but instead for high-throughput applications that need to be fast and scalable.

Speed is one of the main perks of Node. It uses a single thread event loop that performs all operations asynchronously. When an application using Node needs to perform an operation, it sends it to the event loop with a callback function attached, and then keeps on keepin’ on until the event loop returns to the task that sent the callback.

Why use AngularJS?

AngularJS is another lightweight JavaScript framework that is being used for SPA development. It is mostly based on HTML attributes that are added to tags, which adds to its ease of use. AngularJS also allows you to cache all of your pages, meaning there are no extra requests needed to download them.

Data binding support is provided using directives included with AngularJS. This means the support for data model synchronization in real-time is built in. All changes to the view or the data model are automatically reflected. These features make using AngularJS for a single page application almost a no-brainer.

These tactics can admittedly be achieved using only jQuery and JavaScript, but with AngularJS or Node.js the code will not only look better, but will be easier to write, update, and maintain. Using one of these frameworks is a more structured and, if you will, a more civilized way of doing things.

Sources:

Sarah Baker

Brian Russel Davis

Brian is a Full Stack Dev/Engineering professional with nearly 17 years of experience developing web media for global brands, and executing outside of the box thinking.