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 components
  • this.parent: parent component
  • this.init(): creates children components, is called once.
  • this.compileTemplate(): returns HTML string
  • this.render(): creates DOM element from HTML string in compileTemplate, and assign it to this.$element
  • this.bindEvents(): bind events to this.$element
  • this.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

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: ‣

Related Articles