michael north "ember.js 2 - future-friendly ambitious apps, that scale!"
TRANSCRIPT
![Page 1: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/1.jpg)
Mike NorthLevanto Financial, Inc.
Ember.js – Modern, Scalable, Ambitious Apps
![Page 2: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/2.jpg)
![Page 3: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/3.jpg)
![Page 4: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/4.jpg)
![Page 5: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/5.jpg)
![Page 6: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/6.jpg)
JS UI FRAMEWORKS99 2000 01 02 03 04 05 06 07 08 09 2010 11 12 13 14 15 16 17
2 2
6 7 8 9 10 11 12
ES3 ES5
@MichaelLNorth
![Page 7: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/7.jpg)
NOW IMAGINE…
• All the micro-libraries
• All the build tools
• All the pre-processors and post-processors
• All of the permutations with typescript, babel, etc…
![Page 8: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/8.jpg)
![Page 9: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/9.jpg)
![Page 10: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/10.jpg)
2
![Page 11: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/11.jpg)
What our users need us to build
![Page 12: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/12.jpg)
What we’re sometimes tempted to build
![Page 13: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/13.jpg)
What our users need us to build
![Page 14: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/14.jpg)
THE EMBER ECOSYSTEMember-cli
Code Generation
Asset Pipeline
Plugins
Extensible CLI
Test Runner
ember.jsSPA routing
Components
Templating
Data Binding
Prioritized Work Queue
ember-dataRequest Construction
JSON Serialization
Redux-like Data Flow
Async Relationships
liquid-fireanimations
ember-collectionvirtualized list
![Page 15: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/15.jpg)
THE EMBER ECOSYSTEM
• Built on strong conventions & opinions
• Focus on developer productivity
• Aligned with web standards
• Abstractions hold up w/ large scale & complexity
• Constantly improving
![Page 16: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/16.jpg)
TEMPLATING
• Handlebars
• Declarative markup, an extension of HTML
• Compiled at build time
• Extensible
Hello, <strong> {{firstName}} {{lastName}} </strong>!
![Page 17: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/17.jpg)
TEMPLATING
• Helpers
• Block vs inline form
• Easy to read and reason about
My pet goes {{#if isDog}}arf
{{else}}meow
{{/if}}
My pet goes {{if isDog "arf" "meow"}}
![Page 18: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/18.jpg)
My pet goes {{if isDog "arf" "meow"}}
function ifHelper(condition, ifTrue, ifFalse) { return condition ? ifTrue : ifFalse }
{{#if isEnabled}} <b>Switch is enabled</b> {{/if}}
function ifHelper(condition, callbackIfTrue) { return condition ? callbackIfTrue() : ''; }
![Page 19: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/19.jpg)
<ul> {{#each arr as |item|}} <li>{{item.name}}</li> {{/each}} </ul>
function eachHelper(array, cb) { return array .map(item => cb(item)) .join(''); }
![Page 20: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/20.jpg)
ROUTING
• Router - Finite State Machine
• Routes - Manage transitions between states
• URLs drive your app this is a core pillar of Ember
![Page 21: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/21.jpg)
ROUTINGember
routing
URL changes
components templatesHTML++
ember-data
store adaptermakes requests
serializertransforms JSON
Talks to API
![Page 22: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/22.jpg)
application
index
application
posts post
author comments
index
index index
indexindex
/URL:
![Page 23: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/23.jpg)
application
posts
posts/index
application
posts post
author comments
index
index index
indexindex
/posts/URL:
![Page 24: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/24.jpg)
application
post
post/index
application
posts post
author comments
index
index index
indexindex
/post/31URL:
![Page 25: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/25.jpg)
application
post
application
posts post
author comments
index
index index
indexindex
{{outlet}}
/post/31/comments/URL:
![Page 26: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/26.jpg)
application
post
application
posts post
author comments
index
index index
indexindex
post/comments
post/comments/index
/post/31/comments/URL:
![Page 27: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/27.jpg)
COMPONENTS
How many of you have been using some type of web component for > 5 years?
![Page 28: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/28.jpg)
COMPONENTS
![Page 29: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/29.jpg)
<my-widget title='Enter your Info'> <my-field name='Username'/> <my-field name='Password'/> </my-widget>
![Page 30: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/30.jpg)
W3C WEB COMPONENT SPEC IS INCOMPLETE!
![Page 31: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/31.jpg)
…AND THIS IS A GOOD THING
WEB UI LIBS ARE JUST A GIANT SERIES OF HACKS
![Page 32: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/32.jpg)
TC39
![Page 33: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/33.jpg)
<my-widget title='Enter your Info'> <my-field name='Username'/> <my-field name='Password'/> </my-widget>
{{#my-widget title='Enter your Info’}} {{my-field name=‘Username’}} {{my-field name=‘Password’}} {{/my-widget}}
![Page 34: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/34.jpg)
init on instantiation
willInsertElement before the component’s element is inserted into the DOM
didInsertElement after the component’s element has been inserted into the DOM
willDestroyElement before the component’s element is removed from the DOM
$(document).ready() for components
Clean up before tear down
EMBER.COMPONENT
![Page 35: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/35.jpg)
EMBER-DATA
• Unidirectional data flow, single atom of state
• Can talk to any API
• Moves data massaging out of your business logic
• Built around fetch (important for SS rendering!)
• Saves tons of time if your API uses consistent conventions
![Page 36: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/36.jpg)
EMBER-DATA: MODEL
• Representation of any (usually persistent) data
• Defined by attributes, and relationships to other models
• “model” is the factory that defines the structure of “records”
// app/models/book.js import DS from 'ember-data';
const { attr, hasMany } = DS;
export default DS.Model.extend({ title: attr('string'), publishedAt: attr('date'), chapters: hasMany('chapter') });
![Page 37: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/37.jpg)
EMBER-DATA: STORE
• Where you get/create/destroy records
• A single source of truth
• This means that all changes are kept in sync!
• Similar concept in Facebook/flux, angular-data
![Page 38: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/38.jpg)
EMBER-DATA: STORE
// (maybe) API request for all records of type "author" this.store.findAll('author'); // (maybe) API request for record of type "post" with id 37 this.store.findRecord('post', 37);
// API request for all records of type "author" this.store.fetchAll('author'); // API request for record of type "post" with id 37 this.store.fetchRecord('post', 37);
// look in cache for all records of type "author" this.store.peekAll('author'); // look in cache for record of type "post" with id 37 this.store.peekRecord('post', 37);
![Page 39: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/39.jpg)
EMBER-DATA: ADAPTER
export default DS.RESTAdapter.extend({ host: 'https://api.github.com',
urlForQuery (query, modelName) { switch(modelName) { case 'repo': return `${this.get('host')}/orgs/${query.orgId}/repos`; default: return this._super(...arguments); } } });
![Page 40: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/40.jpg)
EMBER-DATA: SERIALIZER
export default DS.RESTSerializer.extend({
normalizeResponse(store, modelClass, payload, id, requestType){ const newPayload = { org: payload }; return this._super(store, modelClass, newPayload, id, requestType); }
});
![Page 41: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/41.jpg)
EMBER-CLI
![Page 42: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/42.jpg)
ADOPTION
![Page 43: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/43.jpg)
![Page 44: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/44.jpg)
RECENT DEVELOPMENTS
![Page 45: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/45.jpg)
FASTBOOT
![Page 46: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/46.jpg)
ENGINES
![Page 47: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/47.jpg)
GLIMMER 2
![Page 48: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/48.jpg)
…AND MORE…
![Page 49: Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"](https://reader031.vdocument.in/reader031/viewer/2022012919/58ece25c1a28abc72d8b4665/html5/thumbnails/49.jpg)
THANKS!
COME TO THE EMBER.JS WORKSHOP!