Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Building an interactive web app from scratch

Monday, August 10th, 2015 by Servage

javascript-codeStarting a web project or modernizing an existing one often confronts you with decisions about how to structure the code, and which web technology to use. Nowadays many projects consist of a backend framework powered by PHP and MySQL, plus a frontend framework consisting of Javascript powered HTML and CSS generation. You can rely on existing frameworks for this purpose, but sometimes it makes sense to build something on your own. This is especially useful if your project has special requirements unfulfilled by the other frameworks, or if your project is very small and concrete, so using a framework would impose to much overhead.

Building a small web app

Below you will find an example of a small web app which consists of a few simple elements. The first part is the HTML template which has two main sections in the body. The first section is the “loader” and the second section is the “content”. The loader shows an indicator while data is being fetched in the background via AJAX.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="load">
		<div id="load-indicator">Loading ...</div>
		<div id="load-error">
			<strong>Request Error. </strong>The data could not be loaded.
		</div>
	</div>
		
	<div id="content"></div>
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="/js/app.js"></script>
</body>
</html>

The CSS must make sure the load section is visible at page load, while the content section is hidden. It will be made visible once data loading is complete.

#load {
	display: block;
}

#load-error, #content: {
	display: none;
}

The template includes a script which initiates on document ready status. It fetches data in the background whereafter it hides the loader, shows the content and runs an initialization method. This is a simple yet nice way of starting a web app and handling the data load process asynchronously.

var app = {

	// Data load method to fetch required backend data with AJAX
	loadData: function()
	{
		var url = '/data;
		
		var request = $.ajax({
			url: url,
			method: 'GET',
			dataType: 'json',
		});
		
		request.done(function( data )
		{
			app.init();
			$('#load').hide();
			$('#content').show();
		});
		
		request.fail(function( jqXHR, textStatus )
		{
			$('#load-indicator').hide();
			$('#load-error').show();
		});
	},
	
	// Init function which executes once the data has been loaded.
	init: function()
	{
		// Use this method to build your DOM elements etc.
	},

};

Finally the data loading method is executed and the app starts.

$(function()
{
	app.loadData();
});

The above code illustrates how you get a simple website running with a nice loading indicator, an error handler and content display. This process is useful for small or simple projects. You can preload the content section with HTML and simply dynamically modify it when the data is loaded. Alternatively you can build the entire content DOM dynamically with Javascript. The best principle depends on your use case.

Building an interactive web app from scratch, 3.8 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.