Intro to Ember.js

3,194 views

Published on

Slides from my presentation at the Ember.js Southern California Meetup.

Demo application source: https://gist.github.com/jayphelps/6036938

Published in: Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,194
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
171
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Intro to Ember.js

  1. 1. Thursday, July 18, 13
  2. 2. Intro To Jay Phelps https://github.com/jayphelps July 18, 2013 1.0.0-rc.6 Thursday, July 18, 13
  3. 3. WHAT EMBER IS • MVC client side JavaScript framework • Open source • Convention over configuration (less boiler plate, steeper learning curve for some) Thursday, July 18, 13
  4. 4. CORE CONCEPTS • Classes • Computed Properties • Bindings • Templates • MVC Thursday, July 18, 13
  5. 5. EMBER.OBJECT • Base “class” that almost every object should inherit from • Contains magic Thursday, July 18, 13
  6. 6. CLASSES var Person = Ember.Object.extend({ say: function (message) { alert(message); } }); var bob = Person.create(); bob.say('hello world'); // alerts "hello world" Thursday, July 18, 13
  7. 7. var Man = Person.extend({ say: function (message) { message += ', says the man.'; this._super(message); } }); var dudebro = Man.create(); dudebro.say('hello world'); // alerts "hello world, says the man." Thursday, July 18, 13
  8. 8. EMBER.OBJECT • Obj.create() instead of new for instances • Obj.extend() for single inheritance (mixins exist as well) • this._super() calls overridden implementation • Obj.reopen() to edit class definition • Obj.reopenClass() to modify static members Thursday, July 18, 13
  9. 9. GETTER/SETTER • obj.get(‘key’) and obj.set(‘key’, value); • Always used on instances that inherit Ember.Object • Allows dynamically created property values • Objects can listen for property changes • Use .setProperties({ key: value }) for multiple at a time Thursday, July 18, 13
  10. 10. GETTER/SETTER var Person = Ember.Object.extend({ name: '', sayMyName: function () { alert(this.get('name')); } }); var dudebro = Person.create(); dudebro.set('name', 'Tomster'); dudebro.sayMyName(); // alerts "Tomster" Thursday, July 18, 13
  11. 11. COMPUTED PROPERTIES • Used to build a property that depends on other properties. • Function prototype .property() helper • Provide any property keys you access and the property value will recomputed if they change • Should not contain application behavior, and should generally not cause any side-effects when called. Thursday, July 18, 13
  12. 12. COMPUTED PROPERTIES var Person = Ember.Object.extend({ firstName: '', lastName: '', fullName: function () { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var person = Person.create({ firstName: 'Bilbo', lastName: 'Baggins', }); person.get('fullName'); // "Bilbo Baggins" Thursday, July 18, 13
  13. 13. OBSERVERS • Should contain behavior that reacts a property’s value changes Thursday, July 18, 13
  14. 14. OBSERVERS var Person = Ember.Object.extend({ firstName: '', lastName: '', fullName: function () { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName'), fullNameDidChange: function () { alert('changed!'); }.observes('fullName') }); var person = Person.create({ firstName: 'Bilbo', lastName: 'Baggins', }); person.set('firstName', 'Frodo'); // alerts “changed!” Thursday, July 18, 13
  15. 15. BINDINGS • Properties that automatically listen and update their own value to match a target property or vice versa • Are most often used to ensure objects in two different layers are always in sync. For example, you bind your views to your controller using Handlebars. Thursday, July 18, 13
  16. 16. BINDINGS App.wife = Ember.Object.create({ householdIncome: 80000 }); App.husband = Ember.Object.create({ // Notice the `Binding` suffix, which triggers the binding householdIncomeBinding: 'App.wife.householdIncome' }); App.husband.get('householdIncome'); // 80000 // Someone gets raise. App.husband.set('householdIncome', 90000); App.wife.get('householdIncome'); // 90000 Thursday, July 18, 13
  17. 17. TEMPLATES • Uses Handlebars + Ember helpers • Ember adds partial, render, view, and control helpers Thursday, July 18, 13
  18. 18. APPLICATION TEMPLATE <body> <script type="text/x-handlebars"> <div> {{outlet}} </div> </script> </body> Thursday, July 18, 13
  19. 19. MVC...KINDA • Routes -> Models -> Controllers -> Views -> Templates Thursday, July 18, 13
  20. 20. AN EMBER APP var App = Ember.Application.create(); App.Foo = Ember.Object.extend({ }); Thursday, July 18, 13
  21. 21. DEFINE YOUR ROUTES App.Router.map(function () { // route ‘index’ is auto-assumed this.route('about'); this.route('contact'); }); Thursday, July 18, 13
  22. 22. APPLICATION TEMPLATE <body> <script type="text/x-handlebars"> <h1>My Great Web App</h1> <div> {{outlet}} </div> </script> <script type="text/x-handlebars" data-template-name="index"> <h1>{{welcomeMessage}}</h1> <ul> {{#each names}} <li>{{this}}</li> {{/each}} </ul> {{#linkTo about}}Navigate to `about` page{{/linkTo}} </script> <script type="text/x-handlebars" data-template-name="about"> <p>The current time is: {{time}}</p> {{#linkTo index}}Navigate to `index` (home) page{{/linkTo}} </script> Thursday, July 18, 13
  23. 23. DEFINE YOUR ROUTES App.IndexRoute = Ember.Route.extend({ setupController: function (controller) { controller.set('welcomeMessage', 'Welcome!'); } }); App.AboutRoute = Ember.Route.extend({ setupController: function (controller) { setInterval(function () { controller.set('time', new Date()); }, 1000); } }); Thursday, July 18, 13
  24. 24. MODELS • ember-data • ember-model • BYO$A (bring your own $.ajax); Thursday, July 18, 13
  25. 25. CONTROLLERS App.IndexController = Ember.ObjectController.extend({ welcomeMessage: '', names: ['Bilbo', 'Frodo', 'Sam'] }); Thursday, July 18, 13
  26. 26. VIEWS App.AboutView = Ember.View.extend({ // template name is optional for views // that are rendered from a route templateName: 'about', // events bubble up to each parent view until it reaches // the root view click: function (event) { alert('about view clicked!'); } }); Thursday, July 18, 13
  27. 27. DEMO Thursday, July 18, 13
  28. 28. THAT’S ALL FOLKS. Thursday, July 18, 13

×