Search code examples
ember.jsember-cli

How can I upgrade ember 2.7 to 3.28?


My team inherited an old (around 2017) ember.js based project, and we need to choose between remake the project with vue, or just upgrade ember version.

The project use node 6.16, and here are the dependencies :

// package.json
{
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.2.0",
    "chart.js": "2.2.1",
    "ember-ajax": "0.7.1",
    "ember-browserify": "1.1.13",
    "ember-cli": "2.4.2",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-autoprefixer": "0.6.0",
    "ember-cli-babel": "^5.1.5",
    "ember-cli-chart": "3.1.0",
    "ember-cli-chartjs": "2.3.1",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.3.5",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.10.2",
    "ember-cli-moment-shim": "2.2.0",
    "ember-cli-qunit": "^1.2.1",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "5.3.0",
    "ember-cli-spinjs": "1.0.8",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-cookies": "0.0.9",
    "ember-data": "^2.18.5",
    "ember-disable-proxy-controllers": "^1.0.2",
    "ember-export-application-global": "^1.0.4",
    "ember-load-initializers": "^0.5.0",
    "ember-models-table": "1.11.0",
    "ember-moment": "7.0.0-beta.3",
    "ember-pikaday": "2.1.0",
    "ember-power-select": "1.0.0-beta.14",
    "ember-resolver": "^2.0.3",
    "ember-rl-year-picker": "^0.2.0",
    "liquid-fire": "0.24.0",
    "loader.js": "^4.0.0",
    "semantic-ui-ember": "2.0.0-beta.0"
  },
  "dependencies": {
    "ember-colpick": "^0.6.2",
    "findup": "^0.1.5",
    "semantic-ui-icon": "^2.3.3"
  }
}
// bower.json
{
  "dependencies": {
    "ember": "~2.7",
    "ember-cli-shims": "0.1.0",
    "ember-cli-test-loader": "0.2.2",
    "ember-qunit-notifications": "0.1.0",
    "hammerjs": "^2.0.6",
    "matchMedia": "0.2.0",
    "semantic-ui": "^2.2.4",
    "chartjs": "2.1.6",
    "spin.js": "^2.3.2",
    "mjolnic-bootstrap-colorpicker": "^2.3.6",
    "colpick": "2.0.2",
    "pikaday": "^1.4.0"
  },
  "devDependencies": {
    "js-cookie": "^2.1.2"
  }
}

Yes the project use bower & npm, no idea why.

Knowing this, I got some questions :

  • Is this normal that ember-cli from npm has not the same version as ember from bower ?

  • Do you think it is even possible to upgrade ember from 2.7 (or 2.4.2??) to 3.28 (which is LTS) ? We tried to use the famous ember update and ember-cli-update but it seems that our version (2.4.2) of ember-cli doesn't support it. We can't even find from which version this is supported.

  • If this is possible, then how ?

  • Is it possible to get rid of bower ? Before upgrading or after ?

The project is quite large, so we would like to avoid remaking it with vuejs.

And to answer the "why upgrading ember ?", well, node 6 is awful. We need at least node 12


Solution

  • every version is upgradable! But the safest way to do so is probably to traverse from LTS to LTS.

    So, 2.4 -> 2.8 -> 2.12 -> 2.16 -> 2.18 -> 3.4 -> 3.8 -> 3.12 -> 3.16 > 3.20 -> 3.24 -> 3.28

    More information about Releases here

    That may sound like a lot of work, but it's why it's so important to keep up with upgrades. (It may not actually be that much work, depending on the size of your app, and how much you get distracted by new features)

    The general strategy at each step is:

    • have a good test suite
    • loop:
      • ensure you have 0 deprecations being logged while running tests
      • upgrade all libraries to the highest they can go while supporting your version of ember (this'll require some spelunking, but thankfully, you don't have very many non-default deps)
      • upgrade your ember-source version to the next LTS

    Getting off bower is a little non-standard though (in that it's a one-time thing), but there are some blog posts to help you out:

    The 2x release blog posts: https://blog.emberjs.com/tag/version-2-x The 3x release blog posts: https://blog.emberjs.com/tag/version-3-x

    From reading the 2-x blog posts, I found this migration guide for getting off bower: https://github.com/ember-cli/ember-cli/releases/tag/v2.13.0-beta.1

    • I'd probably try to do this first, because you can do the nice upgrade loop described above

    However, since you're thinking about re-writing in Vue, it may make sense to just re-write in Ember 4.2 instead -- since a lot of the concepts transfer (if you're not familiar with the latest ember, I cannot recommend the tutorial enough, as it's hard to top.

    For a full list of features there is this app: https://upgrade.emberjs.com/changes?fromVersion=2.4&toVersion=4.2

    (It says to run some commands, I wouldn't do either of those commands being as far back as 2.4)

    For better support through you're upgrade, I recommend joining ember's discord server: https://discord.gg/emberjs