a naive approach to feature based js apps

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

peppierre@gmail.com

@peppierre

peppierre