emberyvr-list@meetup.com
hello@brewhouse.io
Ember.js For Big $$$
What This Talk Isn’t
Ember 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...
Developer ergonomics
Convention > Configuration
this.resource('person', { path: '/person'});
App.Person = Ember.Object.extend();
App.PersonRout...
One Source of Truth
One Source of Truth
function ajaxCall() {
$.ajax({
url: 'http://example/com/api-endpoint',
})
.done(function(data) {
$('#s...
“A Sprinkling of
JavaScript”
The Basics
MVC
● Wikipedia: consists of application data, business rules, logic and functions
● Ember: properties and behaviour of data p...
View
● Wikipedia: a view can be any representation of information
● Ember: handles complex user interactions
● essentially...
Controller
● Wikipedia: accepts input and converts it to commands for the model or view
● Ember: decorate your models with...
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 o...
Model
App.Person = Ember.Object.create({
firstName: null,
lastName: null
});
var person = App.Person.create({
firstName: ‘...
View
● handlebars
● bound properties
Coming Soon: http://talks.erikbryn.com/htmlbars/#
View
App.PersonView = Ember.View.extend({
classNamesBindings: ['active', 'selected'],
click: function() {
this.get('contro...
View - Template
<h2>{{title}}</h2>
{{#each item in controller}}
{{input value=item.firstName}}
{{input value=item.lastName...
Controller
App.Person = Ember.Object.create({
firstName: null,
lastName: null
});
App.PersonController = Ember.ObjectContr...
Controller
App.PersonController = Ember.ObjectController.extend({
actions: {
clearName: function() {
this.setProperties({
...
MVC + R
● helps manage state as users interact with your app
● the router is responsible for displaying templates and loading data...
Router
/post → show all posts
/post/new → create new post
/post/1 → show post with ID of 1
/post/1/edit → edit post with I...
Router
App.Router.map(function(){
this.resource('posts', { path: '/post/' }, function() {
this.route('new');
this.resource...
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
@paulruescher
paul.ruescher@gmail.com
Thanks!
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Upcoming SlideShare
Loading in …5
×

Ember.js for Big Profit

467 views
400 views

Published on

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

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
467
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember.js for Big Profit

  1. 1. emberyvr-list@meetup.com
  2. 2. hello@brewhouse.io
  3. 3. Ember.js For Big $$$
  4. 4. What This Talk Isn’t Ember vs Angular
  5. 5. What This Talk Is
  6. 6. Performance!
  7. 7. Caching
  8. 8. More requests per second
  9. 9. Lower latency
  10. 10. Networks
  11. 11. Native Apps
  12. 12. Single-Page Apps
  13. 13. Compared to server-side Single-Page Apps
  14. 14. Cons Single-Page Apps
  15. 15. Pros Single-Page Apps
  16. 16. Really? The URL
  17. 17. Document Linking
  18. 18. Manages State
  19. 19. What is Ember? The Basics
  20. 20. What Does Ember Do? ● History management (URL / Router) ● Developer ergonomics ● Easy, fast, two-way binding ● Views built in HTML (Handlebars) ● Ember data
  21. 21. Developer ergonomics
  22. 22. 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
  23. 23. One Source of Truth
  24. 24. 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>'); }); }
  25. 25. “A Sprinkling of JavaScript”
  26. 26. The Basics MVC
  27. 27. ● 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Model App.Person = Ember.Object.create({ firstName: null, lastName: null }); var person = App.Person.create({ firstName: ‘Paul’, lastName: ‘Ruescher’ });
  32. 32. View ● handlebars ● bound properties Coming Soon: http://talks.erikbryn.com/htmlbars/#
  33. 33. View App.PersonView = Ember.View.extend({ classNamesBindings: ['active', 'selected'], click: function() { this.get('controller').send('clearName'); } });
  34. 34. View - Template <h2>{{title}}</h2> {{#each item in controller}} {{input value=item.firstName}} {{input value=item.lastName}} <h2>{{item.fullName}}</h2> {{/each}}
  35. 35. 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'); });
  36. 36. Controller App.PersonController = Ember.ObjectController.extend({ actions: { clearName: function() { this.setProperties({ firstName: null, lastName: null }); } } });
  37. 37. MVC + R
  38. 38. ● 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
  39. 39. 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
  40. 40. Router App.Router.map(function(){ this.resource('posts', { path: '/post/' }, function() { this.route('new'); this.resource('post', { path: '/:post_id' }, function() { this.route('edit'); }); }); });
  41. 41. http://emberjs.jsbin.com/puhorage/2/edit Putting It All Together
  42. 42. Ember Things You Should Know
  43. 43. http://emberjs.com/guides The Guides
  44. 44. Promises
  45. 45. Components
  46. 46. http://emberjs.com/guides/testing/ Testing
  47. 47. Building
  48. 48. https://github.com/yeoman/generator-ember Yeoman Generator
  49. 49. https://github.com/emberjs/ember-rails Ember Rails
  50. 50. https://github.com/stefanpenner/ember-cli EAK and Ember CLI
  51. 51. http://emberjs.com/community/ Super Cool Code Pals
  52. 52. @paulruescher paul.ruescher@gmail.com Thanks!

×