Ember.js

today & the future

Michał Czyż

CTO at Selleo

BB

A framework for creating
ambitious web applications

SDK for the web

A framework for creating
ambitious web applications

yarn global add ember-cli 

# ...

ember new meetjs

# ...

cd meetjs 

ember server
ember new meetjs --yarn
installing app
  create .editorconfig
  create .ember-cli
  create .eslintrc.js
  create .travis.yml
  create .watchmanconfig
  create README.md
  create app/app.js
  create app/components/.gitkeep
  create app/controllers/.gitkeep
  create app/helpers/.gitkeep
  create app/index.html
  create app/models/.gitkeep
  create app/resolver.js
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create app/templates/application.hbs
  create app/templates/components/.gitkeep
  create config/environment.js
  create config/targets.js
 

  create ember-cli-build.js
  create .gitignore
  create package.json
  create public/crossdomain.xml
  create public/robots.txt
  create testem.js
  create tests/.eslintrc.js
  create tests/helpers/destroy-app.js
  create tests/helpers/module-for-acceptance.js
  create tests/helpers/resolver.js
  create tests/helpers/start-app.js
  create tests/index.html
  create tests/integration/.gitkeep
  create tests/test-helper.js
  create tests/unit/.gitkeep
  create vendor/.gitkeep
Yarn: Installed dependencies
Successfully initialized git.
> ember server
Livereload server on http://localhost:7020

Build successful (2930ms) – Serving on http://localhost:4200/



Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Concat (8)                                    | 1543ms (192 ms)
Babel (18)                                    | 498ms (27 ms)
Rollup (1)                                    | 408ms
EslintValidationFilter (2)                    | 164ms (82 ms)

A framework for creating
ambitious web applications

yarn global add ember-cli 

# ...

ember new meetjs

# ...

cd meetjs 

ember server

Philosophy

  • ambitious apps

  • productivity & ergonomics first

  • web standards

  • holistic solution (micro libs)

  • growing & improving

Ember Ecosystem

EMBER

  • routing
  • components
  • handlebars
    (glimmer-vm)
  • services
  • runloop
  • ....

EMBER DATA

  • model & relations
  • local *db
  • remote sync
    • adapter
    • serializer
    • transform

EMBER CLI

  • blueprints
    • for app
    • for code
  • addons install
  • (re)build
  • test runner

(*microlibraries / build to be easy to extend)

Ember Data (local)

import DS from 'ember-data';

const { attr, belongsTo, hasMany, Model } = DS;

export default Model.extend({
  name: attr('string'),
  imageUrl: attr('string'),
  since: attr('string'),

  category: belongsTo('category'),
  events: hasMany('event'),
});

Ember Data (remote)

Ember Ecosystem

> ember install _solution_

A framework for creating
ambitious web applications

SDK for the web

The Future

The Future

Release Cycle / RFC

The Future

Release Cycle / RFC

Summary

Motivation

Detailed Design

Migration

How do we teach this

Drawbacks

Alternatives

The Future

Glimmer

The Future

Glimmer

The Future

Glimmer VM

30-50% smaller payload; 200% performance

The Future

Glimmer VM

The Future

<Capital />

{{in-element}}

binary
templates

incremental
rendering

incremental
rehydration

...attributes

A framework for creating
ambitious web applications

SDK for the web

Michał Czyż

CTO at Selleo

BB

Ember.js today & the future

By Michał Czyż

Ember.js today & the future

  • 36
Loading comments...

More from Michał Czyż