- Single-page app
- Auto-reloading Application Cache
- Inline auto-reloading samples
These are a selection of the many really cool features that underly the future online presence of Knockout. The ideas and implementation here will hopefully provide a really great user experience, help demonstrate a little of what Knockout can do, and show some techniques that can be used in many other contexts to improve the web.
Without further ado, let’s get into the details.
Overall page strategy
We create a single instance of an object,
that Knockout binds to the
and thereafter determines the state of the entire page. When an anchor is clicked the event is intercepted then, if the browser supports HTML5 history and the user has not disabled the single-page functionality, the page rewrite boils down to Knockout changing the
template of the
instance. If the browser does not support HTML5 or the user turns off the single-page functionality, then the link is followed (though it may have been rewritten).
When the body template changes the template shown changes. As well,
change triggers a page title update to the
attribute of the template being changed to.
To make things load quickly we concatenate our templates into one file that is loaded asynchronously, likely from the appcache (more on that below).
All our pages are stored as markdown and also compiled into a single file. A couple tricks we’ve used include exposing the
as a property of the
As you can see from the anchor click intercept and
handler manipulating the history is pretty trivial when used in conjunction with Knockout.
All our links are rewritten to
. These links are simultaneously generated individually as actual files, and generated for use by Knockout as templates that go into the
property of our
Auto-reloading Application Cache
The application cache speeds up loading time and gives offline access. We regenerate our application cache basically whenever anything changes in the compiled files, updating the date of compilation so browsers will know to reload the cache.
When the page is loaded regularly recheck the application cache. This is handy because we can inform users when there is a newer version. It also comes in handy as a livereload substitute during development.
We are using TrackJS to keep us up to date on what might be happening. So far, very few errors have been reported over a few hundred accesses, but it was easy to identify and fix the issues when they were reported. There’s not much to say here other than we do it, and it’s really awesome!
Inline auto-reloading samples
Many of the examples on the website are “live” in the sense that they can be edited directly. They can also be sent off to jsFiddle and CodePen, making it easy to tinker, learn, and demonstrate reproducible issues.
is a separation of the user and data interface from the instance of an
itself; they could be combined but this lets us create
in other contexts from the
Where to now?
Next up, we have to go through the examples, links, references, etc.. to clean it up. The style definitely needs some work. Some “live” time to give users time to give it a whirl and send feedback.