Writing Big (ambitious) Apps Using

Just Got Easier

Oren Rubin

Applitools Director of R&D

Wix Web Architect

IBM Distributed Computing

Spring Diagnostics Machine Learning

Cadence Compiler Engineer

Ember history

Started by Apple, for Mobile as SpoutCore (2008)

Refactored to MVC as SproutCore II (early 2011)

SproutCore UI (July 2012)

Renamed Amber (Dec 2011)

Renamed Ember (few days later)

Yehuda Katz and Tom Dale opened Tilde (2012)

Ember currently

Many active developers

1.0 comprising new features. currently RC1.0

Documentation rewritten

Why ember?

Which of the following is different from the others?

1) A Framework's performance.

2) A Framework's preexisting components.

3) A Framework's syntax.

4) Philip's pizza

why ember?

Which of the following is different from the others?

1) A Framework's Performance.

2) A Framework's Pre-existing Components.

3) A Framework's syntax.

4) Philip's Pizza

Answer: 3

Cause I really think 1, 2, and 4 make me code faster!

Why ember?

How to judge an MVC framework?

Fast development

- Existing components (e.g. Router, Model, Views)

- Integrating 3rd party code (e.g. jQuery plugins)

- Convention Over Configuration (with overrides)

Performance, optimizations for DOM updates

Debugging tools

Useful helpers (Array's filterProperty, Em.K, etc.)

What is a typical Ember Application?

AKA: What will We talk about?

Router

State according to the URL

Loads Model objects

Models

Your Domain Specific Data

(serialized and saved in some DB)

Served to the Controllers

CONTROLLERS

The Business Logic

Take some Model object

And show it using Views

Views

Business Logic

to

UI Interaction

Generates HTML using Templates

Templates

Responsible for low level UI

Both appearance and events

EMBER CLASSES

Comprises the Magic

Bird View

classes

Hello Web

<html>
  <head></head>
  <body>

     Hello Web

  </body>
</html>

Hello Web

hello ember

    <body>
        <script src="jquery.js"/>
        <script src="handlebars.js"/>
        <script src="ember.js"/>

        <script>
            var App = Ember.Application.create();
        </script>

        <script type="text/x-handlebars">
            Hello Ember!
        </script>
    <body>

Hello Ember!

Tip: use zepto for mobile

Binding

   var App = Ember.Application.create({             
       name: "Ember App!"
   })                  

 + 
   <script type="text/x-handlebars">
       Hello {{App.name}}
   </script>

=

Hello Ember!

Tip: naming convention #1: uppercase means global (App)

Classes & instances


 var MyClass = Ember.Object.extend({
                    
     x: 5,
     bestMethodEva: function() {
        return this._super() + ":" + this.get('x')
     }
 })


 var myInstance = MyClass.create()

                
 console.log(myInstance.get('x'))

 console.log( myInstance.bestMethodEva() );

Tip: naming convention #2: An application extends Namespace, which is why it's uppercase

CLASSES & INSTANCES

    var obj = Ember.Object.create({    
       a: { 
          b: {
            c: 5
          }
       }
    })
    
    var c = obj.get('a.b.c');  // getPath in ember < 1.0
    
    if (c) {...} // c is undefined if 'a' or 'b' are falsy

    // never again!
    if (obj.a && obj.a.b && obj.a.b.c) {
       ...
    }

array

    App.TodosController = Ember.Object.extend({
        todos: []
    })

    App.todosController = App.TodosController.create()

+

    {{App.todosController.todos.length}} TODOs

=

                           0 TODOs

Array

    setTimeout(function(){
        var newTodo = Ember.Object.create({
            description: "best todo ever"
        })
        var todos = App.todosController.get('todos')
        todos.pushObject(newTodo)

        // console.log(todos.get('lastObject'))
    }, 5000)

+

        {{App.todosController.todos.length}} TODOs

=

1 TODOs

Binding

 
  App.TodosController = Ember.Object.extend({
      todos: [],
      appNameBinding: 'App.name'

      // appName field will be added "in-memory", and updated
  })

use with either

                {{App.todosController.appName}}

or

  {{App.name}}

Tip: Ember generates objects in-memory, rather than files

computed properties

  App.TodosController = Ember.Object.extend({
      appNameBinding: 'App.name',

      todosName: function() {
          return 'todos controller in ' + this.get('appName') 
      }.property('appName')

  })

+

    {{App.todosController.todosName}}

=

               todos controller in Ember App!

Tip: Add console.log/alert to check it only runs once.

computed properties

    App.TodosController = Ember.Object.extend({
        todos: [],
    
        remaining: function() {
            var todos = this.get('todos');
            var completed = todos.filterProperty('isDone');
            return todos.length - completed.length;
        }.property('todos.@each.isDone')
    
    });

+

        {{App.todosController.remaining}} remaining

=

2 remaining

Tip: 'remaining' field will be recalculated only if a todo's isDone is changed, todo is added/removed, or the entire array replaced.

but there's more!

Observers

  App.TodosController = Ember.Object.extend({
      selectedTodo: undefined,

      todosChanged: function() {
          var selected = this.get('selectedTodo')

          if (!todos.contains(selected)) {
             this.set('selected', undefined)
          }
          
      }.observes('todos.@each') //.beforeObserver()

  })

Tip: can be notified for only removal

Riddle

   
   var MyClass = Ember.Object.Extend({
        people: [],
    
        add: function(name) {
            var people = this.get('people')
            people.push(name)
           console.log(people)
        }    
   });

   var obj1 = MyClass.create()

   var obj2 = MyClass.create()

   obj1.add('Ran Tavory')
   obj2.add('Ori Lahav')

Tip: javascript uses prototype inheritance

Templates

Handlebars

HTML

  <div>
     {{name}} is fastest programmer eva!
  </div>

Handlebars

  <div>
     <script id="metamorph-3-start" type="text/placeholder"/>
     Itay Maman
     <script id="metamorph-3-end" type="text/placeholder"/>
     is fastest programmer eva!
  </div>

Humans

           Itay Maman is fastest programmer eva!

Handlebars

Loops in HTML

  <ul id="todo-list">
    <li>
        Take over the universe
    </li>
            
    <li>
        Have the penne arrabiata (without a tray)
    </li>
  </ul>

handlebars

Loops in Ember

  <ul id="todo-list">
      {{#each todo in App.todosController.todos}}
          <li>
              {{todo.description}}
          </li>
      {{/each}}
  </ul>

Logic-less

* Doesn't mean no {{if}}

* Does mean no {{if X > Y +5}}

Think CSS!

Logic-less

In CSS, all states in one place.

section {
    background: rgba(0,0,0, 0.5);
}

section:hover {
    background: #BADA55;
}

Same in ember

{{#if todos.isLoaded}}
    <div> spinner </div>
{{#else}}
    <ul>
       <!-- some list -->
    </ul> 
{{end}}

Tip: using ember-data, you'll get the 'isLoaded' for free!

Templates

Compiled to javascript

Client side (run-type)

Using <script> code </script>

Using Em.Handlebars.compile(code)

Server side

Saves traffic and compilation

Template is a template

* Anonymous templates are instantiated at the same

place (so does a template named application).

* Named templates are instantiated by Ember with

some context (javascript class).

<script type="text/x-handlebars" template-name="todo">
   todo description: {{description}}
</script>

* Comprise special command called "helpers"

{{helperName}} or {{helperName X}} or {{helperName X=Y A=B}}

Tip: You can write custom helpers

Views

Business Logic <=> UI/UX

=> Render HTML Elements

<= Handle DOM Events

View

* A View is an object of class Ember.View (or extends)

* Instantiated in 2 way

code:

MyView.create().append('#container')

In a template

{{view path.to.class}}

* Has a template

* Context in template is the View's instance

View

Definitions

App.TodoView = Ember.View.extend({
    templateName: 'todo',
    description: "best TODO eva!"
});

<script type="text/x-handlebars" template-name="todo">
   todo description: {{description}}
</script>

Instantiation

                    {{view App.TodoView}}

todo description: best TODO eva!

handle appearance

App.TodoView = Ember.View.create({
    todo: {..},
    a: false,

    f: function() {  
        if(sky.contains('sun') { 
           this.set('a', true)
        }
    }

    isSelected: {
        var selectedTodods = App.todoController.selected
        return selected Todos.contains( this.get('todo') )
    }.property('App.todosController.selected'),

});

handle appearance

<div {{bindAttr class="isSelected"}}>
    <div {{bindAttr class="a:a-is-true:a-is-false"}}/>
</div>

=

<div class="is-selected">
   <div class="a-is-false">
   </div>
 </div>

<div>  
   <div class="a-is-true">
   </div>
 </div>

2 more options, depending on the weather
(and if the todo is selected)

handle appearance

In reality

<div class="is-selected" bind-attr-id="18">  
   <div class="a-is-false" bind-attr-id="53">
   </div>
</div>

<div bind-attr-id="18">  
   <div class="a-is-true" bind-attr-id="53">
   </div>
</div>

Top Secret: Ember uses "bind-attr-id" to find what should be updated

HANDLE DOM EVENT

Your template is always wrapped by an element

<div>
    <div class="inner">
        {{todo.description}}
    </div>
</div>

</div>

Tip: choose tag using "tagName" field

Handle DOM Events

Wrapping-Element Events


  App.TodoView = Ember.View.create({
      templateName: 'todo',
      description: "best TODO eva!",

      click: function() {       
         alert('someone clicked inside somewhere')
      }
  });

HANDLE DOM EVENTs

Built-in supported events

HANDLE DOM EVENTs

Ember uses jQuery, so add custom events


 var App = Em.Application.create({
      customEvents: {
          // jquery-event-name: method-name-in-view

          mousewheel: 'mouseWheel'
      }
  });

Top Secret: Ember captures the events on root

HANDLE DOM EVENT

Template parts: use {{action}} helper

<div>

<div>
    <div class="inner" {{action methodName on="click"}}>
        {{todo.description}}
    </div>
</div>

</div>

Tip: click is default, remove redundant code (on="click")

Handle dom event

Add it yourself (jQuery) when View is in the DOM

App.TodoView = Ember.View.create({
    templateName: 'todo',

    didInsertElement: function() {
       var wrappingElement = this.$()
       var elementInside = this.$('.inner')
       elementInside.click(function(){
           alert('yay')
       })
    })
)}

Tip: perfect for jQuery plugins!

life cycle

No more pain like:

destroy: function () {
  var c = this;
  this.unbind();
  try {
     var elem = this._element
     elem.pause(),
     elem.removeEvent("error", this._triggerError),
     elem.removeEvent("ended", this._triggerEnd),
     elem.removeEvent("canplay", this._triggerReady),
     elem.removeEvent("loadedmetadata",this._onLoadedMetadata)
     _.each(b, function (a) {
        c._element.removeEvent(a, c._bubbleProfilingEvent)
     }),
     _.each(a, function (a) {
        c._element.removeEventListener(a, c._logEvent)
     }),
     elem = null,
     this.trigger("destroy")
  } catch (d) {}
}

Real code.. google it!

life cycle

Life cycle

Views are added and removed all the time!


{{#if todo.empty}}
    <div> no todos.. call luke </div>
{{#else}}
    <ul> <--loop and print them--> </ul>
{{end}}

SAy what?!

Life cycle

c'tor is for initialization, not DOM


App.TodoView = Ember.View.create({
    templateName: 'todo',

    init: function() {
       // constructor
       console.log( this.get('state') ); // "preRender"
    });
});

Views

Field members are set in the Class or per usage

In Class:

App.TodoView = Ember.View.extend({
    tagName: 'li',
    classNames: [a, b]
});

Per usage:

{{view TodoView appNameBinding="App.name" classNames="a b"}}

var view App.TodoView.create({
   classNames: "a b"
})

debugging Views

* Reference in console (Em.Views.view[<id>])

* debugger and break on uncaught exceptions

* Set Em.LOG_BINDING to true

* Redefine (reopen) $ in Em.View

* Chrome dev tool plugin (sets to _V)

Inline template

Use one specified in Class

   {{view DeathStar}}

Override template and use inline


   {{#view DeathStar}}
        Don't use DeathStar's template, use the one of
        rebel alliance
   {{/view}}

Tip: inner components are specified in the template. Great for unit tests isolation.

Views

Can be seen as Components*:

- Todo (folder)

- TodoView.js

- TodoView.Test.js

- TodoView.Template.handlerbars

- TodoView.scss

- TodoView.css

Top Secret: *Personal recommendation

Views - summary

* Data is always synced (binding)

* Appearance is in template

(no more addClass, removeClass)

* Binding Actions is in the template

View is left with Business Logic!

Tip: perfect for Unit Testing!

Controllers

Philosophy: They are the logic divider in the app.

Structure of app should be known

Example:
* One controller responsible for list of emails.

* Another controller responsible a specific email.

* An App can have either one, or either both in

same page

Controllers

Implementation:

Ember Controllers are proxies, delegating stuff

Ember provides 2 types of controllers:

- ObjectController - simple

- ArrayController - can be iterated upon

using {{#each controller}}

Both search in the next order

model -> content -> this

Controllers

Controllers live forever (Views come and go).

Save session state (e.g., selected-todos)

Have views too, so as your application!

SoundController

<script type="x-handlebars" data-template-name="sound">
    <p>
         <strong>Song</strong>: {{name}} by {{artist}}
    </p>
    <p>
         <strong>Duration</strong>: {{duration}}
    </p>
 </script>

Top Secret: named and artist are proxied from the model

models

Run by a DataStore under the namespace DS

App.Store = DS.Store.extend({
    revision: 11, // let you know if breaking changes happen.

    adapter: 'DS.RESTAdapter', // built-in REST adapter

 // adapter: 'DS.FixtureAdapter' // run solo
 // adapter: 'App.MyCustomAdapter' // custom
});

Support for transactions

models

RESTAdapter supports primitives:

number, string, boolean and dates

var attr = DS.attr;

App.Person = DS.Model.extend({
    firstName: attr('string'),
    lastName: attr('string'),
    birthday: attr('date'),

    fullName: function() {
      return this.get('firstName') +' '+ this.get('lastName');
    }.property('firstName', 'lastName')
});

Tip: Computed properties won't be serialized

fixtures

Use App.<model-name>.FIXTURES

App.Person.FIXTURES = [
   {
     id: 1,  // this is a MUST
     firstName: 'Ferris',
     lastName, 'Bueller'
   },
   {
     id: 2,
     firsName: 'Moshe',
     lastName: 'Oofnik',
   }
]

Relationship

One to one

var attr = DS.attr;
App.User = DS.Model.extend({
  profile: DS.belongsTo('App.Profile')
});

One to Many

App.Post = DS.Model.extend({
  comments: DS.hasMany('App.Comment')
});

Many to Many

App.BlogPost = DS.Model.extend({
  tags: DS.hasMany('App.Tag')
});

models

Use the find() method

  var posts  = App.Post.find();
  var post   = App.Post.find(1);
  var people = App.Person.find({ name: "Peter"});

Extend Object with important properties


    person.get('isDirty');
    //=> false

    person.set('isAdmin', true);

    person.get('isDirty');
    //=> true

Also: isLoaded, isSaving, isDeleted, isNew, isValid ...

Model

Supports side-loading (fewer HTTP requests)

{
    "post": {
        "id": 1,
        "title": "Rails is omakase",
        "comments": [1, 2, 3]
    },

    "comments": [{
        "id": 1,
        "body": "But is it _lightweight_ omakase?"
    },
    {
        "id": 2,
        "body": "I for one welcome our new omakase overlords"
    }]
}

router

Router

Manages state

Comprises Route handlers

Can be affected by

* Manual setting or URL (back button)

* Template -> View -> Controller -> Router

Router

The router itself comprises only a set of Routes, each

relating to "partial" path

App.Router.map(function() {
    this.resource("about"); // { path: "/about" }); redundant
    this.resource("favorites", { path: "/favs" });
})

The Routes are always connected to a controller

App.AboutRoute = Ember.Route.extend({
    setupController: function(controller) {
        // Set the AboutController's 'title'
        controller.set('title', "My App")
    }
})

Router

If you don't explicitly create a Controller, one will be

created for you implicitly

App.IndexController is also implicit for path '/'

Summary

URL Route Name Controller Route Template / index IndexController IndexRoute index /about about AboutController AboutRoute about /favs favorites FavoritesController FavoritesRoute favorites

Load data

The Route is responsible to load the models (data). This is done using the model method

App.UsersRoute = Ember.Route.extend({
   model: function(){ 
       return App.User.find()
   }
})

Nested routes

The routes can be nested, and can have arguments

App.Router.map(function() {
    this.resource("users", function () {
        this.resource("user", {path: ':user_id'})
    })
})

Example path: #/users/5

"If your UI is nested, your routes should be nested"

- Yehuda Katz

Router - extras

Supports 'Redirects'

Supports HTML links {{#linkTo route-name model}}

e.g. {{#linkTo "User" user}}

Tip: adds css-class 'active' on any link that matches current Route

finishing

outlet

Recall App's template is instantiated automatically.

<script type="..." template-name="application">
   kiss my shiny metal ass!
</script>

Basic Router, IndexController and IndexRoute are instantiated for us.

We specify the IndexController template and position

<script type="..." template-name="application">
   kiss my shiny metal {{outlet}}
</script> 

<script type="..." template-name="index">
   index template
</script>

outlet

The way Ember knows which Controller/Template to replace with the outlet, is by the State (and Route)

Add a 'users' Template

<script type="..." template-name="users">
   all users will be shown here
</script>

Add a 'users' Route

App.UsersRoute = Ember.Route.extend({
   model: function(){  return App.User.find()  }
})

Tip: This is the default implementation

show all users

Add some fake data

App.Person.FIXTURES = [
   {
     id: 1,
     firstName: ferris,
     lastName, bueller
   }
]

Let's revise our 'users' Template

<script type="..." template-name="users">
   {{#each user in controller}}
       {{user.name}}   
   {{/each}}
</script>

Tip: Remember that the Controller proxies request to the model

Show user details

More than one controller can be active

App.Router.map(function() {
    this.resource("users", function () {
        this.resource("user", {path: ':user_id'})
    })
})

Add a template for a specific user (singular)

<script type="..." template-name="user">
   <header> {{firstName}} </header>
   <section>  {{firstName}} {{lastName}} is .. </section>
</script>

All that's left is to specify where to put it (next page)

show specific user II

<script type="..." template-name="users">
   {{#each user in controller}}
       {{user.name}}   
   {{/each}}
    
   <section>
        {{outlet}}
   </section>

</script>

Extras

Partials

Don't use minified in dev (verbose errors)

Helpful functions

Em.K - empty function

Em.none - falsy, but not 0 or ''

The run loop

Em.run.sync() - propagate class changes now

Em.run(func) - propagate DOM changes now

Extras

Ember.TextView - View adding binding to <input>

handle one-key update,copy/paste

context-menu, etc..

Ember twitter bootstrap - don't reinvent

Ember Watch

that's all folks

Thank you

Oren Rubin | shexman@gmail | @shexman

Writing Big (ambitious) Apps Using

Just Got Easier

Oren Rubin

Ember history

Ember currently

Why ember?

why ember?

Why ember?

What is a typical Ember Application?

Router

Models

CONTROLLERS The Business Logic Take some Model object And show it using Views

CONTROLLERS

Views

Business Logic to UI Interaction Generates HTML using Templates

Templates

EMBER CLASSES

Bird View

classes

Hello Web

hello ember

=Hello Ember!

Binding

+

=

Classes & instances

CLASSES & INSTANCES

array

+

=

Array

+

=

Binding

use with either

or

computed properties

+

=

computed properties

+

=

but there's more!

Observers

Riddle

Templates

Handlebars

HTML

Handlebars

Humans

Handlebars

handlebars

Logic-less

Logic-less

In CSS, all states in one place.

Same in ember

Templates

Template is a template

Views

Views

View

View

handle appearance

handle appearance

=

handle appearance

HANDLE DOM EVENT

Handle DOM Events

HANDLE DOM EVENTs

HANDLE DOM EVENTs

HANDLE DOM EVENT

Handle dom event

life cycle

life cycle

life cycle

Life cycle

Views are added and removed all the time!

SAy what?!

Life cycle

c'tor is for initialization, not DOM

CONTROLLERS

The Business Logic

Take some Model object

And show it using Views

Business Logic

to

UI Interaction

Generates HTML using Templates

=
Hello Ember!

Example path: #/users/5

"If your UI is nested, your routes should be nested"

- Yehuda Katz