Frontend App

The Esc Navindexer Frontend App is a small set of VueJS-powered components that handle interaction with the Slice API.

Bitbucket: https://bitbucket.org/sigapps/escnavindexerfrontendapp

You can use the index.html file in the repo for testing out the frontend app in isolation.

Overview

Components & Dependancies

External:

• debug.js (optional)
  Provides some additional debugging information.
• underscore.js
  Standard library for dealing with collections & arrays.
• superagent.js
  Lightweight AJAX library.

Core:

• App.DataModel (data_model.js)
  The primary repository of data and state in the app. Used in all Template Editor templates.
• App.ResponseValidator (response_validator.js)
  Validates responses from the Slice API and formats error messages.
• App.SliceRequester (slice_requester.js)
  Listens for changes to App.DataModel and makes requests to the Slice API as needed.
• App.ComponentLoader (component_loader.js)
  Loads Template Editor templates into components and registers them with VueJS.
• App.RootComponent (app.js)
  Initializes VueJS. Also contains the DOMContentLoaded handle to initialize the app.

Misc:

• app_filters.js
  Implements custom VueJS filters (i.e. money formatting, filter-value formatting, etc.)

Components:

• App.LoadingComponent (loading_component.js)
  A placeholder component that shows a loading animation.
• App.SetupErrorsComponent (setup_errors_component.js)
  Displays setup help.
• App.ContextComponent (context_component.js)
  Used for debugging context data only.
• App.MakeGenericComponent (generic_component.js)
  Used to create shell components to be loaded by App.ComponentLoader to hold Template Editor templates.

Packaging for deployment

For deployment, all dependancies and modules are bundled into a single file.

Bundling order:

• debug.js
• underscore.js
• superagent.js
• vue.js
• date_model.js
• response_validator.js
• slice_requestor.js
• app_filters.js
• loading_component.js
• setup_errors_component.js
• context_component.js
• generic_component.js
• component_loader.js
• app.js

This process can be done automatically by running gulp, which will generate dist/bundle.js and dist/bundle.min.js.

App Lifecycle

Initial load:

• Load scripts
• DOMContentLoaded
• app.js
  • Show about notice
  • Find #esc_navindexer__app
  • Get site domain, search context, and collection context from element
  • Initialize data model with shop domain search and collection
  • Add a link to the Template Editor Style stylesheet to the page.
  • Create a new App.RootComponent
  • Run an initial App.SliceRequester.sendRequest()
• slice_requester.js
  • Create initial 'withDomain' request
  • Get site info (including ID) from response data
  • Load component templates from response data
  • Populate data model with response data

Changes after load is complete:

• User interaction changes some part of the model, i.e. App.DataModel.pagination.current_page
• slice_reqester.js
  • App.DataModel.$watch triggers App.SliceRequester.sendRequest()
  • Check if data model matches last request (abort if true)
  • Create 'withId' request
  • Populate data model with response data