modern, scalable, ambitious apps with ember.js
TRANSCRIPT
![Page 1: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/1.jpg)
Mike NorthLevanto Financial, Inc.
Ember.js – Modern, Scalable, Ambitious Apps
![Page 2: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/2.jpg)
![Page 3: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/3.jpg)
![Page 4: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/4.jpg)
![Page 5: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/5.jpg)
![Page 6: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/6.jpg)
JS UI LIBRARIES99 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: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/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: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/8.jpg)
“BEST IN CLASS” OPTIONS FROM EACH CATEGORY?
![Page 9: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/9.jpg)
![Page 10: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/10.jpg)
WHAT ARE SOME OF THE MODERN CHOICES?
![Page 11: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/11.jpg)
2
![Page 12: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/12.jpg)
![Page 13: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/13.jpg)
What our users need us to build
![Page 14: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/14.jpg)
What we’re sometimes tempted to build
![Page 15: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/15.jpg)
What our users need us to build
![Page 16: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/16.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 17: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/17.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 18: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/18.jpg)
TEMPLATING
• Handlebars
• Declarative markup, an extension of HTML
• Compiled at build time
• Extensible
Hello, <strong> {{firstName}} {{lastName}} </strong>!
![Page 19: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/19.jpg)
define('examples/templates/index', ['exports'], function (exports) {
'use strict';
exports['default'] = Ember.HTMLBars.template((function() { return { ... buildFragment: function buildFragment(dom) { var el0 = dom.createDocumentFragment(); var el1 = dom.createTextNode("Hello, "); dom.appendChild(el0, el1); var el1 = dom.createElement("strong"); var el2 = dom.createComment(""); dom.appendChild(el1, el2); var el2 = dom.createTextNode(" "); dom.appendChild(el1, el2); var el2 = dom.createComment(""); dom.appendChild(el1, el2); dom.appendChild(el0, el1); var el1 = dom.createTextNode("!"); dom.appendChild(el0, el1); return el0; }, buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) { var element0 = dom.childAt(fragment, [1]); var morphs = new Array(2); morphs[0] = dom.createMorphAt(element0,0,0); morphs[1] = dom.createMorphAt(element0,2,2); return morphs; }, statements: [ ["content","firstName",["loc",[null,[1,15],[1,28]]]], ["content","lastName",["loc",[null,[1,29],[1,41]]]] ],
... }; }()));});
![Page 20: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/20.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 21: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/21.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 22: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/22.jpg)
<ul> {{#each arr as |item|}} <li>{{item.name}}</li> {{/each}} </ul>
function eachHelper(array, cb) { return array .map(item => cb(item)) .join(''); }
![Page 23: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/23.jpg)
ROUTING
• Router - Finite State Machine
• Routes - Manage transitions between states
• URLs drive your app this is a core pillar of Ember
![Page 24: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/24.jpg)
ROUTINGember
routing
URL changes
components templatesHTML++
ember-data
store adaptermakes requests
serializertransforms JSON
Talks to API
![Page 25: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/25.jpg)
application
index
application
posts post
author comments
index
index index
indexindex
/URL:
![Page 26: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/26.jpg)
application
posts
posts/index
application
posts post
author comments
index
index index
indexindex
/posts/URL:
![Page 27: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/27.jpg)
application
post
post/index
application
posts post
author comments
index
index index
indexindex
/post/31URL:
![Page 28: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/28.jpg)
application
post
application
posts post
author comments
index
index index
indexindex
{{outlet}}
/post/31/comments/URL:
![Page 29: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/29.jpg)
application
post
application
posts post
author comments
index
index index
indexindex
post/comments
post/comments/index
/post/31/comments/URL:
![Page 30: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/30.jpg)
COMPONENTS
How many of you have been using some type of web component for > 5 years?
![Page 31: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/31.jpg)
COMPONENTS
![Page 32: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/32.jpg)
<my-widget title='Enter your Info'> <my-field name='Username'/> <my-field name='Password'/> </my-widget>
![Page 33: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/33.jpg)
W3C WEB COMPONENT SPEC IS INCOMPLETE!
![Page 34: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/34.jpg)
…AND THIS IS A GOOD THING
WEB UI LIBS ARE JUST A GIANT SERIES OF HACKS
![Page 35: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/35.jpg)
TC39
![Page 36: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/36.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 37: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/37.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 38: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/38.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 39: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/39.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 40: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/40.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 41: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/41.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 42: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/42.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 43: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/43.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 44: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/44.jpg)
EMBER-CLI
![Page 45: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/45.jpg)
ADOPTION
![Page 46: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/46.jpg)
![Page 47: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/47.jpg)
RECENT DEVELOPMENTS
![Page 48: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/48.jpg)
FASTBOOT
![Page 49: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/49.jpg)
ENGINES
![Page 50: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/50.jpg)
GLIMMER 2
![Page 51: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/51.jpg)
…AND MORE…
![Page 52: Modern, Scalable, Ambitious apps with Ember.js](https://reader035.vdocuments.site/reader035/viewer/2022062412/587871421a28ab497b8b62e1/html5/thumbnails/52.jpg)
THANKS!
COME TO THE EMBER.JS WORKSHOP!