Welcome to a Bootstrap Single-Page App Skeleton. This skeleton provides a way to make a single page web application that is very light weight. When gzipped, using Zepto to replace jQuery and Bootstrap JS/CSS, files total around 31KB. In contrast, jQuery combined with jQuery Mobile JS/CSS run about 81KB. Combining this with RequireJS allows us to create a single-page application that loads resources asynchronously for the files that need them without needing to load all of our scripts up front. If you want the look and feel of an app, you may still want to use jQuery Mobile, but for all others, I hope this skeleton will help you.

  • Using RequireJS to manage dependencies, we only load scripts as we need them.
  • If the browser supports HTML 5 and is a supported browser by Zepto, the script will load Zepto instead of jQuery (about 1/3 the size).
  • Using a simple xing/hash listener, we enable page navigation, which will perform the following:
    • Listen for hash changes and change the page accordingly
    • Listen for clicks to elements with data-toggle="page" to change the page to the data-target.
    • When changing to a page, it will dynamically load the page script (if not already loaded), which can be declared on the page tag (e.g. <div id='page-user' class='page' data-script="page/user">)
    • After a page's dependent script is loaded, it will trigger a "scriptloaded" event.
      • The scriptloaded event can be used to initially load the page the first time but leave it alone if the parameters are the same.
      • E.g. you go to #page-users?id=3, go to a different page, then go back. It can check hash.get('id') and if its the same as was previously loaded, not do anything.
      • This checking and switch is done in the example page scripts.
    • The individual page script can then fire its own load event to either load, reload, or refresh the data (example provided in the skeleton)
    • Provide a way to pass parameters such as ?id=3 in the hash that can be retrieved via hash.get('id') (see examples)