• YouTube Video - Navigation for Single Page Applications
• Code Examples Viewer. Use left and right arrow keys to navigate.

This screencast covers how to construct a single page application with a tab-like navigation user interface and routing. A solution is introduced that uses only Web Standards (HTML, JavaScript, CSS, The DOM).

Even though libraries like Bootstrap, Backbone, Angular, Knockout and Ember do most of the work for you when implementing this kind of system, this screencast does not use any libraries at all. This emphasizes the core technogies, and provides a foundation for understanding how those libraries work.

Curran Kelleher October 2014

Single Page Application

• One page only, no page loads.
• Information fetched on the fly using XMLHTTPRequest
• AJAX
• Related concept: "Server Side Push"
  • Comet (programming) (also known as Reverse Ajax) long polling XMLHTTPRequest
  • WebSocket full-duplex communications channels over a single TCP connection
  • Socket.io Node.js library for WebSocket
• Fragment Identifier used for routing
  • index.html#pageA
  • index.html#pageB

Workflow Review

• Editor / IDE
  • Needs to insert only spaces or only tabs
  • Mixed tabs and spaces causes editor-specific indentation errors
    • My Vim configuration uses 2 spaces for a single tab
    • CodeMirror Visible Tabs Demo
    • Chrome Source view uses 8 spaces to represent a tab
• Git Command Line
  • Running on your machine in same directory as the editor
• Local Server (e.g. python -m SimpleHTTPServer 8080)
  • This is far better than doing your development over an SSH connection
• DOM Inspector (<p>Hello</p>)
• JavaScript Console (console.log("Hello");)

Navigation Interfaces

• Wordpress Blogs
  • Citizen Sketcher
  • The New West
  • These use separate HTML pages
• Approaches
  • Separate HTML pages
    • e.g. PHP applications
    • Used to be standard practice
    • Replaced by the "Single Page Application"
  • Single Page Application
    • A single page with no reload
    • Dynamic behavior added using JavaScript
    • Content fetched as needed
    • Routing using a fragment identifier
      • Was the standard practice for a long time
      • Slowly being replaced by HTML5 History API
    • Routing using HTML5 History API
      • CanIUse Report
    • Caching

Check out the Example Viewer. Use left and right arrow keys to navigate.

• Example 1 - (run it! | index.html) - Simple Navigation Links
• Example 2 - (run it! | index.html) - Separate pages
• Example 3 - (run it! | index.html) - Styling navigation links
• Example 4 - (run it! | index.html) - Styling the entire site
• Example 5 - (run it! | index.html) - Removing type=“text/css”
• Example 6 - (run it! | index.html) - Styling the currently visited page link
• Example 7 - (run it! | index.html) - Put some effort into CSS
• Example 8 - (run it! | index.html) - Fragment identifier links
• Example 9 - (run it! | index.html) - Accessing the fragment identifier
• Example 10 - (run it! | index.html) - Dynamic content
• Example 11 - (run it! | index.html) - Encapsulating navigation
• Example 12 - (run it! | index.html) - Cleaning up
• Example 13 - (run it! | index.html) - Defaulting to #home
• Example 14 - (run it! | index.html) - Removing the # character
• Example 15 - (run it! | index.html) - Encapsulating content retrieval
• Example 16 - (run it! | index.html) - Adding content from a JS object
• Example 17 - (run it! | index.html) - Setting the active class on links
• Example 18 - (run it! | index.html) - Using a callback to fetch content
• Example 19 - (run it! | index.html) - Fetching partial HTML files using AJAX
• Example 20 - (run it! | index.html) - Encapsulating AJAX
• Example 21 - (run it! | index.html) - Caching fetched partials
• Example 22 - (run it! | index.html) - Cleaning up JavaScript
• Example 23 - (run it! | index.html) - Using jQuery

Feel free to use and modify for your own presentations! MIT License.

By Curran Kelleher October 2014