An overview of recent improvements to the FSGO web application.
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.
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.
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.
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.
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:
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,
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.
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.
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.
README overview
Application-related information is added to the repository and updated alongside the application to improve communication about the application.
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
};
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.
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.