Upgrading Ember.js Apps

Post on 14-Feb-2017

92 views 0 download

Transcript of Upgrading Ember.js Apps

BEN LIMMERUPGRADING 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.

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

CANARY BETA RELEASE LTS

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

CANARY

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

“MASTER” BUILD

CANARY BETA RELEASE LTS

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

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

ONCE A WEEK

BETA

CANARY BETA RELEASE LTS

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

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

CANARY BETA RELEASE LTS

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

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)

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

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

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

UPGRADING AN EMBER APP IS EASY

UPGRADING AN EMBER APP IS EASY

* SOMETIMES

*

FIRST-CLASS TOOLS TO HELP

FIRST-CLASS TOOLS TO HELP▸ ember-cli

▸ ember-cli-deprecation-workflow

▸ npm-check-updates

https://youtu.be/bbF0xxOv740

DEMO APP STATS▸ 2.4.3 LTS

▸ (old) add-ons

▸ acceptance tests

DEMO APP STATS▸ 2.4.3 LTS

▸ (old) add-ons

▸ acceptance tests **

ADD-ONS USED IN DEMO APP▸ liquid-fire

▸ ember-paper

▸ ember-font-awesome

▸ ember-cp-validations

▸ ember-cli-flash

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

▸ tests passing

▸ no deprecations

STEP 0: LOG CURRENT DEPRECATIONS

ember install ember-cli-deprecation-workflow

ember install ember-cli-deprecation-workflow

▸ quiet the console

▸ log known issues

▸ track down source of deprecations

https://youtu.be/NjbUMkMQg-A

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

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

deprecation

* 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

* 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

CONFIG/DEPRECATION-WORKFLOW.JS

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

CONFIG/DEPRECATION-WORKFLOW.JS

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

CONFIG/DEPRECATION-WORKFLOW.JS

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

STEP 1: READ THE BLOG

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

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

STEP 2: EMBER-CLI + INIT

https://youtu.be/nWiYc4A9OJI

SUCCESSFUL EMBER INIT▸ read blog posts first

▸ be mindful of overwriting customizations

▸ remember that ^C will not save anything

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

▸ tests passing

▸ no deprecations

IT JUST WORKS™

JK LOL - IT’S RARELY THAT EASY

TESTS FAILING 👎

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

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

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

ADD-ONS

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

STEP 3: DEPENDENCY MGMT

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

Ben Limmer

❤ EMBER ADD-ONS

npm install -g npm-check-updates

https://youtu.be/m9mQfGkPH0Y

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?

https://youtu.be/cd5Feiifr5w

🎉 TESTS PASSING!

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

▸ tests passing √

▸ no deprecations

https://youtu.be/JYcaOuIGDtw

TO UPGRADE OR NOT TO UPGRADE?

https://youtu.be/b9zmBD8gAoM

🎉 LESS DEPRECATIONS!

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

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

https://youtu.be/zTbIGNcohAI

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

▸ tests passing √

▸ no deprecations √

STEP 4: DEPLOY + MONITOR

“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

MONITOR JS ERRORS▸ new relic

▸ sentry

▸ track.js

▸ etc, etc

ONGOING MAINTENANCE

PAY ATTENTION TO DEPRECATIONS

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

▸ use deprecation workflow file as a log

USE THROW HANDLER

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

USE THROW HANDLER

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

USE THROW HANDLER

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

https://youtu.be/TPIC1GRePgs

THANKS - HAVE FUN!

! l1m5" blimmer