Top Banner
BEN LIMMER UPGRADING EMBER.JS APPS
77

Upgrading Ember.js Apps

Feb 14, 2017

Download

Technology

Ben Limmer
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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