As you may know, the content you see in your browser is formed from a combination of HTML, JavaScript, Cascading Style Sheets (CSS), and plugins determined by the required content and functionality. A Single-page application (SPA), also known as a single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience. Our customers are often looking for exactly this type of experience for their users and knowing about this option up front can make their decision process much easier. To keep things concise, we’re going to focus on HTML and JavaScript for discussing this new style of website architecture.
Over the years, more and more JavaScript has been crammed into your web experience. In general this is a good thing – more JavaScript means more dynamic functionality for the user. Innovations in the use of JavaScript and dramatic performance improvements in JavaScript engines have transformed the language from window dressing for HTML into arguably the primary tool for modern web development.
Where Are We Now?
Single Page Applications capitalize on this trend and push HTML to the background of web page architecture. By contrast, the default architecture for websites is to serve up a bunch of different pages and link them together with some sort of navigation structure. These pages may be backed by static HTML files or a server generating the content dynamically. In these scenarios, the organization of the HTML content drives the architecture and JavaScript is executed to add functionality to the page. In an SPA, the HTML file is sometimes barely a stub and may only exist to launch the code in the JavaScript files. In a way, SPAs fully complete the transformation of the browser from a tool for viewing content into a platform for running applications.
Isn’t All JavaScript the Same?
Anyone who has written JavaScript for modifying an existing HTML page (sometimes referred to as Dynamic HTML or DHTML) has dealt with their fair share of struggles. Common problems include browser differences, document object model eccentricities, and simply trying to maintain a correct model of the user’s state of interaction when the user has so many natural options that can disrupt any sense of flow. It’s so bad that writing JavaScript code for an HTML page can sometimes be seen as asymmetric warfare with an unknown enemy that can pop-up at any time in the future. The meteoric rise in popularity of the jQuery JavaScript library is testament to the fact that that developers are fed up with having to hand-code HTML tweaks themselves.
Object-oriented Design to the Rescue!
In SPAs, JavaScript is used to create a mini content organization system within the browser. Now the JavaScript on the page is in charge of the HTML and this makes a developer’s life much easier, with a little help from their favorite framework. Using object-oriented design principles, rich JavaScript architectures can be created to manage the user’s experience with the content instead of playing catch-up to the constant back and forth hand-off between JavaScript and HTML.
What if I want a Website instead of an Application?
The line between a website and web application has been getting increasingly blurry ever since Web 2.0. To make your site dynamic (and what site isn’t dynamic these days?), you need the browser to be executing code like JavaScript. Once you’re running code in the browser, you’re effectively running an application – it just may be an application that is specifically designed to make your website content more awesome.
Where does the “Single Page” Come in?
The core concept behind a Single Page Application is that the browser only uses one URL. That means you can bounce around the site, fill out forms, or conduct any normal activity without the location in your browser’s address bar ever changing. It’s a simple thing from the user’s perspective, but it has big implications for the programmer.
Is this a Trend Bubble or the Shape of Things to Come?
Google did a lot of the early work in this area and many of Google’s products, like Gmail, Maps, and Reader (RIP), are straight up SPAs. The main pages for Facebook and Twitter use an SPA-like design. The more a site uses AJAX to serve content instead of full page transitions, the more it is like an SPA. I think it’s safe to say SPAs are here to stay.
What are the Benefits of an SPA?
Aside from making JavaScript coding a little saner for developers, SPAs have two main benefits for users. The first benefit is removing that jarring page change when you click on a link. In an SPA, the navigation controls and main interface typically stay on the page when you click a link; only the piece of content you want changed actually gets changed. The second benefit is the basic speed boost you get from a lighter server response payload for the chunk of content versus a whole page. The lighter payload transmits across the network more quickly and the browser can incorporate the new piece of content more quickly than redrawing an entirely new page.
There Has to be a Catch…
There are definitely some special considerations to take into account with SPAs. Creating an SPA without sound object-oriented principles can lead to memory leaks within the browser which can cause it to slow down or crash. If you use an SPA for your main site, you have to take special steps for search engine optimization (SEO) so that crawlers will see an appropriate version of your page. The biggest bane of SPAs is the browser back button. If not properly handled, the user can click the back button intending to go back one step in their workflow, but instead be dumped back to whatever page they were at before they entered the SPA. However, all of these issues can be addressed with the right techniques.
Is a Single Page Application Right for Me?
Probably. It’s the natural evolution of web programming and it pairs nicely with mobile device support options like responsive design. If you’d like a more customized answer just give us a call; we’ve got plenty of experience in developing Single Page Applications.