Estimate effort for Vue2 -> Vue3 upgrade

severinbeauvais commented 2 years ago

determine what's involved
look into dependencies
unit test impacts?
QA impacts? (UX Assurance? full regression?)
who should be involved
how much work for 1 typical UI
how much work for BCRS shared components?

severinbeauvais commented 2 years ago

Assumptions and questions

assumes no refactoring to Composition API design
- unless it's easier than upgrading the Class Style API
- see also https://github.com/yoyo930021/vc2c (Vue Class to Composition converter)
assumes no refactor of bcrs-shared-components for CSS rollup/build/minify (re: # 9874)
assumes no refactor of bcrs-shared-components into web components (re: # 10725)
assumes sbc-common-components and bcrs-shared-components are already updated
assumes we won't use shims/wrappers/workarounds to make Vue2 code work in Vue3 (ie, we will have proper Vue3 code, though not necessarily using Composition API)
- to avoid tech debt! (temp code that we will need to resolve later)
business-filings-ui is oldest UI (not counting name-examination) but I will look at business-create-ui as it's more complicated than business-edit-ui (which is the most modern)
should we use Vue 2 compatible APIs or upgrade all of them? what are implications of doing the first thing now and doing the other thing later?
should we use config flags to retain Vue2 functionality for any reason? what are the implications?
what don't I know?

severinbeauvais commented 2 years ago

Imports to upgrade

"dependencies": {
   ...
   "@vue/compat": "^3.2.39",
   "launchdarkly-js-client-sdk": "^2.22.1",
   "uuid": "^9.0.0",
   "vue": "^3.2.39",
   "vue-router": "^4.1.5",
   "vuetify": "3.0.0-beta.4",
   "vuex": "^4.0.2",
   ...
},
"devDependencies": {
   ...
   "@mdi/font": "^7.0.96",
   "@typescript-eslint/eslint-plugin": "^5.37.0",
   "@typescript-eslint/parser": "^5.37.0",
   "@vue/cli-plugin-babel": "^5.0.8",
   "@vue/cli-plugin-eslint": "^5.0.8",
   "@vue/cli-plugin-typescript": "^5.0.8",
   "@vue/cli-plugin-unit-jest": "^5.0.8",
   "@vue/cli-service": "^5.0.8",
   "@vue/compiler-sfc": "^3.2.39",
   "@vue/eslint-config-standard": "^8.0.1",
   "@vue/eslint-config-typescript": "^11.0.1",
   "@vue/test-utils": "^2.0.2",
   "eslint": "^8.23.1",
   "eslint-plugin-vue": "^9.4.0",
   "s-vuex-class": "^0.4.1",
   "typescript": "^4.8.3",
   "vue-class-component": "8.0.0-rc.1",
   "vue-property-decorator": "10.0.0-rc.3",
   "vuex-composition-helpers": "^1.1.2",
   "vuex-module-decorators": "^2.0.0",
   "webpack-plugin-vuetify": "2.0.0-alpha.11",
   ...
  }

There may be more than the above. The packages above seem to work together and were the latest when I wrote this.

severinbeauvais commented 2 years ago

What needs to be refactored/redesigned

Ref: https://v3-migration.vuejs.org/breaking-changes/

Legend for my estimates: SMALL = 1 day or less MEDIUM = more than a day but less than a week LARGE = more than a week

use of $on and $off (SMALL)
use of filters? see https://npm.io/package/vue3-filters (UNKNOWN)
unit tests - see https://test-utils.vuejs.org/migration/ (MEDIUM)
v-model updates (SMALL)
document emitters (SMALL)
keyup/keydown (SMALL)
verify all other breaking changes (SMALL)
decorators - vue-class-component and vue-property-decorator (UNKNOWN)
replacing vuex with pinia (MEDIUM)
classes that extend Vue (SMALL)
change from Class API to Options API (to be ready for Composition API)??? (MEDIUM or LARGE)

There may be more than what I found.

severinbeauvais commented 2 years ago

Steps (in general)

update build tools (eg, vue-cli) (SMALL)
update packages (SMALL)
fix lint errors (SMALL)
fix build errors (UNKNOWN)
fix unit tests (UNKNOWN)
fix runtime errors (UNKNOWN)

Ref: https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow

Ref: https://cli.vuejs.org/migrations/migrate-from-v4.html

severinbeauvais commented 2 years ago

What needs to be UXAed / QAed

all components
- all props and variations (eg, present/absent)
- all emits
misc error handling
filters
all UI styles and behaviours
watch dev console for runtime warnings

severinbeauvais commented 2 years ago

Problems to solve

incompatible bcrs-shared-components - this will need to be updated first
incompatible sbc-common-components - this will need to be updated first
incompatible launchdarkly-js-client-sdk -- see #13649
incompatible pdfjs-dist -- see #13650
incompatible vue-affix -- see #13651
incompatible vue-the-mask -- see #13652
incompatible vue2-filters -- see #13653
incompatible vuelidate -- see #13654
incompatible vuex-module-decorators -- see #13655
vuetify is still beta
vue-class-component is still rc
vue-property-decorator is still rc
some decorators need to be refactored
vue-test-utils incompatibilities (from 1.0.0-beta.33 to latest v1 or v2)
need to figure out Typescript/Babel packages -- see #13656
need to figure out Webpack packages (or use Vite?) - see #13657
...

The list above is as far as I got within the time allocated for this ticket.

severinbeauvais commented 2 years ago

~Recommended approach~ Obsolete -- see epic, RC discussions, and ongoing meetings

Option 1 First update everything to Vue 2.7 (which is more compatible with Vue3 than our existing version) including possibly refactoring everything to Composition API, then update to Vue 3.

Pro: Possibly easier to move to Vue 3. More common code architecture between projects.

Con: I think that using Composition API is not mandatory in Vue 3 so it's a lot of work for unknown benefit.

Option 2 First update everything to Vue 2.7 (which is more compatible with Vue3 than our existing version) but don't refactor everything to Composition API, then update to Vue 3.

Pro: Possibly easier to move to Vue 3 later. Possibly more compatibility up front. Imported packages are more stable. Can split up work better. Can split up work over longer period.

Con: Possibly more work than Option 3.

Option 3 Update everything to Vue 3 without changing to Composition API.

Pro: Defer work. Do it all at once.

Con: All the pain will come at once. Possible dependencies and time contraints between projects.

Recommendations

Implement option 1 or option 2. Basically, phase in the work (with or without refactoring to Composition API).

Convert to Composition API (which we can do in Vue 2.7) now. This is apparently straightforward per component but it's we have a lot of components, and it will require extensive testing of everything.
Wait a little longer for dependencies (ie, imported packages) to be properly released (no alpha/beta/rc builds) until we update to the Vue 3 packages.
Do something about the Vuex changes, decorator changes, etc
Do something about the unit tests (ie, use latest v1 release of the vue-test-utils (to make it easier to go to v2 later).
Must update sbc-common-components and bcrs-shared-components first!
- can leverage some work that PPR did
- can we combines these 2 repos?
- should we move towards shared components as Web Components?
- see what Faiz did in FAS re: compatibilities and pre-compiled

severinbeauvais commented 2 years ago

^^^ this was discussed at Vue3 Kickoff Meeting

cc: @cameron-freshworks @seeker25 @pwei1018 @kialj876 @thorwolpert @ozamani9

bcgov / entity