• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to Ember.js
 

Intro to Ember.js

on

  • 1,241 views

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

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

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

Statistics

Views

Total Views
1,241
Views on SlideShare
1,219
Embed Views
22

Actions

Likes
4
Downloads
42
Comments
0

2 Embeds 22

https://twitter.com 16
http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to Ember.js Intro to Ember.js Presentation Transcript

    • Thursday, July 18, 13
    • Intro To Jay Phelps https://github.com/jayphelps July 18, 2013 1.0.0-rc.6 Thursday, July 18, 13
    • 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
    • CORE CONCEPTS • Classes • Computed Properties • Bindings • Templates • MVC Thursday, July 18, 13
    • EMBER.OBJECT • Base “class” that almost every object should inherit from • Contains magic Thursday, July 18, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • OBSERVERS • Should contain behavior that reacts a property’s value changes Thursday, July 18, 13
    • 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
    • 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
    • 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
    • TEMPLATES • Uses Handlebars + Ember helpers • Ember adds partial, render, view, and control helpers Thursday, July 18, 13
    • APPLICATION TEMPLATE <body> <script type="text/x-handlebars"> <div> {{outlet}} </div> </script> </body> Thursday, July 18, 13
    • MVC...KINDA • Routes -> Models -> Controllers -> Views -> Templates Thursday, July 18, 13
    • AN EMBER APP var App = Ember.Application.create(); App.Foo = Ember.Object.extend({ }); Thursday, July 18, 13
    • DEFINE YOUR ROUTES App.Router.map(function () { // route ‘index’ is auto-assumed this.route('about'); this.route('contact'); }); Thursday, July 18, 13
    • 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
    • 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
    • MODELS • ember-data • ember-model • BYO$A (bring your own $.ajax); Thursday, July 18, 13
    • CONTROLLERS App.IndexController = Ember.ObjectController.extend({ welcomeMessage: '', names: ['Bilbo', 'Frodo', 'Sam'] }); Thursday, July 18, 13
    • 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
    • DEMO Thursday, July 18, 13
    • THAT’S ALL FOLKS. Thursday, July 18, 13