Applying the Adapter Pattern for Analytics in Ember.js Apps

Presented at Boston Ember

At DockYard, most (if not all) Ember apps we build for our clients require analytics in some form or other. For many of these apps, including the Google Analytics tracking script is sufficient. However, we’ve begun to notice an increased interest in other services such as Mixpanel or Kissmetrics for more data minded clients.

Including multiple services (typically we see about 3–5 different analytics in use) with different APIs leads to code duplication, which is less than ideal and generally a maintenance nightmare. I don’t know about you, but deleting repetitive code is one of my favorite things to do — so Michael and I set out to build an Ember addon that would apply the adapter pattern to analytics.

Transcript

1. Applying the Adapter Pattern to Analytics ember-metrics ɾ D O C K YA R D ɾ
2. ohai dere
3. Lauren Tan DockYard Señorita Developer
4. How many of you have apps in production?
8. ga('send', 'event', 'button', 'click', 'nav buttons', 4);
9. mixpanel.track('Clicked Nav Button', { value: 4 });
10. _kmq.push(['record', 'Clicked Nav Button', { value: 4 }]);
11. …
13. y not
14. Ember.get(this, 'metrics').trackEvent({ name: 'Clicked nav button', category: 'Button', action: 'click', label: 'Nav buttons', value: 4 }); One API, do all the things
16. I. What is the Adapter Pattern? II. Creating the Ember Metrics Addon III. Adapters and Blueprints
17. I. What is the Adapter Pattern? II. Creating the Ember Metrics Addon III. Adapters and Blueprints
18. Adapters in Finance http://jsbin.com/xawopi/edit?js,output
19. Acme Co wants to borrow $13,000
20. class Borrower { constructor(name, bank) { this.name = name; this.bank = bank; } loan(amount) { this.bank.lendTo(this, amount); // bank lends money to borrower } }
21. Milton has $10,000 Bill has $5,000 Michael has $5,000
22. class Lender { constructor(name, bank) { this.name = name; this.bank = bank; } deposit(amount) { this.bank.borrowFrom(this, amount); // bank borrows money from lender } }
23. Borrows from Lends from Adapter Client Adaptee
24. const piggyBank = new Bank(); const michael = new Lender('Michael Bolton', piggyBank); const milton = new Lender('Milton Waddams', piggyBank); const bill = new Lender('Bill Lumbergh', piggyBank); const acmeCo = new Borrower('Acme Co', piggyBank); michael.deposit(5000); milton.deposit(10000); bill.deposit(5000); console.log(piggyBank.cash()); // 20000 acmeCo.loan(13000); console.log(acmeCo.report()); // -13000 console.log(piggyBank.cash()); // 7000
25. The bank is the interface between lenders and borrowers
26. I. What is the Adapter Pattern? II. Creating the Ember Metrics Addon III.Adapters and Blueprints
27. $ ember install ember-metrics
28. module.exports = function(environment) { var ENV = { metricsAdapters: [ { name: 'GoogleAnalytics', config: { id: 'UA-XXXX-Y' } }, { name: 'Mixpanel', config: { token: 'xxx' } } ] } }
29. import Ember from 'ember'; export default Ember.Route.extend({ metrics: inject.service(), activate() { this._trackPage(); }, _trackPage() { run.scheduleOnce('afterRender', this, () => { const page = document.location.href; const title = this.routeName; get(this, 'metrics').trackPage({ page, title }); }); } });
30. // only invokes the `trackPage` method on the `GoogleAnalyticsAdapter` metrics.trackPage('GoogleAnalytics', { title: 'My Awesome App' });
32. Creating the Addon
33. Accessing App Config
34. import config from '../config/environment'; export function initialize(_container, application) { const { metricsAdapters = {} } = config; application.register('config:metrics', metricsAdapters, { instantiate: false }); application.inject('service:metrics', 'metricsAdapters', 'config:metrics'); } export default { name: 'metrics', initialize };
35. Metrics Service
36. import Ember from 'ember'; export default Ember.Service.extend({ _adapters: {}, init() { const adapters = Ember.getWithDefault(this, 'metricsAdapters', Ember.A()); this.activateAdapters(adapters); }, activateAdapters(adapterOptions = []) { // 1. activates adapters and adds them to internal cache // 2. is idempotent } });
38. import Ember from 'ember'; export default Ember.Route.extend({ metrics: Ember.inject.service(), afterModel(model) { const metrics = Ember.get(this, 'metrics'); const id = Ember.get(model, 'googleAnalyticsKey'); metrics.activateAdapters([ { name: 'GoogleAnalytics', config: { id } } ]); } });
39. _activateAdapter(adapterOption = {}) { const metrics = this; const { name, config } = adapterOption; const Adapter = this._lookupAdapter(name); return Adapter.create({ metrics, config }); }
40. Leveraging the Container and Resolver
41. const path = 'ember-metrics@metrics-adapters:google-analytics'; const GoogleAnalyticsAdapter = container.lookupFactory(path);
42. Service Interface
43. identify(...args) { this.invoke('identify', ...args); }, alias(...args) { this.invoke('alias', ...args); }, trackEvent(...args) { this.invoke('trackEvent', ...args); }, trackPage(...args) { this.invoke('trackPage', ...args); }
44. invoke(methodName, ...args) { const adaptersObj = Ember.get(this, '_adapters'); const adapterNames = Object.keys(adaptersObj); const adapters = adapterNames.map((adapterName) => { return Ember.get(adaptersObj, adapterName); }); if (args.length > 1) { let [ adapterName, options ] = args; const adapter = Ember.get(adaptersObj, adapterName); adapter[methodName](options); } else { adapters.forEach((adapter) => adapter[methodName](...args)); } }
45. I. What is the Adapter Pattern? II. Creating the Ember Metrics Addon III. Adapters and Blueprints
46. $ ember generate metrics-adapter foo-bar
47. import Ember from 'ember'; export default Ember.Object.extend({ init() { Ember.assert(`[ember-metrics] ${this.toString()} must implement the init hook!`); }, willDestroy() { Ember.assert(`[ember-metrics] ${this.toString()} must implement the willDestroy hook!`); }, metrics: null, config: null, identify: Ember.K, trackEvent: Ember.K, trackPage: Ember.K, alias: Ember.K });
48. import Ember from 'ember'; import BaseAdapter from './base'; export default BaseAdapter.extend({ init() { // setup library and API key }, trackEvent(options = {}) { // tracks event }, trackPage(options = {}) { // tracks pageview }, willDestroy() { // tearsdown library } });
49. I. What is the Adapter Pattern? II. Creating the Ember Metrics Addon III. Adapters and Blueprints
50. thx