Slide 1

Slide 1 text

WICKED GOOD EMBER Hella

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

AMBITIOUS WEB APPLICATIONS

Slide 4

Slide 4 text

Engaging with Standards Long Bet

Slide 5

Slide 5 text

Tooling Long Bet

Slide 6

Slide 6 text

Declarative Syntax Long Bet

Slide 7

Slide 7 text

AMBITIOUS WEB APPLICATIONS

Slide 8

Slide 8 text

The New Progressive Enhancement

Slide 9

Slide 9 text

HTML + HTTP + maybe JS client-side JavaScript progressive enhancement JavaScript slow devices, good network fast devices, bad network technology best for

Slide 10

Slide 10 text

Size

Slide 11

Slide 11 text

What is Ember for?

Slide 12

Slide 12 text

What is Ember for? Workspace App Landing Page

Slide 13

Slide 13 text

Heroku Dashboard Square Dashboard Travis CI

Slide 14

Slide 14 text

DISQUALIFIED

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

What is Ember for? Workspace App Landing Page New Project ? BYO Abstraction ???

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Functionality Size

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

hillary.monegraph.com

Slide 25

Slide 25 text

hillary.monegraph.com

Slide 26

Slide 26 text

Hassan Abdel-Rahman Will Bagby hillary.monegraph.com

Slide 27

Slide 27 text

• Ember CLI • Sass • TypeScript • App Cache • Glimmer 2

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

0 11 22 33 44 kilobytes, min + gzip React 44kb Glimmer 2 40kb App +

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

github.com/ tomdale/ apple-pay-merchant-session-server

Slide 33

Slide 33 text

Professional stunt drivers on a closed course. Do not attempt.

Slide 34

Slide 34 text

Glimmer 2

Slide 35

Slide 35 text

• JavaScript • Small core • Components implemented in Ember Glimmer 1 Glimmer 2 • TypeScript • “Rendering engine engine” • Components implemented in Glimmer

Slide 36

Slide 36 text

Glimmer 1 Ember

Slide 37

Slide 37 text

Glimmer 2 Ember

Slide 38

Slide 38 text

github.com/ emberjs/ ember.js/ issues/13644 Track Glimmer 2 Progress

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

• String loading • Eagerly load common modules • Net 20% real-world improvement Improving Mobile Load Times

Slide 41

Slide 41 text

Where do we go from here?

Slide 42

Slide 42 text

Standardize on JavaScript Modules

Slide 43

Slide 43 text

• router.js • route-recognizer • rsvp • simple-dom • simple-html-tokenizer • glimmer • backburner • dag • container • morph-range

Slide 44

Slide 44 text

Move Internals to TypeScript

Slide 45

Slide 45 text

• Catches bugs • Improves performance • Helps enforce static code V8 requires • Support opt-in for apps • Design user-facing APIs JavaScript-first • Aggressive minification TypeScript

Slide 46

Slide 46 text

The Object Model

Slide 47

Slide 47 text

“Where does Ember end and the language begin?”

Slide 48

Slide 48 text

Engaging with Standards Long Bet

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Ember is Overwhelming

Slide 53

Slide 53 text

ember-metal ember-runtime container ember-routing ember-glimmer ember-application

Slide 54

Slide 54 text

ember-metal ember-runtime container ember-routing ember-glimmer ember-application Terrifyingly Broad Bundle of Abstractions and APIs

Slide 55

Slide 55 text

BYO Layers

Slide 56

Slide 56 text

raven-js shortid sass gulp gulp-real-favicon autoprefixer mocha bluebird validator.js webpack-isomorphic-tools react-helmet react redux redux-storage babeljs immutablejs react-router react-router-redux react-intl webpack express eslint formatjs

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

.png

Slide 61

Slide 61 text

A lot of people will tell you that a set of small, composable libraries is better than an opinionated framework, because when your constraints don’t line up perfectly with the framework’s choices, you are out of luck. When using your own set of libraries, you have to glue together all the individual components yourself. On the other hand, a well-designed framework like Ember is just a curated set of libraries that work together seamlessly out-of-the-box. If something doesn’t work for you, you can just replace those parts and drop in a custom adapter or two. Godfrey Chan Canadian JavaScript Ambassador bit.ly/ember-adapter-patterns

Slide 62

Slide 62 text

The Next Round

Slide 63

Slide 63 text

“V in MVC” “Platform of Capabilities”

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Relentless Focus on the Web

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Instant Web Apps, Out of the Box

Slide 68

Slide 68 text

Simplify, Simplify, Simplify

Slide 69

Slide 69 text

Standalone Glimmer

Slide 70

Slide 70 text

…With a Path to Ember

Slide 71

Slide 71 text

Workspace App Landing Page Glimmer Ember

Slide 72

Slide 72 text

Thank You!