upgrading ember.js apps

77
BEN LIMMER UPGRADING EMBER.JS APPS

Upload: ben-limmer

Post on 14-Feb-2017

96 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Upgrading Ember.js Apps

BEN LIMMERUPGRADING EMBER.JS APPS

Page 2: Upgrading Ember.js Apps

STABILITY WITHOUT STAGNATION

Ember.JS Community Commitment

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

Page 3: Upgrading Ember.js Apps

* Image: https://www.flickr.com/photos/deerkoski/14071866872 / https://creativecommons.org/licenses/by/2.0/

Page 4: Upgrading Ember.js Apps

CANARY BETA RELEASE LTS

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

Page 5: Upgrading Ember.js Apps

CANARY

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

“MASTER” BUILD

Page 6: Upgrading Ember.js Apps

CANARY BETA RELEASE LTS

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

Page 7: Upgrading Ember.js Apps

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

ONCE A WEEK

BETA

Page 8: Upgrading Ember.js Apps

CANARY BETA RELEASE LTS

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

Page 9: Upgrading Ember.js Apps

RELEASE

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

ONCE EVERY 6 WEEKS

Page 10: Upgrading Ember.js Apps

CANARY BETA RELEASE LTS

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

Page 11: Upgrading Ember.js Apps

LTS

* Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.

ONCE EVERY 4TH RELEASE (24 WEEKS)

Page 12: Upgrading Ember.js Apps

The Ember project adheres to semantic versioning. Releases are named according to a MAJOR.MINOR.PATCH scheme, and only MAJOR versions releases may change or remove public APIs after deprecation.

Ember.JS Release Cycle Page

Page 13: Upgrading Ember.js Apps

2.8 2.11 3.0*

* NOT REALISTIC TO 2.X RELEASE SERIES - USED FOR ILLUSTRATION ONLY

▸ Ember.Handlebars.SafeString

▸ Enumerable.contains

▸ renderToElement

▸ {{render}} helper

2.9 2.10 2.12▸ Ember.K ▸ All previous

deprecations removed

Page 14: Upgrading Ember.js Apps

TWO TYPES OF UPGRADES▸ Non-major upgrades (2.4 to 2.8)

✦ Deprecation logging / resolution

▸ Between major versions (2.8 to 3.0)

✦ All deprecations must be resolved

Page 15: Upgrading Ember.js Apps

UPGRADING AN EMBER APP IS EASY

Page 16: Upgrading Ember.js Apps

UPGRADING AN EMBER APP IS EASY

* SOMETIMES

*

Page 17: Upgrading Ember.js Apps

FIRST-CLASS TOOLS TO HELP

Page 18: Upgrading Ember.js Apps

FIRST-CLASS TOOLS TO HELP▸ ember-cli

▸ ember-cli-deprecation-workflow

▸ npm-check-updates

Page 19: Upgrading Ember.js Apps

https://youtu.be/bbF0xxOv740

Page 20: Upgrading Ember.js Apps

DEMO APP STATS▸ 2.4.3 LTS

▸ (old) add-ons

▸ acceptance tests

Page 21: Upgrading Ember.js Apps

DEMO APP STATS▸ 2.4.3 LTS

▸ (old) add-ons

▸ acceptance tests **

Page 22: Upgrading Ember.js Apps

ADD-ONS USED IN DEMO APP▸ liquid-fire

▸ ember-paper

▸ ember-font-awesome

▸ ember-cp-validations

▸ ember-cli-flash

Page 23: Upgrading Ember.js Apps

GOALS FOR THE TALK▸ next LTS (2.8.x)

▸ tests passing

▸ no deprecations

Page 24: Upgrading Ember.js Apps

STEP 0: LOG CURRENT DEPRECATIONS

Page 25: Upgrading Ember.js Apps

ember install ember-cli-deprecation-workflow

Page 26: Upgrading Ember.js Apps

ember install ember-cli-deprecation-workflow

▸ quiet the console

▸ log known issues

▸ track down source of deprecations

Page 27: Upgrading Ember.js Apps

https://youtu.be/NjbUMkMQg-A

Page 28: Upgrading Ember.js Apps

* Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Page 29: Upgrading Ember.js Apps

* Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

deprecation

Page 30: Upgrading Ember.js Apps

* Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

Page 31: Upgrading Ember.js Apps

* Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

deprecation

Page 32: Upgrading Ember.js Apps

CONFIG/DEPRECATION-WORKFLOW.JS

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };

Page 33: Upgrading Ember.js Apps

CONFIG/DEPRECATION-WORKFLOW.JS

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };

Page 34: Upgrading Ember.js Apps

CONFIG/DEPRECATION-WORKFLOW.JS

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };

Page 35: Upgrading Ember.js Apps

STEP 1: READ THE BLOG

Page 36: Upgrading Ember.js Apps

http://emberjs.com/blog/tags/releases.html

Page 37: Upgrading Ember.js Apps

http://emberjs.com/blog/2016/04/28/baseURL.html

Page 38: Upgrading Ember.js Apps

STEP 2: EMBER-CLI + INIT

Page 39: Upgrading Ember.js Apps

https://youtu.be/nWiYc4A9OJI

Page 40: Upgrading Ember.js Apps

SUCCESSFUL EMBER INIT▸ read blog posts first

▸ be mindful of overwriting customizations

▸ remember that ^C will not save anything

Page 41: Upgrading Ember.js Apps

GOALS FOR THE TALK▸ next LTS (2.8.x) √

▸ tests passing

▸ no deprecations

Page 42: Upgrading Ember.js Apps

IT JUST WORKS™

Page 43: Upgrading Ember.js Apps

JK LOL - IT’S RARELY THAT EASY

Page 44: Upgrading Ember.js Apps

TESTS FAILING 👎

Page 45: Upgrading Ember.js Apps

* Source: http://giphy.com/gifs/thisisgiphy-reaction-audience-l4HnKwiJJaJQB04Zq

Page 46: Upgrading Ember.js Apps

The Ember project adheres to semantic versioning. Releases are named according to a MAJOR.MINOR.PATCH scheme, and only MAJOR versions releases may change or remove public APIs after deprecation.

Ember.JS Release Cycle Page

Page 47: Upgrading Ember.js Apps

The Ember project adheres to semantic versioning. Releases are named according to a MAJOR.MINOR.PATCH scheme, and only MAJOR versions releases may change or remove

public APIs after deprecation.

Ember.JS Release Cycle Page

Page 48: Upgrading Ember.js Apps

ADD-ONS

Page 49: Upgrading Ember.js Apps

FAILURES SEEM FISHY...

https://travis-ci.org/blimmer/how-to-upgrade-ember/builds/192203425

not ok 107 PhantomJS 2.1 - Unit | Model | user: it exists message: > Promise rejected after it exists: [ember-cp-validations] Validator not found of type: presence.

--

not ok 119 PhantomJS 2.1 - Global error: Error: Error: Could not find module ember-htmlbars/keywords/view Error: Could not find module ember-metal/streams/stream

Page 50: Upgrading Ember.js Apps

STEP 3: DEPENDENCY MGMT

Page 51: Upgrading Ember.js Apps

DISCLAIMER: THIS IS NOT TO “CALL OUT” ANY ADD-ON AUTHORS.

Ben Limmer

Page 52: Upgrading Ember.js Apps

❤ EMBER ADD-ONS

Page 53: Upgrading Ember.js Apps

npm install -g npm-check-updates

Page 54: Upgrading Ember.js Apps

https://youtu.be/m9mQfGkPH0Y

Page 55: Upgrading Ember.js Apps

not ok 119 PhantomJS 2.1 - Global error: Error: Error: Could not find module ember-htmlbars/keywords/view Error: Could not find module ember-metal/streams/stream

VIEW / STREAM SEEMS LOW LEVEL

LIQUID FIRE?

Page 56: Upgrading Ember.js Apps

https://youtu.be/cd5Feiifr5w

Page 57: Upgrading Ember.js Apps

🎉 TESTS PASSING!

Page 58: Upgrading Ember.js Apps

GOALS FOR THE TALK▸ next LTS (2.8.x) √

▸ tests passing √

▸ no deprecations

Page 59: Upgrading Ember.js Apps

https://youtu.be/JYcaOuIGDtw

Page 60: Upgrading Ember.js Apps

TO UPGRADE OR NOT TO UPGRADE?

Page 61: Upgrading Ember.js Apps

https://youtu.be/b9zmBD8gAoM

Page 62: Upgrading Ember.js Apps

🎉 LESS DEPRECATIONS!

Page 63: Upgrading Ember.js Apps

https://youtu.be/8q1-rGtHUDk

Page 64: Upgrading Ember.js Apps

ember-cli 2.8.0 ! 2.10.0

ember-cli-app-version ^1.0.0 ! ^2.0.1

ember-cli-jshint ^1.0.0 ! ^2.0.1

ember-cli-qunit ^2.1.0 ! ^3.1.0

ember-cli-release ^0.2.9 ! ^1.0.0-beta.2

ember-load-initializers ^0.5.1 ! ^0.6.3

EVERYTHING LEFT IS EMBER CORE

Page 65: Upgrading Ember.js Apps

https://youtu.be/zTbIGNcohAI

Page 66: Upgrading Ember.js Apps

GOALS FOR THE TALK▸ next LTS (2.8.x) √

▸ tests passing √

▸ no deprecations √

Page 67: Upgrading Ember.js Apps

STEP 4: DEPLOY + MONITOR

Page 68: Upgrading Ember.js Apps

“SAFE” DEPLOY / TESTING▸ ember-cli-deploy-redis *

▸ use index keys to help

▸ keep an eye out for errors

▸ test critical flows

* SEE MY TALK ON EMBER-CLI-DEPLOY STRATEGIES FOR MORE INFO

Page 69: Upgrading Ember.js Apps

MONITOR JS ERRORS▸ new relic

▸ sentry

▸ track.js

▸ etc, etc

Page 70: Upgrading Ember.js Apps

ONGOING MAINTENANCE

Page 71: Upgrading Ember.js Apps

PAY ATTENTION TO DEPRECATIONS

▸ don’t have to fix all deprecations when upgrading minor versions

▸ use deprecation workflow file as a log

Page 72: Upgrading Ember.js Apps

USE THROW HANDLER

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };

Page 73: Upgrading Ember.js Apps

USE THROW HANDLER

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: “ember-htmlbars.ember-handlebars-safestring“ } ] };

Page 74: Upgrading Ember.js Apps

USE THROW HANDLER

window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "throw", matchId: “ember-htmlbars.ember-handlebars-safestring“ } ] };

Page 75: Upgrading Ember.js Apps

https://youtu.be/TPIC1GRePgs

Page 76: Upgrading Ember.js Apps

THANKS - HAVE FUN!

! l1m5" blimmer