html 5 single page apps image

HTML5 Single Page Applications: The Basic Idea

Single Page Applications – What and Why??

A single page application, is quite simply an html5 web application that is written as a single web page. The main reason for this is to allow for all the necessary code to be downloaded during a single page load. This eliminates the need for the page to reload at any point during user interaction as all the content is already loaded or is dynamically loaded and added to the page as necessary, usually using AJAX techniques. The net result of this is a much more fluid, and less frustrating user experience, ultimately approaching the  experience the user has while using a desktop application.

Single page applications are especially important when your html5 web application is to be accessed on mobile devices (as all web apps should be) where data connection can be slow or spotty. Under these conditions having to reload the page for every interaction can be especially frustrating for the user.

Single Page Applications – How to Write?

The main idea in writing single page applications is to make all your web page content available once the page has loaded. Content that can’t be loaded this way should be dynamically loaded when needed using AJAX techniques. To make the application useful you then control the visibility of the different components as needed. This is normally done by enclosing the major UI’s views in html5 divs and using Javascript with CSS styling’s display and visibility properties to hide and show divs as appropriate.

Note however that display and visibility can both hide an element but do behave differently:

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout:

See this reference for details.

Now this is where the popular javascript frameworks such as AngularJS, Ember.js, ExtJS and React come in. These frameworks are very powerful and provide awesome functionality to make excellent, responsive and fluid single page applications.

The disadvantage with them is that they have a learning curve and if you want to make a simple single page application then it may be better to handle the div visibilities yourself. Note however that the capabilities provided by these frameworks go very far beyond just controlling the visibility of different div views and they really are worth learning (AngularJS for me ūüôā ).

The example shown in the next section shows you how to control the different visibilities manually to make a responsive single page application.

Single Page Applications – An Example and Useful Template

To get up and running quickly with single page applications the following example can be useful and can be used as a template.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Single Page App</title>
    <meta charset="utf-8">
    
    <style>
        .appUI{display:none}
    </style>
 </head>

<body onload="showUI1">
    <h1>Single Page App Heading</h1>
    <div id="ui1">
        <h2>This is UI 1: Main UI</h2>
        <button type="button" onclick="showUI2()">Show UI 2</button> 
        <button type="button" onclick="showUI3()">Show UI 3</button> 
        <button type="button" onclick="showUI4()">Show UI 4</button> 
    </div>

    <div id="ui2" class="appUI">
        <h2>This is UI 2</h2>
        <p>Nothing to see here...move it along....go on..git</p>
        <button type="button" onclick="showUI1()">Back to Main UI</button>
    </div>

    <div id="ui3" class="appUI">
        <h2>This is UI 3: Wikipedia Article</h2>
        <button type="button" onclick="showUI1()">Back to Main UI</button><br>
        <iframe id="UI3Frame" width="715" height="420" src = "http://en.wikipedia.org/wiki/Single-page_application">
        </iframe> 
    </div>
    
    <div id="ui4" class="appUI">
        <h2>This is UI 4: Two Pics</h2>
        <button type="button" onclick="showUI1()">Back to Main UI</button><br>
        <button type="button" onclick="showPic1()">Show Pic 1</button>
        <button type="button" onclick="showPic2()">Show Pic 2</button><br>
        <iframe id="vidFrame" width="715" height="420">        </iframe>
    </div>
    
    <script>
        function showUI1(){
            document.getElementById("ui1").style.display="block";
            document.getElementById("ui2").style.display="none";
            document.getElementById("ui3").style.display="none";
            document.getElementById("ui4").style.display="none";
        }
        function showUI2(){
            document.getElementById("ui1").style.display="none";
            document.getElementById("ui2").style.display="block";
            document.getElementById("ui3").style.display="none";
            document.getElementById("ui4").style.display="none";
        }
        function showUI3(){
            document.getElementById("ui1").style.display="none";
            document.getElementById("ui2").style.display="none";
            document.getElementById("ui3").style.display="block";
            document.getElementById("ui4").style.display="none";
        }
        function showUI4(){
            document.getElementById("ui1").style.display="none";
            document.getElementById("ui2").style.display="none";
            document.getElementById("ui3").style.display="none";
            document.getElementById("ui4").style.display="block";
        }
        function showPic1(){
            document.getElementById("vidFrame").src = "http://dwightreid.com/blog/wp-content/uploads/2013/04/Arduino_XML_Sensor_Connection.png";
        }
        function showPic2(){
            document.getElementById("vidFrame").src = "http://dwightreid.com/blog/wp-content/uploads/2015/03/Pan-tilt.jpg";
        }
    </script>
</body>

See this code in action.
Don’t forget to share this with your friends and followers using the buttons below, happy coding :).