Comic Director - Smarter Web Apps with Powerful New JavaScript* APIs

The introduction of HTML5 has led to exciting new advances in web development, particularly in the way developers establish the structure and foundational elements of web applications. The evolution of JavaScript has brought equally exciting changes to the way developers bring life to these applications.  Applications such as Comic Director are able to behave like native ones, largely in part due to powerful new JavaScript APIs.

Comic Director App – Create a Comic View

JavaScript is a popular programming language first introduced in the Netscape browser nearly 20 years ago. Adoption spread quickly as others realized the potential JavaScript had in bringing new levels of interactivity to otherwise static pages and applications.

This trend continues with a surge of new JavaScript APIs, pushing the boundaries of web app interactivity and blurring the line between web and native applications.

History API

The history API has existed in previous revisions of HTML, but has since evolved, creating a new standard for how browsers and applications navigate history with JavaScript. The process of navigating browser or app history before HTML5 involved the user clicking the back or forward button causing the page to refresh completely. In contrast, the HTML5 method of browsing the navigation history allows you to maintain the state of a displayed URL independently from the actual state of the application or page content. For example, adding features such as a photo slider are much easier to do and run much better when using the history API. The history API enables users to view pictures in an isolated slider window without having to reload the page each time. Without the HTML5 version of the history API, each photo would need a unique URL, and navigating from picture to picture would trigger a full page refresh.

$(function() {


         $('#PushState').on('click', function(e) {




                                   key: 'value'


                          'PushState is Cool',






The pushState() method  adds entries to the browser’s history context.

         $('#ForwardState').on('click', function(e) {




         $('#BackwardState').on('click', function(e) {



The window.history.forward() and back() methods allow us to move through the browser’s history context. In this example, the HTML tags with the ForwardState and BackwardState IDs act as triggers to move forward and back through the slider image history.

         $(window).on('popstate', function(e) {



                          '<div class="alert alert-info"> 

                                   <button type="button" class="close" data-dismiss="alert">&times;</button> 

                                   <strong>Popped!</strong> State has changed. 






The popstate event is triggered whenever the history changes. Each file or image that has been navigated to can be accessed at any time with its real URL.

File System API

The file system API makes a huge leap forward in making web applications feel and behave more like native apps. This API gives web applications the ability to create, read, and write files to a specific location of a user’s file system. In Comic Director, comics that have been created are automatically stored locally on the user’s system. When the user wants to upload a unique photo to use in one of their comics, the file system API makes that possible.

Comic Director App – Selecting a File

The file system API can be useful in other ways as well:

  • Improving performance for apps that are media intensive by downloading images to the local user file directory.
  • Use with a web mail client application to allow users to download messages for reading offline.

Web Workers

Normally, JavaScript is a single-threaded environment, meaning multiple scripts cannot run at the same time. For example, a web application may need to process data and change the UI while the user moves and clicks their mouse. In a single-threaded environment, each of those actions must take turns using the main thread. A web application will handle each action one at a time, which can affect overall app performance. The web workers API enables you to create additional scripts to handle more activities simultaneously. For example, using the web workers API you can create additional background scripts so that CPU intensive tasks are able to run without blocking window updates or UI events, such as mouse inputs. This allows tasks to complete more quickly, creating a smoother user experience.

Since your Web Workers run in an isolated thread, the code needs to be stored in a separate .js file. To start, create a worker using the following code:

var worker = new Worker (‘test.js’);

Once created, you need to tell your worker to communicate with the parent page with the postMessage() syntax. This becomes the means for passing data back and forth from the main thread.

Below is a more complex example of how messages pass between a worker and the main thread:

// awaiting postMessage() events that say start, stop, and unknown

self.addEventListener('message', function(e) {

  var data =;

  switch (data.cmd) {

    case 'start':

      self.postMessage('WORKER STARTED: ' + data.msg);


    case 'stop':

      self.postMessage('WORKER STOPPED: ' + data.msg + '. (buttons will no longer work)');

      self.close(); // Terminates the worker.



      self.postMessage('Unknown command: ' + data.msg);


}, false);

New HTML5 JavaScript APIs bring a whole new level of interactivity to web applications by:

  • Allowing you to make your web apps more reactive and responsive to user input.
  • Bringing native application functionality to the web, such as the ability to read and write files from a user’s local file system, or create file and photo browsers while optimizing performance.

Learn more about web application development at the Intel® Developer Zone. Check out the new Intel® HTML5 Development Environment.

Intel® HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

For more complete information about compiler optimizations, see our Optimization Notice.