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
This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.
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: ‣