Your SlideShare is downloading. ×
0
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Ember.js for Big Profit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ember.js for Big Profit

276

Published on

Paul Ruescher's Slide deck from the first Ember.js Meetup - Vancouver. (#EmberYVR) May 14th 2014 at CodeCore Bootcamp. …

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
276
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×