Post on 17-May-2015
description
emberyvr-list@meetup.com
hello@brewhouse.io
Ember.js For Big $$$
What This Talk Isn’tEmber vs Angular
What This Talk Is
Performance!
Caching
More requests per second
Lower latency
Networks
Native Apps
Single-Page Apps
Compared to server-side
Single-Page Apps
Cons
Single-Page Apps
Pros
Single-Page Apps
Really?
The URL
Document Linking
Manages State
What is Ember?
The Basics
What Does Ember Do?
● History management (URL / Router)
● Developer ergonomics
● Easy, fast, two-way binding
● Views built in HTML (Handlebars)
● Ember data
Developer ergonomics
Convention > Configuration
this.resource('person', { path: '/person'});
App.Person = Ember.Object.extend();
App.PersonRoute = Ember.Route.extend();
App.PersonController = Ember.ObjectController.extend();
App.PersonView = Ember.View.extend();
person.hbs
One Source of Truth
One Source of Truth
function ajaxCall() {
$.ajax({
url: 'http://example/com/api-endpoint',
})
.done(function(data) {
$('#some-element').append('<div class="child-element-name"'> + data.name + '</div><div class="child-element-count">' + data.count + '</div>');
});
}
“A Sprinkling of JavaScript”
The BasicsMVC
● Wikipedia: consists of application data, business rules, logic and functions
● Ember: properties and behaviour of data presented to user
● Ember: anything requiring persistence should be in a model
Model
View
● Wikipedia: a view can be any representation of information
● Ember: handles complex user interactions
● essentially any of the UI elements you see on the screen
Controller
● Wikipedia: accepts input and converts it to commands for the model or view
● Ember: decorate your models with display logic
● Ember: generally handles state that doesn’t need to be persisted
MVC/post → show all posts/post/new → create new post/post/1 → show post with ID of 1/post/1/edit → edit post with ID of 1
ModelApp.Person = Ember.Object.create({
firstName: null,
lastName: null
});
var person = App.Person.create({
firstName: ‘Paul’,
lastName: ‘Ruescher’
});
View
● handlebars
● bound properties
Coming Soon: http://talks.erikbryn.com/htmlbars/#
View
App.PersonView = Ember.View.extend({
classNamesBindings: ['active', 'selected'],
click: function() {
this.get('controller').send('clearName');
}
});
View - Template
<h2>{{title}}</h2>
{{#each item in controller}}
{{input value=item.firstName}}
{{input value=item.lastName}}
<h2>{{item.fullName}}</h2>
{{/each}}
ControllerApp.Person = Ember.Object.create({
firstName: null,
lastName: null
});
App.PersonController = Ember.ObjectController.extend({
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName');
});
ControllerApp.PersonController = Ember.ObjectController.extend({
actions: {
clearName: function() {
this.setProperties({
firstName: null,
lastName: null
});
}
}
});
MVC + R
● helps manage state as users interact with your app
● the router is responsible for displaying templates and loading data
● does this by matching the URL to the routes you define
Router
Router/post → show all posts/post/new → create new post/post/1 → show post with ID of 1/post/1/edit → edit post with ID of 1
Router
App.Router.map(function(){
this.resource('posts', { path: '/post/' }, function() {
this.route('new');
this.resource('post', { path: '/:post_id' }, function() {
this.route('edit');
});
});
});
http://emberjs.jsbin.com/puhorage/2/edit
Putting It All Together
Ember Things You Should Know
http://emberjs.com/guides
The Guides
Promises
Components
http://emberjs.com/guides/testing/
Testing
Building
https://github.com/yeoman/generator-ember
Yeoman Generator
https://github.com/emberjs/ember-rails
Ember Rails
https://github.com/stefanpenner/ember-cli
EAK and Ember CLI
http://emberjs.com/community/
Super Cool Code Pals
@paulruescherpaul.ruescher@gmail.com
Thanks!