a naive approach to feature based js apps
TRANSCRIPT
Feature-based JS appsThe naïve approach
ENGINEERING IMPLEMENTATIONS
ROAD TO IDEA
ROAD TO SOLUTION
application = set of features
features are pluggable
function shootOnTarget(model) {
// do stuffs
return newmodel;
}
const myApplication = globular.initializeApp(‘hockey-shot-recorder');
myApplication.extendWithFeature('shoot-on-target', shootOnTarget);
myApplication.executeFeature('shoot-on-target', {
“player”: 23,
“team”: “FTC”,
“period”: 1
});
application = set of features
features are pluggable
outputs of features could be used in any number of views
class ShootOnTarget {
constructor() {
this.views = [];
}
execute(model) {
// do stuffs
this.views.forEach(view => {
view(newmodel);
});
}
pluginView(view) {
this.view.push(view);
}
}
const myApplication = globular.initializeApp('hockey-shot-record');
const shootOnTarget = new ShootOnTarget();
shootOnTarget.pluginView(model => {
// do stuffs
});
myApplication.extendWithFeature('shoot-on-target', shootOnTarget);
myApplication.executeFeature('shoot-on-target', {
"player": 23,
"team": "FTC",
"period": 1
});
application = set of features
features are pluggable
outputs of features could be used in any number of views
features use common resources (e.g. persistency)
class ShootOnTarget {
constructor({persistency, api}) {
this.persistency = persistency;
this.api = api;
this.views = [];
}
// …
// ‘execute()’ method refers to persistency and api props
// while doing its stuff
}
const myApplication = globular.initializeApp('hockey-shot-record');
const shootOnTarget = new ShootOnTarget({persistency, api}));
shootOnTarget.pluginView(model => {
// do stuffs
});
myApplication.extendWithFeature('shoot-on-target', shootOnTarget);
myApplication.executeFeature('shoot-on-target', {
"player": 97,
"team": "FTC",
"period": 1
});
const myApplication = globular.initializeApp('hockey-shot-record');
const shootOnTarget = new ShootOnTarget({persistency, api}));
shootOnTarget.pluginView(model => {
// do stuffs
});
myApplication.extendWithFeature('shoot-on-target', shootOnTarget);
myApplication.executeFeature('shoot-on-target', {
"player": 97,
"team": "FTC",
"period": 1
});
class ShootOnTarget {
constructor({persistency, api}) {
this.persistency = persistency;
this.api = api;
}
execute(model) {
// uses persistency/api and
// returns a promise
}
}
const myApplication = globular.initializeApp('hockey-shot-record');
myApplication.extendWithFeature('shoot-on-target', ShootOnTarget);
myApplication.getFeature('shoot-on-target').pluginView(model => {
// do stuffs
});
myApplication.executeFeature('shoot-on-target', {
"player": 11,
"team": "FTC",
"period": 1
});
WHY IS IT GOOD FOR ME?
testable applications via testing features
pure Javascript/ES2015 implementations
DOM-manipulation is out of app’s scope
focus on functionalities
WHAT IS IT, BY THE WAY?
https://www.npmjs.com/package/globular
