There was a time when surfing the Internet meant you would type the address of a web page, a web server sends the first page to you and your web browser would then display it. If you click on a link or some other content a new request is sent to the web server and a new page is sent back to you. This works great if the pages of the website seldom changes and each page is unique. But if there are small sections of the page which change often –for example, a constantly-updating section like a news stream or stock ticker - the web server has to send the entire page every time any of the information changes. Another common example is if the web page allows you to enter information or make selections and then updates the information on the page based on what you selections. Sending all these pages to the web server can end up with a lot of time and bandwidth used.
Let’s imagine a web site that lets you customize a new car.
First, you go to the Acme Car website and the home page of the website is sent to your browser. You select the option to design your own new Acme car, so a page with all the available models is sent to you. You select a model and a page with information about that base model and base price is sent to you. What color do you want? A new page showing the car painted that color is sent to you. Which interior fabric do you want? A new page with that interior and an updated price is sent to you. What trim package would you like? A new page with a new price is sent. You add an option, but wait a minute - that option requires a change to the package you selected earlier. The web server has to send another page telling you this and asking if that is ok. Once you agree a new page with the updated price and options is sent to you. Each time you select or change anything the web server has to process that change and send back an entire page again. Now image trying to do all of this on a slow internet connection or on a mobile device (where you are paying for all of the data that is being sent back and forth).
One solution could be to just send all of the possible options and combinations with the first page. Then let a script running in your web browser decide what information should be displayed and update it according to your choices. This would eliminate sending all the pages back and forth, but the size of such a page would be huge and any user waiting for it to load would most likely just give up and go somewhere else.
This is where single page applications become very useful. They are designed to minimize all of this back and forth traffic and create web sites that are interactive, constantly show the latest information, all the while still being fast and responsive. They accomplish this by using asynchronous communication and partial page updates. When the first page of the web site loads, a script is also loaded to handle all the changes. This script, or “manager,” acts as a middle man handling all of the communications with the web server. It can request data to update only what needs to be updated. It also handles a process called “routing.” When you click on an option it may seem like an entirely new page has loaded, but it hasn’t; the manager has simply loaded in the new content. Because a lot of information like headers, navigation bars, side bars, and footers don’t vary from page to page, only the main content has to be sent from the web server.
If you are looking for a responsive, engaging, and highly interactive website, a single page application may be exactly what you need. AngularJS is a very popular framework for building such single page apps, and I will discuss some of its features in a future blog.