Migrate to Vue 3

[exalate-issue-sync[bot]]

discuss:

are dependencies we are using already in good shape reg. vue3 ?

Stories

As a developer I want to utilise the latest features of Vue.js framework.

As a developer I want to leverage latest security improvements of Vue.js framework.

As a developer I want to have strict typing.

As a user I want to experience a high performance and low RAM usage web application.

Prerequisites // Tasks

• [ ] ownCloud design system should be bundled by rollUp (https://jira.owncloud.com/browse/WEB-176)
• [ ] ownCloud design system needs to be ported to vue3 (https://jira.owncloud.com/browse/WEB-176)
• [ ] web needs to be ported to vue3

Vendor dependency compatibility notes (might grow in the migration proccess)

Libs that we're using and are not yet officially ported to Vue 3 (community ports are already existing but not yet tested in production according to their descriptions):

• Vue Events
• Vue Gettext (doesn't seem to have plans for migrating https://github.com/Polyconseil/vue-gettext/pull/118#issuecomment-678797499)
• Vue clipboard
  • Used to copy private and public links. We could do this also with some native js lib
• Vue meta
  • Used to update title depending on the theme. For that use case we could use teleport but not sure if that would work dynamically when we start changing titles for every route
• Vue resize (not needed when https://jira.owncloud.com/browse/WEB-101 is DONE)
  • Used in file listing to dynamically update the size of the header
• Vue scroll to
  • Used in file listing to scroll to a resource when navigating via private link and is anyway broken currently
• Vue touch
  • Used in sidebar for closing it with "swipe to the left" - not a blocker IMHO

[exalate-issue-sync[bot]]

Lukas Hirt commented: WIP branch https://github.com/owncloud/web/tree/migrate-to-vue3

[exalate-issue-sync[bot]]

Benedikt Kulmann commented: Solving https://jira.owncloud.com/browse/OCIS-1121 first / as a prerequisite would remove the need for the Vue resize lib.

[exalate-issue-sync[bot]]

Lukas Hirt commented: The new version of rollup Vue plugin seems to require Vue 3 as a dependency. We need to be extra careful with this when updating our extensions.

[exalate-issue-sync[bot]]

Florian Schade commented: [~bkulmann], [~lhirt], shouldn't be the story "As a developer I want to have strict typing" be a separate issue that covers the whole switch to typescript?

[exalate-issue-sync[bot]]

Florian Schade commented: [~bkulmann], i added a section that covers Prerequisites, i will have a look tomorrow what this means from a timing perspective, maybe it's required (if those tasks are too large) to track them in seperate subtasks or even dedicated issues. I keep this updated and will at least get a info till next sprint planning

[exalate-issue-sync[bot]]

Lukas Hirt commented: > i added a section that covers Prerequisites, i will have a look tomorrow what this means from a timing perspective, maybe it's required (if those tasks are too large) to track them in seperate subtasks or even dedicated issues. I keep this updated and will at least get a info till next sprint planning

There is already a subtask for ODS https://jira.owncloud.com/browse/WEB-176

[exalate-issue-sync[bot]]

Florian Schade commented: thanks [~lhirt], i havent seen this, i updated the tasks // prerequisites section.

[kulmann]

This issue got more important recently. For folders with a lot of files any update on a displayed file (e.g. renaming it or selected/deselecting it in the list) invalidates the virtual DOM of the entire file list.

This has been reproduced with a minimalistic vue2 example project to eliminate possible side effects of e.g. vuex-store, our design system, etc. Setup of the example project:

• a single component with a native html table, that renders 1000 items into table rows.
• the 1000 data items were just arrays of 2 elements, each
• the table row (tr) was wrapped into a custom component so that we could subscribe to the updated lifecycle hook
• each row had a button that changed the content of the first cell of the row in a reactive way (for vue2: Vue.set on the element in the data array or replacing the whole data array, both had the same effect of invalidating the virtual DOM of all 1000 rows)

The same example project then has been recreated in vue3, which successfully handles invalidation of the virtual DOM for only the row that represents the updated element in the list. Reactive data update in vue3 can happen without Vue.set. Otherwise the code was unchanged.

Conclusion: in order to work with large file lists efficiently (no lags in the UI during partial updates) we need to update our stack to vue3. Decision: we can't afford to do that at the moment. We'll have to wait until after the oCIS GA release. Decision made by: @dragotin / Klaas Freitag, @tbsbdr / Tobias Baader, @kulmann / Benedikt Kulmann. Workaround: We'll enforce the pagination to never show more than 500 elements on one page.

[JammingBen]

Web is finally running Vue 3 🥳