NovoGeek's Blog (Archive)

Web based slide shows (built using HTML, JS, CSS) have always been my choice and I use them most of the times in my presentations. This post explains how you can create your own web based slide show from scratch, using ECMAScript 5 (ES5). In fact, this is the code walkthrough of my presentation on ECMAScript 5 at TechEd on the Road.

Note that while you can always build the same by the non-ES5 way, I am using ES5 just to highlight the new object model and other features which are very much useful.

Final product: Check my presentation on ECMAScript 5.

Source Code: Check my GitHub repo and use it as you like.

There are a lot of existing solutions which can be used straight away, but I made the above presentation to meet the following requirements:

  (1)  Demonstrate the power of ECMAScript 5 with a live demo, using the presentation itself

  (2)  Load my slides asynchronously (the existing solutions have all slides in a single file which makes the presentation heavy).

  (3)  Run code snippets within the presentation itself, so that I need not switch windows for demos.

You can have a quick look at the directory structure at my GitHub repo.

The index.html file is the one which loads initially. Each slide is a 'html' page containing basic <ul>, <li> tags and all slides are located in the 'slides' folder. The idea is to load these files via AJAX using jQuery. The 'CSS' folder contains the images and styles needed for styling the presentation.

The most important components are the JavaScript files located in the 'js' folder. I have used jQuery and a plugin for the slideshow effect. You may use the jQuery presentation plugin for the sliding effect or use mine (a tweaked version to suit my requirements). Just download the entire directory and modify the html files in 'slides' directory and the 'images' for an instant presentation.

Digging into the code:

The entire logic of the presentation is in the common.js file (here it is on github). I suggest you to switch between the source code and this article for better understanding. I have used my favorite "Revealing module pattern" to keep the code clean and maintainable(refer my JS design patterns article for more info). This pattern is good for encapsulating private variables and reveal only the required one's in the 'return' object.

Here is the basic structure of my self-executing anonymous function: 

var $es5 = (function () { 
    var myPrivateVariable;
    var foo=function () { /* blah blah.. */ };
    var bar=function () { /* blah blah.. */ };
    return {  init: foo }
})();

So $es5().init(); will execute foo(). You can return 'this' in each function and chain in jQuery style. Skipping the internals, as it is out of scope now. 

Checking for ECMAScript 5 browser support: 

Before implementing ES5 code, we have to check if browser supports ES5 standards or not. A simple test is to see if the new ES5 object properties are available:

    if (!Object.defineProperties || !Object.defineProperty) { /*Browser does not support ES5. Return */ }

Freezing your JS code:

One nice feature of ES5 is that you can freeze your objects after creating them. This means, your code cannot be tampered by script injection once it is freezed.

  $es5.init(); //invoke the  $es5 function & create an instance.

  Object.freeze($es5); //freezing the object using ES5.

Iterating using ES5 'forEach' method:

JavaScript cannot access file system as a security measure and we cannot read the markup from our html slides. So the trick to do our task is store our html file names in a string array, iterate through the array and load the files via AJAX. For iteration, we can use the ES5 'forEach' method, which will help us in avoiding pointer variables like 'i', 'j' in for loops.

   mySlides.forEach(createSlides);

Using ES 5 getters and setters:

Another beauty in ES5 is you now have getters and setters similar to languages like C# and Java. Let us create a 'slideTemplate' object, which can be inherited by other objects in future. The idea is to have a setter method called 'path', which will accept a URL and generate some markup. The getter method 'content' will return the markup generated by the setter.

   var slideTemplate = {        
        content: {                  
            get: function () {    /* return markup; */   }       
       },        
       path: {            
           set: function (url) {  /* load slides via AJAX */    }        
       }   
  };

Loading slides via AJAX:

Now, we need to use the setter method for loading our slides into our main page. Instead of appending each slide to the DOM (bad for performance), we can create a document fragment in JavaScript like:

    var slideFrag = document.createDocumentFragment();

We need to load markup using jQuery's $.ajax into 'slideFrag' and finally add it to a container in index.html.

Creating a new slide using ES5:

Here comes the most beautiful part of ES5. You can create plain vanilla objects or inherit from existing objects using "Object.create" method. The 'slideTemplate' object which we created above can be inherited to create new objects. To put it in real sense, the new object we are creating is in fact a new slide! Isn't this real object oriented programming?

    var newSlide = Object.create( {}, slideTemplate);   
    newSlide.path = url;        //setter gets invoked!
    container.append(newSlide.content); //getter gets invoked!

To summarize, we are basically iterating over our array of html file names. For each file name, we are creating a new object and assigning a URL. On assignment of the URL, the setter gets invoked and loads markup from remote content via AJAX into a document fragment. Then we are appending the document fragment to the container using the getter.

Inline demos: That's easy to figure out from the code. So leaving it to you, the reader :)

Hope the article helped in understanding how to use some of the new feautres ECMAScript 5. Play around with the code and let me know if you can improve it better.

Happy coding :)