I’m working on conceptualizing how web apps relate to the browser. Thinking about single page (and multi-page) apps and the different elements they need to control.  It became apparent to me that there are two models and two sets of state that exist side by side.

There is the browser, along with the DOM and all it’s related elements:  window, location, status, history — and then there is the application, with it’s model, state, and actions.

Turns out the W3C (*ahem* Netscape) did a pretty good job of of designing the browser object model.  Here’s a diagram I drew to help me visualize the browser object model based on the documentation at W3Schools:

The actual Browser Object Model is almost exactly what I conceptualized needing to work with (in an abstracted way) for my applications.

Next step is to design an application so it interacts with the BOM (not just the DOM) in a clearly isolated way.

BTW, pro-tip for those of you building “single page apps” and want to keep it on a single page. Don’t set window.location.href=url Instead, use window.location.replace(url) and keep your back button gray.