Navigation for Single Page Applications

The code in this repository is effectively forked from the navigation directory of this screencast repository. See the comments from the original author below. The only difference is here I decide to follow through using typescript instead. I also add a bonus snapshot at the end using the History API in conjunction with the page href to do the routing instead of using fragment identifiers.

Running the code

Each individual part is treated as a separate node project. To execute the code in the src directory of a snapshot do the following:

1. Navigate to the typescript folder of a snapshot folder. The folder will contain a package.json file.
2. Run npm install to install the development dependencies. There are only two: the typescript compiler and lite-server. Both will be installed locally when you execute this command.
3. From a terminal either run npx tsc -w or node_modules/.bin/tsc -w to automatically watch for and compile changes in multiple typescript files in the project.
4. From a separate terminal run npx lite-server or npm run dev to launch the development server in your browser.

Screencast

• 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

Background

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

Examples

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