Ember for Beginners

A really rough, brief, super long, really rusty look at Ember and why it's awesome.

Transcript

2. for absolute beginners
3. BATTLEFIELD MANUAL
4. what is ember?
5. why?
6. why? • I like reading the docs • I like reading the source (seriously) • I trust the team building it • I like the direction it’s headed
7. why? because! I said so.
8. seriously though… • Tom Dale & Yehuda Katz from Tilde IO • @eviltrout, SamSaffron, Jeff Atwood (@codinghorror) on Discourse • Erik Bryn • those guys from twitch.com, square, urbanspoon…
9. seriously though… • Tom Dale & Yehuda Katz from Tilde IO • @eviltrout, SamSaffron, Jeff Atwood (@codinghorror) on Discourse • Erik Bryn • those guys from twitch.com, square, urbanspoon… EVAN IS A FAN! OF THESE PEOPLE
10. Ember Objects
11. // make a basic object foo = Ember.Object.create(); ! // create with properties foo = Ember.Object.create({ firstName: "herp", lastName: "derp" }); ! // define your own object App.User = Ember.Object.extend(); tomDale = App.User.create();
12. // define an object with fancy properties App.User = Ember.Object.extend({ firstName: "", lastName: "", weight: 0, ! // computed properties fullName: function() { return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName'), ! // observers weightChanged: function() { if (this.get('weight') > 1600000000 ) { alert("Planets are not people."); } }.observes('weight') });
13. routes, models, controllers, views, oh my…
15. ember object flow
16. ember object flow ! this.route(‘about’); AboutRoute -> AboutController -> AboutView -> about.js.hbs
17. routes
18. App.Router.map(function() { this.resource('users'); this.route('user.new', { path: '/users/new' }); this.resource('user', { path: '/users/:id' }, function () { this.route('edit'); }) })
19. <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each item in model}} <li>{{item}}</li> {{/each}} </ul> </script> ! App.IndexRoute = Ember.Route.extend({ model: function() { return ['red', 'yellow', 'blue']; } });
20. controllers Controller, ObjectController, ArrayController
21. App.UserController = Ember.ObjectController.extend({ ! someFunction: function() { alert('so functional') }, ! someProperty: function() { if (this.get('model.firstName') == "Gregory") { return "Hey Gregory" } else { return "Hey, you're not Gregory" } }.property('model.firstName'), ! someObserver: function() { alert("You changed your name to " + this.get('model.firstName')); }.observes('model.firstName') ! })
22. App.UserController = Ember.ObjectController.extend({ actions: { deleteUser: function() { this.get('model').destroyRecord() }, saveChanges: function() { this.get('model').save() } } })
23. views
24. App.Avatar = Ember.Object.extend({ src: "http://placehold.it/200x200" }); ! App.AvatarImage = Ember.View.extend({ tagName: 'img', attributeBindings: ['src', 'alt'], src: Em.computed.alias('controller.model.src'), alt: 'avatar' }); ! // outputs <img src="http://placehold.it/200x200" alt="avatar">
25. templates
26. <!-- view properties --> <h1> {{view.title}} </h1> ! ! <!-- controller properties --> <div class="person"> {{fullName}} </div> ! <!-- loops and ifs --> {{#each users}} {{#if this.name === "Dennis"}} <h2>HI DENNIS. GO NORTH.</h2> {{else}} <p>not dennis.</p> {{/if}} {{/each}} ! <!-- triggering actions --> <a href="#" click="deleteUser">DESTROY DENNIS</a>
27. <!-- calls controller --> {{render 'user' dennis}} ! <!-- calls view --> {{view 'user'}} ! <!-- calls template --> {{partial 'user'}}
28. phew!
29. recap: • routes say where you are in the application, and supply the model • controllers manage momentary state in the UI • views help build out the dynamic parts of the UI • templates describe the UI’s HTML
30. some neat things.
31. components
32. // component App.GravatarImageComponent = Ember.Component.extend({ gravatarUrl: function() { return “http://www.gravatar.com/avatar/" + hex_md5(this.get('email')); }.property('email') }); ! // component template <script type="text/x-handlebars" id="components/gravatar-image"> <img {{bindAttr src=gravatarUrl}}> </script> ! // application template <script type="text/x-handlebars"> {{gravatar-image email="foo@gmail.com"}} </script>
33. bindings
34. wife = Ember.Object.create({ householdIncome: 80000 }); ! husband = Ember.Object.create({ wife: wife, householdIncome: Ember.computed.alias('wife.householdIncome') }); ! husband.get('householdIncome'); // 80000 ! // Someone gets raise. husband.set('householdIncome', 90000); wife.get('householdIncome'); // 90000
35. ember run loop
36. ember run loop ! console.log(Ember.run.queues); // ["sync", "actions", "routerTransitions", "render", "afterRender", "destroy"]
37. brief overview • A browser event happens and Ember's registered listener for that event is triggered. • Early on in its response to the event, Ember opens a set of queues and starts accepting jobs. • As Ember works its way through your application code, it continues to schedule jobs on the queues. • Near the end of its response to the event Ember closes the queue-set and starts running jobs on the queues. Scheduled jobs can themselves still add jobs to the queues even though we have closed them to other code. • The runloop Guide has an excellent visualization of how jobs are run but in brief: • Scan the queues array, starting at the first until you find a job. Finish if all queues are empty. • Run the job (aka execute the callback function) • Go to step 1 ember tries to do similar! things at the same time.
38. final recap • the community, source, and docs are nice. • it has an object system that is consistent. • it does a lot of opinionated magic for you, so learn the magic words. • its leadership is intentionally future proofing it. • it has a cute hamster as a mascot.
39. thanks! I’ve been @evantravers, thanks for coming!
41. references: • https://github.com/eoinkelly/ember-runloop-handbook • http://ember.vicramon.com/ • http://emberjs.jsbin.com/ • http://www.smashingmagazine.com/2013/11/07/an-in- depth-introduction-to-ember-js/ • https://github.com/discourse/discourse • http://eviltrout.com/2013/03/23/ember-without-data.html