For dev - App Lib v2 Overview
In this article
An overview of app lib v2 component, component tree, and service.
See also App JS Doc for a list of all classes and helpers
1. Base Structure
- Every element in app lib v2 is a Component (filter tree, filter option, filter items,...).
- These components are nested as parent/children.
- The root component is boostPFS, can be accessed publicly.
Example: type boostPFS
into browser console, you will see:
The example, boostPFS component contains filter, with 2 filter trees, with 13 filter options
Each component has these field/function:
this.$element
: the DOM element of this component.this.children
: array of children componentsthis.parent
: parent componentthis.init()
: creates children components, is called once.this.compileTemplate()
: returns HTML stringthis.render()
: creates DOM element from HTML string in compileTemplate, and assign it to this.$elementthis.bindEvents()
: bind events to this.$elementthis.refresh()
: call the refresh cycle on this component and its children
2. The refresh cycle
On page load:
- init element and children
When user interact with the filter/search:
- get API data → render element and children → bind events on elements and children
Example: after getting data from API, app lib call boostPFS.filter.refresh()
The component tree looks like this
- boostPFS
- filter
- filterTree
- filterOption
- filterOptionItem
- filterOption
- filterTree
- filter
Function call order (from children to parent)
→ filterOptionItem.render()
→ filterOption.render()
→ filterTree.render()
→ filter.render()
→ filterOptionItem.bindEvents()
→ filterOption.bindEvents()
→ filterTree.bindEvents()
→ filter.bindEvents()
There are beforeInit, afterInit, beforeRender, afterRender, beforeBindEvents, afterBindEvents functions for customization.
3. Helpers
Note: these variables can be accessed in a scope that has the call BoostPFS.inject(this)
See theme lib's boost-pfs-filter.js
file for example. Globals: global info. Ex: Globals.queryParams, Globals.shopDomain, Globals.moneyFormat,....
Settings: settings.
Ex: Settings.loadProductFirst = true
Labels: labels.
Ex: Labels.search.resultEmpty = "Your search for {{ terms }} didn't match any results"
Selector: selector for big elements, like filter tree.
Ex: Selector.filterTree = '.boost-pfs-filter-tree'
Class: css class names for our app
Ex: Class.filterOption = 'boost-pfs-filter-option'
Utils: utils functions
Ex: Utils.optimizeImage(imageUrl, size)
Utils.formatMoney(money, format, withoutTrailingZeros)
For a list of all helpers, see: ‣