ember.js for big profit
DESCRIPTION
Paul Ruescher's Slide deck from the first Ember.js Meetup - Vancouver. (#EmberYVR) May 14th 2014 at CodeCore Bootcamp. Ember.js is a framework for creating ambitious web applications. What does an "ambitious web application" even mean? What if I’m not working on an ambitious web application? In this talk, Paul will put you through an Ember Bootcamp on your way to $$$.TRANSCRIPT
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
