Download to read offline
![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]]]]
],
...
};
}()));
});](https://image.slidesharecdn.com/js-frameworks-day-emberjs-160418105205/85/Modern-Scalable-Ambitious-apps-with-Ember-js-19-320.jpg)
Uploaded byMike North
Modern, Scalable, Ambitious apps with Ember.js
The document discusses Ember.js, a framework for building modern web applications focusing on scalability and developer productivity. It covers key features including templating, routing, and data management via Ember Data, emphasizing strong conventions and web standards. The content outlines the Ember ecosystem, its tools, and recent developments, aimed at enhancing the user experience and encouraging developers to adopt Ember.js.
More Related Content
Similar to Modern, Scalable, Ambitious apps with Ember.js
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Modern, Scalable, Ambitious apps with Ember.js
- 1. Mike North Levanto Financial,Inc. Ember.js – Modern, Scalable, Ambitious Apps
- 6. JS UI LIBRARIES 992000 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
- 7. NOW IMAGINE… • Allthe micro-libraries • All the build tools • All the pre-processors and post-processors • All of the permutations with typescript, babel, etc…
- 8. “BEST IN CLASS”OPTIONS FROM EACH CATEGORY?
- 10. WHAT ARE SOMEOFTHE MODERN CHOICES?
- 11.
- 13. What our usersneed us to build
- 14. What we’re sometimestempted to build
- 15. What our usersneed us to build
- 16. THE EMBER ECOSYSTEM ember-cli CodeGeneration Asset Pipeline Plugins Extensible CLI Test Runner ember.js SPA routing Components Templating Data Binding Prioritized Work Queue ember-data Request Construction JSON Serialization Redux-like Data Flow Async Relationships liquid-fire animations ember-collection virtualized list
- 17. 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
- 18. TEMPLATING • Handlebars • Declarativemarkup, an extension of HTML • Compiled at build time • Extensible Hello, <strong> {{firstName}} {{lastName}} </strong>!
- 19. 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]]]] ], ... }; }())); });
- 20. TEMPLATING • Helpers • Blockvs inline form • Easy to read and reason about My pet goes {{#if isDog}} arf {{else}} meow {{/if}} My pet goes {{if isDog "arf" "meow"}}
- 21. 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() : ''; }
- 22. <ul> {{#each arr as|item|}} <li>{{item.name}}</li> {{/each}} </ul> function eachHelper(array, cb) { return array .map(item => cb(item)) .join(''); }
- 23. ROUTING • Router -Finite State Machine • Routes - Manage transitions between states • URLs drive your app this is a core pillar of Ember
- 24. ROUTING ember routing URL changes components templates HTML++ ember-data storeadapter makes requests serializer transforms JSON Talks to API
- 25. application index application posts post author comments index indexindex indexindex /URL:
- 26. application posts posts/index application posts post author comments index indexindex indexindex /posts/URL:
- 27. application post post/index application posts post author comments index indexindex indexindex /post/31URL:
- 28. application post application posts post author comments index indexindex indexindex {{outlet}} /post/31/comments/URL:
- 29. application post application posts post author comments index indexindex indexindex post/comments post/comments/index /post/31/comments/URL:
- 30. COMPONENTS How many ofyou have been using some type of web component for > 5 years?
- 31.
- 32. <my-widget title='Enter yourInfo'> <my-field name='Username'/> <my-field name='Password'/> </my-widget>
- 33. W3C WEB COMPONENTSPEC IS INCOMPLETE!
- 34. …ANDTHIS IS AGOODTHING WEB UI LIBS ARE JUST A GIANT SERIES OF HACKS
- 35.
- 36. <my-widget title='Enter yourInfo'> <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}}
- 37. init on instantiation willInsertElementbefore 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
- 38. EMBER-DATA • Unidirectional dataflow, 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
- 39. EMBER-DATA: MODEL • Representationof 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') });
- 40. EMBER-DATA: STORE • Whereyou 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
- 41. 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);
- 42. 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); } } });
- 43. EMBER-DATA: SERIALIZER export defaultDS.RESTSerializer.extend({ normalizeResponse(store, modelClass, payload, id, requestType){ const newPayload = { org: payload }; return this._super(store, modelClass, newPayload, id, requestType); } });
- 44.
- 45.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. THANKS! COME TO THEEMBER.JS WORKSHOP!