EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT...
Transcript of EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT...
![Page 1: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/1.jpg)
A framework for creatingambitious web applications
EMBER.JS
![Page 2: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/2.jpg)
WHAT IS EMBER?
![Page 3: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/3.jpg)
DATA BINDING.
![Page 4: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/4.jpg)
COMPUTED PROPERTIES.
![Page 5: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/5.jpg)
DATA-BOUND DECLARATIVE TEMPLATES.
We want it to be possible to define your view structure declaratively, with its data requirements, and leave code for handling events.
![Page 6: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/6.jpg)
MVC STRUCTURE.
Rant:
MVC/MVVM/MVP/etc. all mean the same thing
* Data* View* Intermediary
![Page 7: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/7.jpg)
EMBER MVC.
Model Model Model
Controller
View View View
![Page 8: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/8.jpg)
ARRAY CONTROLLER.Person Person Person
PeopleController
ListView StatsView Button
ArrayProxymalesdraftMales
namegenderisDrafted
![Page 9: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/9.jpg)
OPTIONALEMBER-DATA.
![Page 10: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/10.jpg)
ROLLING INEMERGING PATTERNS.
One of Ember’s main goals to identify common patterns and make them conventional.
As patterns emerge, we work to reduce the boilerplate necessary to implement them.
![Page 11: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/11.jpg)
WHY?
![Page 12: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/12.jpg)
MANAGESCOMPLEXITY.
Ember aims to reduce the complexity created by the links between many moving pieces by clearly defining how communication occurs between parts of your application.
![Page 13: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/13.jpg)
MAKES YOU MORE PRODUCTIVE.
Ember’s philosophy is that by eliminating trivial choices and making the answers conventional, you can focus your energy on non-trivial problems.
This philosophy is taken directly from Rails.
![Page 14: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/14.jpg)
BUILT FOR THELONG HAUL.
Ember is not a throwaway weekend project or a corporate-sponsored project.
It is built by and for the Ember community, an open source project first and only.
![Page 15: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/15.jpg)
OPTIMIZED FOR
DEVELOPER HAPPINESS.
![Page 16: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/16.jpg)
OBJECT MODEL.
![Page 17: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/17.jpg)
Person = Ember.Object.extend({ firstName: null, lastName: null});
CLASSES.
![Page 18: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/18.jpg)
Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") }}); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz"}).hello();
MIXINS.
![Page 19: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/19.jpg)
Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") }}); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz"}).hello();
MIXINS.
![Page 20: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/20.jpg)
Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'), last = this.get('lastName'); return first + " " + last + ": HELLO"; }}); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; }}); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; }}); alert(phil.hello());
MIXINS AND SUPER.
![Page 21: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/21.jpg)
Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'), last = this.get('lastName'); return first + " " + last + ": HELLO"; }}); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; }}); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; }}); alert(phil.hello());
MIXINS AND SUPER.
![Page 22: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/22.jpg)
Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')}); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz"}); alert(yehuda.get('fullName'));
COMPUTED PROPS.
![Page 23: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/23.jpg)
Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')}); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz"}); alert(yehuda.get('fullName'));
COMPUTED PROPS.
![Page 24: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/24.jpg)
UNIFORM ACCESSIS GREAT FORREFACTORING.
![Page 25: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/25.jpg)
IT ALSO GIVESBINDINGS ASINGLE RULE.
![Page 26: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/26.jpg)
>> Core = Ember.Namespace.create();>> Core.Person = Ember.Person.extend();>> Core.Person.toString(); => Core.Person>> Core.Person.create().toString();=> <Core.Person:ember157>
NAMESPACES.
![Page 27: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/27.jpg)
MASSIVELYIMPROVEDDEBUGGING.
![Page 28: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/28.jpg)
CAN USE NAMESIN CONVENTIONS.
This is something Rails does a lot of, and which is hard to do in JS since klass.name is not available in general.
We use this extensively in the default REST adapter in ember-data.
![Page 29: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/29.jpg)
App.Post = DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string')}); // vs. App.Post = DS.Model.extend({ collectionURL: "/posts", singleURL: "/post", title: DS.attr('string'), body: DS.attr('string')});
CONVENTIONS.
![Page 30: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/30.jpg)
A SINGLE, RICHOBJECT MODEL.
![Page 31: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/31.jpg)
THE BASIC RULESAPPLY TO ALLKINDS OF OBJECTS.
![Page 32: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/32.jpg)
LIKEBACKBONE EVENTSON STEROIDS.
Our goal, again is to wrap up common patterns in the base distribution so that you don’t have to think about them all the time.
![Page 33: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/33.jpg)
THEVIEW
LAYER.
![Page 34: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/34.jpg)
<ul> <li>First</li> <li>Second</li> <li>Third</li></ul>
DATA BOUND.
![Page 35: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/35.jpg)
<ul> {{#each App.items}} <li>{{name}}</li> {{/each}}</ul>
DATA BOUND.
![Page 36: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/36.jpg)
App.items = [ { name: "One" }, { name: "Two" }, { name: "Three" }];
DATA BOUND.
![Page 37: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/37.jpg)
App.items = [ { name: "One" }, { name: "Two" }, { name: "Three" }];
DATA BOUND.
• One• Two• Three
![Page 38: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/38.jpg)
App.items.pushObject({ name: "Fourth"});
DATA BOUND.
![Page 39: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/39.jpg)
App.items.pushObject({ name: "Fourth"});
DATA BOUND.
• One• Two• Three
![Page 40: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/40.jpg)
App.items.pushObject({ name: "Fourth"});
DATA BOUND.
• One• Two• Three
• One• Two• Three• Fourth
![Page 41: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/41.jpg)
App.items .objectAt(0) .set('name', '1');
DATA BOUND.
![Page 42: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/42.jpg)
App.items .objectAt(0) .set('name', '1');
DATA BOUND.
• One• Two• Three• Fourth
![Page 43: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/43.jpg)
App.items .objectAt(0) .set('name', '1');
DATA BOUND.
• One• Two• Three• Fourth
• 1• Two• Three• Fourth
![Page 44: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/44.jpg)
{{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> </div>{{else}} <img src="/images/loading.gif">{{/if}}
CONDITIONALS.
![Page 45: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/45.jpg)
App = Ember.Application.create(); jQuery.getJSON("/bootstrap", function(json) { App.set('title', json.title); App.set('body', json.body); App.set('isLoaded', true); });
ASYNCHRONY.
![Page 46: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/46.jpg)
{{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{#view App.DashboardView}} {{#each App.widgetsController}} {{view App.Widget widgetBinding="this"}} {{/each}} {{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget! {{/view}} {{/view}} </div>{{else}} <img src="/images/loading.gif">{{/if}}
DECLARATIVE.
![Page 47: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/47.jpg)
{{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{view App.DashboardView templateName="dashboard"}} </div>{{else}} <img src="/images/loading.gif">{{/if}} <!-- dashboard template -->{{#each App.widgetsController}} {{view App.Widget widgetBinding="this"}}{{/each}}{{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget!{{/view}}
COMPOSABLE.
![Page 48: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/48.jpg)
App.ButtonView = Ember.View.extend({ tagName: "button", didInsertElement: function() { this.$().button(); }});
CUSTOMIZABLE.
![Page 49: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/49.jpg)
{{#view App.ButtonView}}Hi!{{/view}}
CUSTOMIZABLE.
![Page 50: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/50.jpg)
App.ButtonView = Ember.ButtonView.extend({ didInsertElement: function() { this.$().button(); }});
CUSTOMIZABLE.
Ember’s controls are UI-agnostic, so you can use the semantics (like target/action, text field) without having to back out Ember-supplied UI.
![Page 51: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/51.jpg)
{{#view App.ButtonView target="App.widgetController" action="new"}} New Widget{{/view}}
CUSTOMIZABLE.
![Page 52: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/52.jpg)
<body> <script type="text/x-handlebars"> <!-- view contents here --> </script></body>
TEMPLATES.
![Page 53: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/53.jpg)
<head> <script type="text/x-handlebars" data-template-name="name"> <!-- view contents here --> </script></head>
NAMED TEMPLATES.
![Page 54: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/54.jpg)
Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string);
TEMPLATES.
![Page 55: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/55.jpg)
Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string); Ember.TEMPLATES["other"] = function() { return "hi!" };
TEMPLATE API.
You will need to do property lookups through .get, so at least a bit of template engine customizability is required. If arbitrary code is allowed, you can even implement observable helpers.
![Page 56: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/56.jpg)
BASIC APPARCHITECTURE
![Page 57: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/57.jpg)
ARCHITECTURE.
Models
Controllers
providedata to
Views
providedata to
![Page 58: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/58.jpg)
ARCHITECTURE.
Models
Controllers
triggereventson
Views
modify
![Page 59: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/59.jpg)
ARCHITECTURE.
Models
Controllers
updates
Views
updates
![Page 60: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/60.jpg)
EXAMPLE.
![Page 61: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/61.jpg)
FLASHCARDS.
Deck, Card
CardsController
Decks, Deck, Cards
1 deck10 cards
7 left to study
1 deck10 cards7 left to study
1 deck10 cards
![Page 62: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/62.jpg)
FLASHCARDS.
Deck, Card
CardsController
Decks, Deck, Cards
createnewcard
createnewcard
1 deck11 cards8 left to study
1 deck11 cards
![Page 63: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/63.jpg)
FLASHCARDS.
Deck, Card
CardsController
Decks, Deck, Cards
1 deck11 cards8 left to study
new card addedleft to study goes to 8
render new cardupdate # left
![Page 64: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/64.jpg)
RULE OF THUMB.
![Page 65: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/65.jpg)
■ Models contain persistable data
■ Controllers proxy models and add client-side application state
■ Views represent a single representation of persistable or application state
RULE OF THUMB.
![Page 66: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/66.jpg)
EVOLVING PATTERNS
![Page 67: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/67.jpg)
ROUTING.
![Page 68: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/68.jpg)
STATE MANAGERS.
![Page 69: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/69.jpg)
PERSISTENCE.
![Page 70: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/70.jpg)
IMPROVED DEBUGGING.
Deferred, asynchronous code can be hard to debug (what caused that callback to be triggered?!)
A debug build could provide more information, at the cost of slower performance. We’re also working on and off on a Chrome extension.
![Page 71: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/71.jpg)
DOCUMENTATION.
Our documentation is sparse and currently focused on the top-down. Generated documentation is coming, as is more information on common patterns not yet encapsulated in code.
![Page 72: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/72.jpg)
RAILS INTEGRATION.Ember works well with any (or no) server-side framework. Because Rails and Ember share philosophies, we can leverage conventions on both sides to further reduce boilerplate for people willing to adhere to even more strict rules about file structure and REST APIs.
![Page 73: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/73.jpg)
AS PATTERNSSOLIDIFY, WE ROLLTHEM IN.
![Page 74: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/74.jpg)
SOMETIMES WEGIVE THEM ALITTLE PUSH.
![Page 75: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/75.jpg)
THANKYOU.
![Page 76: EMBER · 2019-12-04 · source project first and only. OPTIMIZED FOR DEVELOPER HAPPINESS. OBJECT MODEL. Person = Ember.Object.extend( ... Controllers proxy models and add client-side](https://reader034.fdocuments.net/reader034/viewer/2022042417/5f32e1427d16db22a82bb73f/html5/thumbnails/76.jpg)
@WYCATS
@EMBERJSEMBERJS.COM
GITHUB.COM/EMBERJSIRC #EMBERJS