- Load and instantiate all website functionality for each request regardless of the page content
- Write framework specific views with dependencies tied to pre-defined routes
- 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 (read, “CMS driven”) 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 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 components. Components are split into sub-types of widgets, directives, utilities and mashups:
- A collection of functionality that is stateful and may have 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 a
data-gw-component attribute and multiple components can be applied by specifying a comma-separated list:
Components can provide a function or an object. Objects should include an
init method which will receive the element as its first argument:
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 provide an anonymous function:
And finally, 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.