whois dean sofer?

• Github.com/ProLoser
• Señor Engineer at Sony
• Founder of AngularUI
• Started on CakePHP/jQuery
• Playstation Vue Architect
• Glorious mustache proprietor

Wise Man Says

• API design === User Experience Design
• Refactor-friendly FTW
• Composition over Convention
• Obfuscation for its own sake is evil
• Pretend everything is public
• Expect the unexpected

Node First

• The library is node first, everything else second
• Node packages and standards increase compatibility
• Ember has a very specific and opinionated API
• Core library is written without knowledge of Ember

ES6 in Node.js

• Native ES6 support with 'use strict'
• Easier development / debugging
• See node.green for details
• Compiled source tree for most
• BUT DON'T BUNDLE NODE CODE!

Bundling Antipattern

Library
- Dependency A
- Dependency B

Compiled Tree

/*** core-library/package.json ***/
{
  ...
  "main": "compiled/index.js",
  "dependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel": "^6.5.2"
  }
}

/*** core-library/.babelrc ***/

{
  "presets": [
    "es2015"
  ]
}

Save the trees!

Node in Ember

Compiling Antipattern

DON'T double compile your code

es6

compile

compile

es5

bundled

Targetting Clients

es6

es5 bundled

browserify

Separating Concerns

• What can I do without Ember?
  • Classes
  • Queries
  • Reads
  • Utilities
• What must I do with Ember?
  • Rendering
  • Ember.set()
  • Function.property()

Show me

the Code

/*** core-library/Base.js ***/
class Base {
  constructor(data) {
    Object.assign(this, data);
  }
}
module.exports = Base;

/*** core-library/Project.js ***/
const Base = require('./Base');
const Task = require('./Task');

class Project extends Base {
  static get(id) {
    return query(`/projects/${id}`).then( project =>
      new Project( project );
    );
  }
  constructor(data) {
    super(data);
    this.tasks = this.tasks.map( task => 
      new Task( task )
    );
  }
  isComplete() {
    return this.tasks.every( task => 
      task.completed
    );
  }
}
module.exports = Project;

But Ember-Data!

• Ember-Data doesn't work for everything
• Want to use business logic outside of Ember
• We have a terrible server API
• Easy to roll our own with ES6
• Code is transparent and refactor friendly

ember Wrapper

/*** my-addon ***/

import CoreLibrary from 'npm:core-library';
import Ember from 'ember';

const Base = CoreLibrary.Base;

// Monkey-patch CoreLibrary with Ember utils
Base.prototype.set = function(property, value) {
    return Ember.set(this, property, value);
};
Base.prototype.get = function(property) {
    return Ember.get(this, property);
};

// Configure environment for Ember statically
CoreLibrary.setPromiseLibrary(Ember.RSVP.Promise);
CoreLibrary.configure({ ... });

// Or create Ember configured instance
export default new CoreLibrary({ ... });

• Ember addon for core library
• Handles installation
• Handles dependencies
• Handles library configuration
• Adds Ember-specific logic
• NOT an alias for core library

Ember Wrapper Setup

my-app/
  node_modules/
    ember-browserify/

    my-addon/
      addon/
        index.js

      app/
        dependencies.js

      blueprints/
        my-addon/
          index.js

    core-library/
      library.js
      package.json

      node_modules/
        babelify/
        babel-preset-es2015/

Ready to Use

ember install my-addon