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 $$$.

1. emberyvr-list@meetup.com

3. hello@brewhouse.io

4. Ember.js For Big $$$

5. What This Talk Isn’t
Ember vs Angular

6. What This Talk Is

7. Performance!

8. Caching

9. More requests per second

10. Lower latency

11. Networks

12. Native Apps

13. Single-Page Apps

14. Compared to server-side
Single-Page Apps

15. Cons
Single-Page Apps

16. Pros
Single-Page Apps

17. Really?
The URL

18. Document Linking

19. Manages State

21. What is Ember?
The Basics

22. What Does Ember Do?
● History management (URL / Router)
● Developer ergonomics
● Easy, fast, two-way binding
● Views built in HTML (Handlebars)
● Ember data

23. Developer ergonomics

24. 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

25. One Source of Truth

26. 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>');
});
}

27. “A Sprinkling of
JavaScript”

28. The Basics
MVC

29. ● 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

30. 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

31. 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

32. 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

33. Model
App.Person = Ember.Object.create({
firstName: null,
lastName: null
});
var person = App.Person.create({
firstName: ‘Paul’,
lastName: ‘Ruescher’
});

34. View
● handlebars
● bound properties
Coming Soon: http://talks.erikbryn.com/htmlbars/#

35. View
App.PersonView = Ember.View.extend({
classNamesBindings: ['active', 'selected'],
click: function() {
this.get('controller').send('clearName');
}
});

36. View - Template
<h2>{{title}}</h2>
{{#each item in controller}}
{{input value=item.firstName}}
{{input value=item.lastName}}
<h2>{{item.fullName}}</h2>
{{/each}}

37. Controller
App.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');
});

38. Controller
App.PersonController = Ember.ObjectController.extend({
actions: {
clearName: function() {
this.setProperties({
firstName: null,
lastName: null
});
}
}
});

39. MVC + R

40. ● 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

41. 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

42. Router
App.Router.map(function(){
this.resource('posts', { path: '/post/' }, function() {
this.route('new');
this.resource('post', { path: '/:post_id' }, function() {
this.route('edit');
});
});
});

44. http://emberjs.jsbin.com/puhorage/2/edit
Putting It All Together

45. Ember Things You
Should Know

46. http://emberjs.com/guides
The Guides

47. Promises

48. Components

49. http://emberjs.com/guides/testing/
Testing

50. Building

51. https://github.com/yeoman/generator-ember
Yeoman Generator

52. https://github.com/emberjs/ember-rails
Ember Rails

53. https://github.com/stefanpenner/ember-cli
EAK and Ember CLI

54. http://emberjs.com/community/
Super Cool Code Pals

55. @paulruescher
paul.ruescher@gmail.com
Thanks!