Loading external JavaScript Libraries at Runtime

From Forum Nokia Wiki

Introduction

In this article we are going to explain how to load an external JavaScript file at runtime reducing application startup time and improving the application performance.

Enclosed in this article you will also find a full implemented widget and the respective source code to download.

User Satisfaction and Data Traffic

Make your widget load quickly is a significant factor in all models of user satisfaction. By loading the JavaScript files at runtime minimize the variability of delay in application start-up and improve the user experience inducing flow. Flow can be considered the time when you're having so much fun that you want this moment to last forever (1). Flow is the “holistic sensation that people feel when they act with total involvement." (2).

We are going to use a small trick to load JavaScript files in real-time. You have many others benefits by using it:

reduce application startup time;
minimize data traffic;
improve the user experience when it comes to mobile data traffic expenses;
improve the user experience inducing flow;

Hide and Show div elements

The function init is executed when the link at the div-load object is clicked. This function calls the function to dynamically load the Google Maps JavaScript API, it also show and hide div objects.

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Runtime Widget</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script language="javascript" type="text/javascript" src="basic.js"></script>
    	<link rel="stylesheet" href="basic.css" type="text/css">
    	<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
	</head>
	<body>
		<div id="div-load"><a href="#" onclick="javascript:init();">Load</a></div>
		<div id="div-map"></div>
	</body
</html>

function init()
{
	// Hide the button div
	var div_load = document.getElementById("div-load");
	div_load.style.display = "none";
 
	// Show the map div
	var div_map = document.getElementById("div-map");
	div_map.style.display = "block";
 
	// Dynamic load the script
	loadScript();
}

Dynamic loading the Google Maps JavaScript API

The loadScript function is called to dynamic load the Google Maps API. The callback function at the end of the url is used to asynchronous create a GMap2 object.

function loadScript()
{
	var script = document.createElement("script");
 
  	script.type = "text/javascript";
  	script.src = "http://maps.google.com/maps?file=api&v=2.x&key=YOUR-API-KEY&async=2&callback=loadMap";
 
	document.body.appendChild(script);
}

Event callback used to create a Map

The function loadMap is executed after the load of Google Maps API. It creates a GMap2 object at the "div-map".

function loadMap()
{
	// create the map object
	var map = new GMap2(document.getElementById("div-map"));
	// set the center of the map
	map.setCenter(new GLatLng(43.7430739, 7.4307509), 6);
	// add a marker at the center
  	map.addOverlay(new GMarker(map.getCenter()));
}

Download Widget

http://www.felipeandrade.org/exemplos/RuntimeLibraries.wgz

References

(1) Mihaly Csikszentmihalyi,Finding Flow:The Psychology of Engagement with Everyday Life(New York:Basic Books, 1997),29.

(2) Mihaly Csikszentmihalyi,Beyond Boredom and Anxiety:Experiencing Flow in Work and Play (1975;reprint,with a Preface by Mihaly Csikszentmihalyi,San Francisco:Jossey-Bass,2000),36.

--Felipe Andrade 17:03, 14 June 2009 (EEST)

Community: Wiki