Ember.js at the East Bay Ruby Meetup

Ember.js at the East Bay Ruby Meetup

428167a3ec72235ba971162924492609?s=128

Yehuda Katz

June 18, 2013
Tweet

Transcript

  1. 1.
  2. 15.

    Model Controller View All sessions Just this session What is

    currently visible Deals with data for: This
  3. 16.

    Model Controller View All sessions Just this session What is

    currently visible Deals with data for: This I'm not embarassed to use the term MVC, and I won't reduce it to MV "Whatever". Ember focuses heavily on giving you an architecture that works for ambitious applications. We try to keep the conceptual space as small as possible, but we don't pretend that your models are "the JSON you get back from your server" or that you should just dump all the code that you call from your templates on a simple, disorganized object. Ember embraces OO and inheritance as a way of sharing and organizing your code. If you believe that OO is a mistake, you probably won't like Ember, and might want to try Angular.
  4. 18.

    HTML and CSS We don't abstract HTML or CSS. We

    want people to use the tools they already know.
  5. 20.
  6. 21.

    Adding to HTML We don't want to replace HTML. We

    want to add to it. Handlebars templates are just HTML augmented with new features.
  7. 22.

    <table> <tr> <th>First</tr> <th>Last</th> </tr> {{#each person in people}} <tr>

    <td>{{person.first}}</td> <td>{{person.last}}</td> </tr> <tr><td colspan=2> {{person.signature}} </td></tr> {{/each}} </table> We added block syntax to HTML that works anywhere in HTML, including tables, so conditionals and loops are consistent across the board.
  8. 23.

    <table> <tr> <th>First</tr> <th>Last</th> </tr> <tr> <td>{{person.first}}</td> <td>{{person.last}}</td> </tr> {{#if

    person.isTopSalesperson}} <tr><td colspan=2> {{person.totalSales}} </td></tr> {{/if}} </table> Here's another example, using conditionals inside a table.
  9. 25.

    When people start writing JS apps for the first time,

    they're focused on UI and client- side caching. Even TodoMVC didn't include routing in its original release!
  10. 29.

    Or even rdio, these applications have very good URL support.

    That's because people expect web applications to have shareable, bookmarkable links.
  11. 30.

    People love sharing what they're looking at, and the URL

    bar is the universal way to do that.
  12. 31.

    People love sharing what they're looking at, and the URL

    bar is the universal way to do that.
  13. 33.

    • Bookmarking • Sharing • Emailing • Cmd-Tab 80% of

    the first 50 emails I looked at in my inbox contain URLs.
  14. 35.

    Unusual Places * IMing your friend a link to join

    you in an FPS game * Sending someone else who was CCed to an email a link to the email * chrome://settings/startup Don't think about whether to add a URL. You should have a good reason not to add it.
  15. 42.
  16. 45.

    import { View } from "ember/views"; class MyButton extends View

    { click() { alert(`${this.title} was clicked`); } hide() { this.isVisible = false; } } document.register('my-button', MyButton);
  17. 46.

    import { View } from "ember/views"; class MyButton extends View

    { click() { alert(`${this.title} was clicked`); } hide() { this.isVisible = false; } } document.register('my-button', MyButton); Modules Classes Web Components Object.observe
  18. 49.

    import { hasMany, belongsTo, Model } from "ember/model"; import {

    property } from "ember/object"; class Article extends Model { + hasMany('comments') + belongsTo('author') - property('author.name', 'publishedAt') get byline() { return `by ${this.author.name} on ${this.publishedAt}`; } }
  19. 50.

    import { hasMany, belongsTo, Model } from "ember/model"; import {

    property } from "ember/object"; class Article extends Model { + hasMany('comments') + belongsTo('author') - property('author.name', 'publishedAt') get byline() { return `by ${this.author.name} on ${this.publishedAt}`; } } Annotations (ES7?)
  20. 51.

    Future Proof We plan to be around for a long

    time, so we're making sure that the overall architecture of Ember fits in with the direction of the web.
  21. 52.