Anatomy of an Addon Ecosystem - EmberConf 2019

Figuring Out an Addon Ecosystem by Reading Code
Line... By... Line

Figuring Out an Addon Ecosystem by Reading Code
Line... By... Line
Special Assistance Provided by

3
• A lifelong Muppet fan
• A maintainer for ember-service-worker
• Web developer for almost 20 years
• Remember before open source was a "thing"
Lisa Backer
Senior Software Engineer, DockYard

3
• A lifelong Muppet fan
• A maintainer for ember-service-worker
• Web developer for almost 20 years
• Remember before open source was a "thing"
Lisa Backer
Senior Software Engineer, DockYard
• Yes... I'm feeling old right now

• Script in your browser that runs in the
background
4
Intro: Service Worker

background
• Can enable ofﬂine cache, intercept network
requests, push notiﬁcations, background
synchronizations, and more
4

background
• Can enable offline cache, intercept network
requests, push notifications, background
synchronizations, and more
• Must be registered from JavaScript by loading
a definition file
4

Intro: Ember-Service-Worker
• An addon that provides a framework
5

• Compiles and register custom service
workers
5

• Compiles and register custom service
workers
• The plugins deﬁne the actual service
worker scripts.
5

Study Goals
9
• What is a "plugin"

Study Goals
9
• How does registration process work

Study Goals
9
• How do we locate plugins that the
application has installed

Study Goals
9
• How do we locate plugins that the
application has installed
• How do we test it all

10
What Is a Plugin?
A plugin is a bundle that adds functionality
to an application, called the host application,
through some well-deﬁned architecture for
extensibility

• Enable developers to extend an application
10
What Is a Plugin?
extensibility

• Reduce the size of the application
10
What Is a Plugin?
extensibility

• Reduce the size of the application
• Provides a well-deﬁned API
10
What Is a Plugin?
extensibility

// Configures Ember CLI's build system to not add a fingerprint to sw.js
this.app.options.fingerprint = this.app.options.fingerprint || {};
this.app.options.fingerprint.exclude = this.app.options.fingerprint.exclude || [];
this.app.options.fingerprint.exclude.push('sw.js');
included(app) {
if (this._super.included) {
this._super.included.apply(this, arguments);
}
}
this.app = app;
this.app.options = this.app.options || {};
let options = this.app.options['ember-service-worker'] = this.app.options['ember-service-worker'] || {}
options.registrationStrategy = options.registrationStrategy || 'default';
if (process.env.SW_DISABLED) {
options.enabled = false;
}
if (options.registrationStrategy === 'after-ember' && options.enabled !== false) {
app.import('vendor/ember-service-worker/load-registration-script.js');
}
if (options.enabled === undefined) {
options.enabled = this.app.env !== 'test';
}
// ember-service-worker: index.js

included(app) {
}
}
this.app = app;
}
}
}

included(app) {
}
}
this.app = app;

included(app) {
}
}
this.app = app;
}

included(app) {
}
}
this.app = app;
}
}

included(app) {
}
}
this.app = app;
}
}
}

Searching for the
Import
27

Searching for the
Import
treeForVendor() {
return writeFile('ember-service-worker/load-
registration-script.js', `
.......
`);
}
28

33
http://www.oligrifﬁths.com/broccolijs/
Searching for Broccoli

Broccoli Trees
34
Image credit: http://www.oligrifﬁths.com/broccolijs/

Broccoli Trees
Are actually now called broccoli nodes
34

Broccoli Trees
Represent a set of ﬁles that can be transformed by
plugins
34

Broccoli Trees
plugins
A build function is called on each plugin
34

Broccoli Trees
plugins
A build function is called on each plugin
Broccoli itself is the tool that handles plugging all this
together so that we end up with our build output.
34

included(app) {
...
}
},
treeForVendor() {
return writeFile('ember-service-worker/load-registration-script.js', `
(function() {
if (typeof FastBoot === 'undefined') {
var script = document.createElement('script')
script.src = '${this._getRootURL()}sw-registration.js';
document.body.appendChild(script);
}
})();
`);
}

postprocessTree(type, appTree) {
let options = this._getOptions();
if (type !== 'all' || options.enabled === false) {
return appTree;
}
}
let plugins = this._findPluginsFor(this.project);
// Add the project itself as a possible plugin, this way user can add custom
// service-worker code in their app, without needing to build a plugin.
plugins = [this].concat(plugins, this.project);
let serviceWorkerBuilder = new ServiceWorkerBuilder({
app: this,
appTree,
minifyJS: this.app.options.minifyJS,
fingerprint: this.app.options.fingerprint.enabled,
plugins,
rootURL: this._getRootURL(),
sourcemaps: this.app.options.sourcemaps,
registrationDistPath: options.registrationDistPath
});
let serviceWorkerTree = serviceWorkerBuilder.build('service-worker');
let serviceWorkerRegistrationTree =
serviceWorkerBuilder.build('service-worker-registration');
return mergeTrees([
appTree,
serviceWorkerTree,
serviceWorkerRegistrationTree
], { overwrite: true });

_findPluginsFor(project) {
let addons = project.addons || [];
return addonUtils.filterByKeyword(addons, 'ember-service-worker-plugin');
}
return appTree;
}
}

return appTree;
}
}

app: this,
appTree,
plugins,
});
return appTree;
}
}

• Detect and include speciﬁc directories
• treeFor hooks to process generated trees
Ember-Service-
Worker Plugin API
46

Ember-Service-
Worker Plugin API
47
/service-worker/*
treeForServiceWorker

Ember-Service-
Worker Plugin API
48
/service-worker-registration/*
treeForServiceWorkerRegistration

'use strict';
const EntryPoint = require('./entry-point');
const Funnel = require('broccoli-funnel');
const Rollup = require('./rollup-with-dependencies');
const fs = require('fs');
const mergeTrees = require('broccoli-merge-trees');
const path = require('path');
const rollupReplace = require('rollup-plugin-replace');
const uglify = require('broccoli-uglify-sourcemap');
const TREE_FOR_METHODS = {
'service-worker': 'treeForServiceWorker',
'service-worker-registration': 'treeForServiceWorkerRegistration'
};
const ENTRY_POINT_FILENAMES = {
'service-worker': 'sw.js',
'service-worker-registration': 'sw-registration.js'
};
module.exports = class ServiceWorkerBuilder {
constructor(options) {
this.options = options || {};
this.plugins = options.plugins;
this.appTree = options.appTree;
this.app = options.app;
}
build(type) {
let trees = this._treesForPlugins(type);
return this._compileTrees(trees, ENTRY_POINT_FILENAMES[type]);
}
_treesForPlugins(type) {
return this.plugins.reduce((trees, plugin) => {
let pluginTree = this._treeForPlugin(plugin, type);
// ember-service-worker: lib/service-worker-builder.js

// same as above but for windows paths like D:my-emberember-service-workerwhateversw.js; which are updated before this step to D:/
my-ember/ember-service/worker/whatever/sw.js
// the original one doesn't work when the source code and the %TMP% folder, which ember started to use after v3.5, are located on
different logical drives
// which is quite common in Windows.
/^[a-z]:/(?:[^/:*?"<>|rn]+/)*ember-service-worker/(?:[^/:*?"<>|rn]+/)*[^/:*?"<>|rn]*.js$/i
],
delimiters: ['{{', '}}'],
ROOT_URL: this.options.rootURL
};
return new Rollup(tree, {
inputFiles: '**/*.js',
rollup: {
input: entryFile,
output: {
file: destFile || entryFile,
format: 'iife',
},
exports: 'none',
plugins: [
rollupReplace(rollupReplaceConfig)
]
}
});
}
_uglifyTree(tree) {
if (this.options.minifyJS && this.options.minifyJS.enabled) {
let options = this.options.minifyJS.options || {};
options.sourceMapConfig = this.options.sourcemaps;
return uglify(tree, options);
}
return tree;
}
_babelTranspile(tree) {
let emberCliBabel = this.app.project.addons.filter((a) => a.name === 'ember-cli-babel')[0];
return emberCliBabel.transpileTree(tree, { 'ember-cli-babel': { compileModules: false } });
}
}

};
build(type) {
}

};
build(type) {
}
_treesForPlugins(type) {
return this.plugins.reduce((trees, plugin) => {
let pluginTree = this._treeForPlugin(plugin, type);
if (pluginTree) {
return trees.concat(pluginTree);
}
return trees
}, []);
}

};
_treeForPlugin(plugin, type) {
let pluginPath = path.resolve(plugin.root, type);
let treeForMethod = TREE_FOR_METHODS[type];
let tree;
}
if (fs.existsSync(pluginPath)) {
tree = this.app.treeGenerator(pluginPath);
}
if (plugin[treeForMethod]) {
tree = plugin[treeForMethod](tree, this.appTree);
}
if (tree) {
return new Funnel(tree, {
destDir: plugin.pkg.name + '/' + type
});
}

'service-worker': 'treeForServiceWorker'
};
_treeForPlugin(plugin) {
let pluginPath = path.resolve(plugin.root,'service-worker');
let treeForMethod = 'treeForServiceWorker';
let tree;
}
}
}
if (tree) {
return new Funnel(tree, {
destDir: plugin.pkg.name + '/service-worker'
});
}

};
let tree;
}

};
let tree;
}
}

};
let tree;
}
}
}

'service-worker': 'sw.js',
'service-worker-registration': 'sw-registration.js'
};
build(type) {
}

'service-worker': 'sw.js'
};
build(type) {
let trees = this._treesForPlugins('service-worker');
return this._compileTrees(trees, 'sw.js');
}

_compileTrees(trees, 'sw.js') {
let entryPoint = new EntryPoint(trees, { entryPoint: 'sw.js' });
let tree = mergeTrees(trees.concat(entryPoint), { overwrite: true });
tree = this._babelTranspile(tree);
tree = this._rollupTree(tree, 'sw.js', this.treeDistPath);
tree = this._uglifyTree(tree);
return tree;
}
};
build(type) {
}

}
};
build(type) {
}

};

};
super(inputNodes, {
});
}

};
super(inputNodes, {
});
}
build() {
}, '');
}

};
super(inputNodes, {
});
}
build() {
}, '');
}
if (indexJS) {
}
return lines;

};
super(inputNodes, {
});
}
build() {
}, '');
}
if (indexJS) {
}
return lines;
fs.writeFileSync(path.join(this.outputPath, this.entryPoint), entryPointJS);

}
};
build(type) {
}

}
};
build(type) {
}
tree = this._babelTranspile(tree);
tree = this._rollupTree(tree, 'sw.js', this.treeDistPath);
tree = this._uglifyTree(tree);
return tree;

return appTree;
}
}
return mergeTrees([
appTree,
serviceWorkerTree,
serviceWorkerRegistrationTree
], { overwrite: true });
app: this,
appTree,
plugins,
});

• Not like testing an Ember application
Testing
79

• Testing the build for an application
Testing
79

• Testing in Node.js
Testing
79

• Mocha
Testing
79

• Mocha
Testing
80

• Unit tests for core functionality
81
Testing

• Host addon should test that the API is called
when expected
81
Testing

when expected
• Plugins should test that they implement
required hooks
81
Testing

when expected
• Plugins should test that they implement
required hooks
• Both should test the build output
81
Testing

var helper = require('broccoli-test-helper');
var createBuilder = helper.createBuilder;
// ember-service-worker: node-tests/service-worker-builder-test.js

it('transpiles code with babel', async () => {
let plugins = [generatePlugin('test-project', 'builder-test/babel')];
});

});
let subject = new ServiceWorkerBuilder({ app, plugins });
let output = createBuilder(subject);

});
await output.build();

});
let files = output.read();
assert.property(files, 'sw.js');
assert.equal(files['sw.js'], expected);
await output.build();
let expected = ....;

What We Learned
88
• Plugin architecture is just a fancy way of talking about what
we already know

What We Learned
88
we already know
• Ember addons implement a plugin architecture via hooks
and can provide their own API for other addons

What We Learned
88
we already know
• Broccoli, Babel, and Rollup implement a plugin architecture

What We Learned
88
we already know
• None of these are scary but are usually more complicated
than a hand-wavy demo

What We Learned
88
we already know
• None of these are scary but are usually more complicated
than a hand-wavy demo
• We can take advantage of these concepts to write our own
addon ecosystems

Lisa Backer, DockYard

eshtadc
@eshtadc
@eshtadc
Thank You!
90

Anatomy of an Addon Ecosystem - EmberConf 2019

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Anatomy of an Addon Ecosystem - EmberConf 2019

Similar to Anatomy of an Addon Ecosystem - EmberConf 2019 (20)

Recently uploaded

Recently uploaded (20)

Anatomy of an Addon Ecosystem - EmberConf 2019