1) Load and instantiate all website functionality for each request regardless of the page content:
2) Write framework specific views with dependencies tied to pre-defined routes:
3) Use an asset pipeline to load only the dependencies defined in the application views:
None of the approaches mentioned above are suited to loading and executing granular functionality in a way that a constantly changing site requires. The first approach is robust but may become a performance bottleneck even with the best minification, execution organisation and network optimisation. The second approach is inflexible and could very quickly become a maintenance nightmare trying to wire-up for all eventualities. Any site with a large number of mixed and re-used components built with either of these approaches will have architectural difficulties when a new feature request arrives.
In GroundworkJS functionality is grouped into “widgets”, “directives”, “utilities” and “mashups”. Widgets, directives, utilities and mashups are all types of “component”.
- A collection of functionality that is stateful and has an API; E.G. tabs, modal dialogues and slideshows.
- A run-once piece of functionality; E.G. loading a Google map or the one-way transformation of an element.
- A re-usable piece of functionality to help other components; E.G. feature detection or an AJAX library.
- A combination of multiple components functionality; E.G. binding multiple slideshow widgets together or loading tab content with AJAX.
Components are explicitly bound to DOM elements with an attribute and multiple components can be applied by specifying a comma-separated list:
Components can return a function or an object literal. Objects should include an
init method which will receive the element:
Functions will be handled as constructors (called with the
new operator) and will also receive the element. All components may have an optional
Directives shouldn’t maintain state or provide an API so may return an anonymous function:
Mashups combine multiple components to create new or extend existing functionality:
GroundworkJS requires a module loader and there are plenty to choose from depending on project requirements or developer preferences. The script loader must be setup to find the components then GroundworkJS can be booted up:
If you’re interested in quickly getting up and running with GroundworkJS please check out Wirework, a generator for Yo which includes GroundworkJS with the all dependencies and tools wired up and ready to use.