An overview of recent improvements to the FSGO web application.

  1. gulp, Denis Vlassenko


    'gulp' is a deployment tool. It optimizes, concatenates and minifies application files. It gives scripted access to deployment so things like static analysis, preprocessing, linting and unit-testing may be attached. fewer files, smaller payload.

  2. express, Chris DePauw


    'express' is a web server software (Node). With express deploy and test the application locally. Easily write mock-up, proxy and test services.

    No special knowledge or configuration is needed. Anyone can deploy the web application from their desktop. Prototype and test new features quickly and collaboratively.

  3. unit tests, Denis Vlassenko, Chris DePauw


    Unit tests are a source of information and serve as a baseline for minimum behaviour. When the function is modified tests ensure there are no regressions. more information. fewer bugs.

  4. npm, Denis Vlassenko, Chris DePauw

    npm is the Node Package manager. It gives us express and gulp and will provide more application behaviour. npm enables us to leverage existing, commonly-used and tested public modules in favor of locally-developed scripts.

    An npm module I have published.

  5. configuration, Chris DePauw

    Configuration values hard-coded to the application are now defined in JSON files that are easier to modify and create. Configuration can be directed with url params, resulting in fewer deployments with less confusion.

    // copied from configuration unit test fsgo_cfg.spec.js
    var configurationarr = [                     // DEV   QA    STG   PROD  STGUZT
     ['globalconfig_jsonp_path'                   , qa,   qa,   stg,  prod, prod],
     ['thumbconfig_jsonp_path'                    , qa,   qa,   stg,  prod, prod],
     ['tealium_path'                              , dev,  qa,   qa,   prod, prod],
     ['mpx_feed_playlistid'                       , stg,  stg,  stg,  prod, prod],
     ['anvato_accesskey'                          , stg,  stg,  stg,  prod, stguzt],
     ['anvato_accesssecret'                       , stg,  stg,  stg,  prod, stguzt],
     ['anvato_accesscontrol'                      , stg,  stg,  stg,  prod, prod],
     ['anvato_plugin_heartbeat_account'           , prod, prod, prod, prod, prod],
     ['anvato_plugin_heartbeat_marketingcloudid'  , prod, prod, prod, prod, prod],
     ['anvato_plugin_dfp_preroll_adtagurl'        , stg,  stg,  stg,  prod, prod]

    Interactively change configuration with links like these:

  6. Deeplink Chris DePauw, Roopa Samudrala


    Deeplinking is added to the FOX-layer of the application (previously handled by Anvato-player). For deeplinking several new features are added to the application,

    1. methods to obtain and operate on user, mpx, and mcp data, previously unhandled,
    2. recognition of the "mcpblock" data structure --a container for mpx definitions associated with an mcpid,
    3. public methods for interactive development at the browser-console,
    4. Anvato player wrapper used to control and analyze player input and output
  7. Log Denis Vlassenko


    Messages are printed differently from numerous Adobe-scripted messages and do not appear in the production application. Clear messaging helps to quickly develop new features.

  8. SVG logo, Nick Perdomo


    FSGO uses an SVG logo, resizable with full quality. SVG are easier to manipulate with browser scripts and styles. Older browsers without SVG support continue using the png logo.

  9. FOUC (Flash Of Unstyled Content) Chris DePauw

    Unwanted visual transformation is reduced during initialization, for a more controlled visual experience.

    The changes facilitate a small performance improvement.

    fouc oldfouc new

  10. README overview


    Application-related information is added to the repository and updated alongside the application to improve communication about the application.

  11. Deployment Siarhei Hoidz, Denis Vlassenko

    Deployment-related information is persisted to an application file. This makes it easier to request files using a cache strategy and it indicates which version of the application is served.

    var version = {
      build: 'sipte-1.019.2-v2', // revision or tag name
      environment: 'prod'        // dev|qa|stage|prod
  12. aerobus Denis Vlassenko


    Passes data to parts of the application using controlled pipelines. The bus allows loose coupling, a "system in which each of its components has, or makes use of, little or no knowledge of the definitions of other separate components." Improves code re-usability.