building modern javascript applications with ember.js
Sam Selikoff
Boston, MA   •    September 11, 2014

`whoami`


Front-end engineer

@ samselikoff

WEB APPS

js, a brief history




server-side

server-side rendering

GET wikipedia.org/napolean  -->  


GET wikipedia.org/France  --> 

Route request, fetch data

<--  HTML/CSS

Views, click form/link


Problems

  • Only links and forms respond to user input
  • Limited behavior





Need our UIs to be   

more dynamic   




sprinkle some javascript

"Can we make that form AJAX?"

"Let's add infinite scrolling"

"Dynamic dropdowns"

"Why don't we prefetch that data"

sprinkle some js

GET github.com  -->  

Route request, fetch data

<--  HTML/CSS

<--  JS

Views, click form/link, interacts with JS

AJAX/non-AJAX request -->

<-- JSON/HTML

 




The libraries cometh



PROBLEMS

  • Maintainability
  • No shared solutions
  • Hard to detect architectural flaws





Need a complete plan
for our JavaScript



javascript apps



Frameworks help us avoid the
architecture problems of the past

JS Apps

GET gmail.com  -->  

Fetch JS app, initial data

<--  HTML/CSS

<--  JS app, templates

Loads app, interacts with JS

AJAX request -->

<-- JSON


JS now controls

  • routing
  • templates + rendering
  • data syncing
  • responding to user input
  • authentication
  • persistence
  • ...


A framework for building ambitious web applications



what is a framework?


helps you out

promotes

    sharing



embraces conventions


what are ambitious web apps?






native-like





 

            url driven


overview

of Ember







router

  • URLs
  • UI hierarchy

URLs

  • /inbox
  • /message/1234
  • /contacts   


Router.map(function() {
  this.route('inbox');
  this.resource('message', {path: '/:message_id'});
  this.resource('contacts');
});


route

  • one per URL
  • retrieve related model via AJAX


export default Ember.Route.extend({
  model: function() {
    return Ember.getJSON('/contacts');
  }
});


templates

  • Handlebars
  • Render your model(s) in HTML
  • Data binding

  

<h1>{{title}}</h1>

{{#each contact in contacts}}
  <div class='contact-card'>
    <h2>{{contact.name}}</h2>
    <h3>{{contact.email}}</h3>
  </div>
{{/each}}


controllers

  • Hold application state
  • Presenters
  • Great place for computed properties

 

// controllers/contact.js

export default Ember.ObjectController.extend({

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



// templates/contacts.hbs

{{#each contact in contacts}}
  <p>{{contact.fullName}}</p>
{{/each}}


views

  • Render templates
  • Great place for manual DOM manipulation


// views/profile-card.js

export default Ember.View.extend({
  didInsertElement: function() {
    this.$().somePlugin();
  }
});



// templates/contacts.hbs

{{#each contact in contacts}}
  {{view 'profile-card'}}
{{/each}}


components

  • Subclass of View
  • Act as their own Controller


<div class="sidebar">
  <label >Select a date</label> 
  {{date-picker selectedDate=currentMonth mode='month'}}
</div>


actions

  • Add user interaction
  • DOM events => semantic events
  • Bubbling 


// templates/index.hbs

<div>
  <a id='delete-contact' {{action 'deleteContact' this}}>Delete</a>
</div>


// a-view.js, a-component.js, a-controller.js, a-route.js

actions: {
  deleteContact: function(contact) {
    contact.delete();
  }
}


models

  • Ember Data
  • v1.0.0-beta.9
  • Can always use Ember.Object


// models/contact.js

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  age: DS.attr('number'),

  addresses: DS.hasMany('address')
});


// some-route.js
model: function() {
  return this.store.find('contact');
}



demo

ember-cli


thanks!

github.com/samselikoff/talks
slides.com/samselikoff/intro-to-emberjs
@samselikoff
Made with Slides.com