Burning alive with ember.js





What is ember?







  A framework for creating ambitious web applications.

Framework





  • Guides you into doing the right thing. 
  • Answers the trivial questions for you. 
  • Solves the 80% use case.

Ambitious





  • Well defined layers keep code manageable.
  • Performance built into the framework.
  • Security built into the framework.

web applications





  • Transition in state changes the URL




Structure of an ember app

Application


 App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_TRANSITIONS_INTERNAL: true,
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

Responsibility





  • Namespace for application.
  • Setting application wide configuration.

Template


  <script type="text/x-handlebars" data-template-name='application'>
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
          <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
          <li>{{#link-to 'about'}}About{{/link-to}}</li>
        </ul>
      </div>
    </div>

    {{outlet}}
  </script>

Responsibility





  • Defines HTML to be rendered.
  • Specifies how to bind data.
  • Specifies events that are propagated.

Router


 App.Router.map(function() {
  this.resource('about');
  this.resource('posts', function() {
    this.resource('post', { path: ':post_id' });
  });
});

Responsibility





  • Maps a URL into a Route, Controller, View, and Template
  • Defines dynamic segments that can be used to reconstruct application state.

Route


App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('stackFlow', DiscoverySettings.stackFlow);
  }
});

Responsibility





  • Deserializing the URL into a model.
  • Serializing the model into a URL.
  • Providing the controller with it's data.
  • Managing transitions between states.

Controller


App.OptionController = Ember.ObjectController.extend({
  needs: ['stacks'],

  selected: function(){
    return this.get('controllers.stacks.model').contains(this.get('model'));
  }.property('controllers.stacks.model', 'model')
});

Responsibility





  • Act as a decorator to the model.
  • Provide the template it's data.
  • Respond to state changing events.
  • Manage representational state.

View


MyView = Ember.View.extend({
  classNameBindings: ['propertyA', 'propertyB'],
  propertyA: 'from-a',
  propertyB: function() {
    if (someLogic) { return 'from-b'; }
  }.property()
});

Responsibility





  • Defining wrapping tag for template.
  • Handling animation.
  • Responding to representational events.




the ugly

metamorph


 <li id="ember3402" class="ember-view option iphone">
   <figure class="option-figure">
     <img src="https://cdn.gazelle.com/gz_attachments/product_image/230/949/3/iphone_5s_16.jpg" data-bindattr-2="2" class="option-image">
     <figcaption class="option-name"><script id="metamorph-8-start" type="text/x-placeholder"></script>iPhone<script id="metamorph-8-end" type="text/x-placeholder"></script></figcaption>
   </figure>
 </li>

fix coming soon





HTMLBars

get/set


 person.get('name'); person.set('name', 'jack');

Though, there are nice semantics, since this is necessary.

var person = people.findBy('name');person.get('address.city');




Demo

Burning alive with ember.js

By blatyo

Burning alive with ember.js

  • 780