Loading Sequence

Many users have difficulty grasping how Hoplon pages are constructed, and how developers can wait for the loading/rendering to complete.

1. Raw HTML Content

The raw HTML file (ex. index.html compiled via boot-hoplon) contains a basic HTML5 document with a single script tag in the body of the document. This script tag loads the corresponding JavaScript file for the page.

2. ClojureScript

The index.html.js JavaScript file replaces the contents of the document with additional script tags.

These script tags configure the loading of (in order):

• Google Closure Library
• ClojureScript & Project Dependencies
• App Entrypoint (hoplon page)

3. Hoplon

hoplon.core will begin loading along with other project namespaces.

• This will implicitly extend js/Elements with the IFn protocol, allowing us to call elements as functions.
• html/head/body elements attach their attributes and children.
• Hoplon elements within the body are created and attached to the DOM.
• Pre-Rendering can cache elements created up to this point. Use hoplon.core/prerendering? to detect this state.

4. Window Ready

The window load event will fire, allowing developers to respond to the page load.

• It is recommended to use the with-init! macro to attach handlers.