5 Years!

The Web in May 2011

Complete ES 5.0 NONE

Flexbox NONE

Typed Arrays  31%

WebSockets NONE

IndexedDB 31%

QuerySelectorAll 49%

addEventListener 49%

CSS2 (:hover [attr]) 95% (not IE6)

CSS3 (:nth-child, :not) 51%

Web Workers 49%

keyEvent.which 63%

<html>
  <head>
    <script src="/public/ember.js"></script>
  </head>
  <body>
    <script type="text/x-handlebars">
      Hello, <strong>{{firstName}} {{lastName}}</strong>!
    </script>

    <script type="text/x-handlebars" data-template-name="say-hello">
      <div class="my-cool-control">{{name}}</div>
    </script>

    <script>
      App.ApplicationController = Ember.Controller.extend({
        firstName: "Trek",
        lastName: "Glowacki"
      });
    </script>
  </body>
</html>
<div id="logo">
  <img {{bind-attr src=logoUrl}} alt="Logo">
</div>
<div id="ember162" class="ember-view">
  <h2>Welcome to Ember.js</h2>

  <script id="metamorph-1-start" type="text/x-placeholder"></script>
  <script id="metamorph-0-start" type="text/x-placeholder"></script>
  <ul>
    <script id="metamorph-5-start" type="text/x-placeholder"></script>
    <script id="metamorph-2-start" type="text/x-placeholder"></script>
    <li>
      <script id="metamorph-6-start" type="text/x-placeholder"></script>
      red
      <script id="metamorph-6-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-2-end" type="text/x-placeholder"></script>
    <script id="metamorph-3-start" type="text/x-placeholder"></script>
    <li>
      <script id="metamorph-7-start" type="text/x-placeholder"></script>
      yellow
      <script id="metamorph-7-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-3-end" type="text/x-placeholder"></script>
    <script id="metamorph-4-start" type="text/x-placeholder"></script>
    <li>
      <script id="metamorph-8-start" type="text/x-placeholder"></script>
      blue
      <script id="metamorph-8-end" type="text/x-placeholder"></script>
    </li>
    <script id="metamorph-4-end" type="text/x-placeholder"></script>
    <script id="metamorph-5-end" type="text/x-placeholder"></script>
  </ul>
  <script id="metamorph-0-end" type="text/x-placeholder"></script>
  <script id="metamorph-1-end" type="text/x-placeholder"></script>
</div>
<div>
    <h2>Welcome to Ember.js</h2>
    <ul>
        <li>red</li>
        <li>yellow</li>
        <li>blue</li>
    </ul>
</div>

Ahead of the Curve

glimmer

compiled templates

RFC process

Canary

Beta

Release

LTS

6 Week Releases

Ember 2.0

router

what's next?

what didn't work?

what didn't work?

module unification

what did work?

Adding primitives

glimmer 2

30-50% smaller total payload

2x performance improvement

glimmer

original

rendering test suite

and simultaneously tests

tests

our new modus operandi

unlock experimentation, support in-place upgrades

Some success stories

less open for experimentation so far*

router
components

* at least while using the public api

update

original

rendering test suite

and simultaneously tests

tests

glimmer's performance sweet spot

it's a Tradeoff

more up-front bookkeEping
and
faster updates

less up-front bookkeEping
and
faster initial render

vs

we couldn't regress updating performance

(which was already best-in-class)

ember adoption

introducing glimmer.js

improved APIs

goodbye tagname, attributebindings, etc.

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: ['disabled', 'type:kind'],
  disabled: true,
  kind: 'range'
});
<input disabled type="range" />

ember 2.10

glimmer

es6 classes

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: ['disabled', 'type:kind'],
  disabled: false,
  kind: 'range',
  classNameBindings: 'type',
  type: 'primary'
});
<input disabled type="range" class={{type}} />

ember 2.10

glimmer

import Component from '@glimmer/component';

export default class extends Component {
  type = 'primary'
}

typescript

import Component from '@glimmer/component';

export default class extends Component {
  firstName: string;
  lastName: string;
}

computed properties

import Component from '@glimmer/component';

export default class extends Component {
  firstName = "Katie";
  lastName = "Gengler";

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

decorators

import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  @tracked firstName;
  @tracked lastName;

  @tracked
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

actions

import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  @tracked name: string;

  setName(name: string) {
    this.name = name;
  }
}
<button onclick={{action setName "Zahra"}}>
  Change Name
</button>

no .get() or .set()

how does it fit in with ember?

glimmer components are the future of components in ember

next steps
Drag and drop glimmer components into ember

next steps
shared "module unification" file system layout

next steps
upstreaming glimmer.js code into ember

longer term

Philly ETE

By Yehuda Katz

Philly ETE

  • 330
Loading comments...

More from Yehuda Katz