Step up and become a SPA superhero. Follow these four easy steps to SPA success without any need for backend programming. This article includes a cloud-based tool called Stackend.com - but it's freemium

Single page apps (SPA) aim to improve website performance and increase conversions. Some of the benefits: Fast and responsive design (if done correctly). Since a SPA updates the desired content only, it dramatically improves the loading time.

So — could this be for you? Let’s find out.

Why should I build a single page application?

A single-page application doesn’t need to reload the page during its use and works within a browser. You probably used Facebook, Google Maps, Gmail, Twitter, Google Drive, or even GitHub. All these are examples of a SPA.

The main reason for building a SPA is, however — speed. And speed is money. Studies done by Google and key findings by companies such as Amazon and Wal*Mart show that if a page takes more than 200 milliseconds to load, it has the potential to actually mess up your business or, at the very least, cost you much money.

Why shouldn’t I build a single page application?

Some stuff gets a bit more complicated. SEO needs to be done a bit different and some third party integration that relies on the complete page content being available on load may not work. Also, it (typically) increases the load on the browser.

As for now — Google is the only search engine that kind of works with javascript rendered SPA. Bing claims to, but according to tests does not.

Ok - I want to build a Single Page Application"

What we will look at here is a super simple way of building a SPA without the need for an application server such as node.js BUT if you want to take it to the next level and do server-side-rendering— you can still use whatever you create here.

First Step - Register (free) or login to Stackend.com and create a Stack.

Here’s the important part to just add what domains you want this stack to be available from. For this demo, we will use codepen.io — you can do the same when testing or use just about anything that can render HTML.

** Second Step** - Create three Code Bins and add some HTML.

Really, you’re that lazy? Ok…. here’s the HTML for this:

<div class=”blue”>
<h1>It’s wonderful in the SPA — Page 1</h1>
<p>Fun family entertainment everyone can enjoy</p>
</div>

and CSS:

.blue {
 width:100%;
 background:lightblue;
}
h1 {
 text-align:center;
 font-family:helvetica;
 padding:20px;
 color:white;
 font-weight: 700;
}
p {
 text-align:center;
 font-family:helvetica;
 padding-bottom:40px;
 color:white;
 font-weight: 300;
}

Create three code bins with different colors and change the <h1> text to Page 1 and Page 3. It’s just so you can see the difference later.

Third Step — Create three Pages and add your Code Bins to each Page.

Now create three pages. Process being: Create the page and add the created code bin. The name will be the link in the next step but you can change this later. To make it simple I’ll just stick to the colors.

Fourth Step — Create a Site and see your SPA in all its glory!

Simply Create a site, name it whatever you want, and add page red, page blue, and page green to your site. Once done click <>copy and paste the site code to your codepen or page. Voila! A single page application!

Now — get creative and start clicking around. For example, you can add a header to your site, change to verticle menus, or create your own. Read the doc for more info (that will get better - promise)

Here's the test-site created above:

Here's a site with

Hope you had fun!