Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Upgrading Ember.js Apps

350 views

Published on

A step-by-step walkthrough describing how to upgrade an Ember.js application. This slide-deck includes links to video resources. This talk was originally given at the Ember.js Denver Meetup in January 2017.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Upgrading Ember.js Apps

  1. 1. BEN LIMMER UPGRADING EMBER.JS APPS
  2. 2. 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.
  3. 3. * Image: https://www.flickr.com/photos/deerkoski/14071866872 / https://creativecommons.org/licenses/by/2.0/
  4. 4. CANARY BETA RELEASE LTS * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
  5. 5. CANARY * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc. “MASTER” BUILD
  6. 6. CANARY BETA RELEASE LTS * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
  7. 7. * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc. ONCE A WEEK BETA
  8. 8. CANARY BETA RELEASE LTS * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
  9. 9. 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
  10. 10. CANARY BETA RELEASE LTS * Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
  11. 11. 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)
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. UPGRADING AN EMBER APP IS EASY
  16. 16. UPGRADING AN EMBER APP IS EASY * SOMETIMES *
  17. 17. FIRST-CLASS TOOLS TO HELP
  18. 18. FIRST-CLASS TOOLS TO HELP ▸ ember-cli ▸ ember-cli-deprecation-workflow ▸ npm-check-updates
  19. 19. https://youtu.be/bbF0xxOv740
  20. 20. DEMO APP STATS ▸ 2.4.3 LTS ▸ (old) add-ons ▸ acceptance tests
  21. 21. DEMO APP STATS ▸ 2.4.3 LTS ▸ (old) add-ons ▸ acceptance tests **
  22. 22. ADD-ONS USED IN DEMO APP ▸ liquid-fire ▸ ember-paper ▸ ember-font-awesome ▸ ember-cp-validations ▸ ember-cli-flash
  23. 23. GOALS FOR THE TALK ▸ next LTS (2.8.x) ▸ tests passing ▸ no deprecations
  24. 24. STEP 0: LOG CURRENT DEPRECATIONS
  25. 25. ember install ember-cli-deprecation-workflow
  26. 26. ember install ember-cli-deprecation-workflow ▸ quiet the console ▸ log known issues ▸ track down source of deprecations
  27. 27. https://youtu.be/NjbUMkMQg-A
  28. 28. * Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
  29. 29. * Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY deprecation
  30. 30. * 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
  31. 31. * 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
  32. 32. CONFIG/DEPRECATION-WORKFLOW.JS window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };
  33. 33. CONFIG/DEPRECATION-WORKFLOW.JS window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };
  34. 34. CONFIG/DEPRECATION-WORKFLOW.JS window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };
  35. 35. STEP 1: READ THE BLOG
  36. 36. http://emberjs.com/blog/tags/releases.html
  37. 37. http://emberjs.com/blog/2016/04/28/baseURL.html
  38. 38. STEP 2: EMBER-CLI + INIT
  39. 39. https://youtu.be/nWiYc4A9OJI
  40. 40. SUCCESSFUL EMBER INIT ▸ read blog posts first ▸ be mindful of overwriting customizations ▸ remember that ^C will not save anything
  41. 41. GOALS FOR THE TALK ▸ next LTS (2.8.x) √ ▸ tests passing ▸ no deprecations
  42. 42. IT JUST WORKS™
  43. 43. JK LOL - IT’S RARELY THAT EASY
  44. 44. TESTS FAILING 👎
  45. 45. * Source: http://giphy.com/gifs/thisisgiphy-reaction-audience-l4HnKwiJJaJQB04Zq
  46. 46. 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
  47. 47. 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
  48. 48. ADD-ONS
  49. 49. 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
  50. 50. STEP 3: DEPENDENCY MGMT
  51. 51. DISCLAIMER: THIS IS NOT TO “CALL OUT” ANY ADD-ON AUTHORS. Ben Limmer
  52. 52. ❤ EMBER ADD-ONS
  53. 53. npm install -g npm-check-updates
  54. 54. https://youtu.be/m9mQfGkPH0Y
  55. 55. 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?
  56. 56. https://youtu.be/cd5Feiifr5w
  57. 57. 🎉 TESTS PASSING!
  58. 58. GOALS FOR THE TALK ▸ next LTS (2.8.x) √ ▸ tests passing √ ▸ no deprecations
  59. 59. https://youtu.be/JYcaOuIGDtw
  60. 60. TO UPGRADE OR NOT TO UPGRADE?
  61. 61. https://youtu.be/b9zmBD8gAoM
  62. 62. 🎉 LESS DEPRECATIONS!
  63. 63. https://youtu.be/8q1-rGtHUDk
  64. 64. 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
  65. 65. https://youtu.be/zTbIGNcohAI
  66. 66. GOALS FOR THE TALK ▸ next LTS (2.8.x) √ ▸ tests passing √ ▸ no deprecations √
  67. 67. STEP 4: DEPLOY + MONITOR
  68. 68. “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
  69. 69. MONITOR JS ERRORS ▸ new relic ▸ sentry ▸ track.js ▸ etc, etc
  70. 70. ONGOING MAINTENANCE
  71. 71. PAY ATTENTION TO DEPRECATIONS ▸ don’t have to fix all deprecations when upgrading minor versions ▸ use deprecation workflow file as a log
  72. 72. USE THROW HANDLER window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: "ember-getowner-polyfill.import" } ] };
  73. 73. USE THROW HANDLER window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "silence", matchId: “ember-htmlbars.ember-handlebars-safestring“ } ] };
  74. 74. USE THROW HANDLER window.deprecationWorkflow = window.deprecationWorkflow || {}; window.deprecationWorkflow.config = { workflow: [ { handler: "throw", matchId: “ember-htmlbars.ember-handlebars-safestring“ } ] };
  75. 75. https://youtu.be/TPIC1GRePgs
  76. 76. THANKS - HAVE FUN! l1m5blimmer
  77. 77. RESOURCES ▸ demo app repository (see closed PRs) ▸ npm-check-updates ▸ ember-cli-deprecation-workflow ▸ benlimmer.com

×