vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feature/load-views-async #2672

Merged
konrad merged 10 commits from dpschen/frontend:feature/load-list-views-async into main 2022-11-13 21:52:30 +00:00
Conversation 8 Commits 10 Files Changed 2 +48 -48
dpschen commented 2022-11-10 20:56:23 +00:00
Member
Copy Link
No description provided.
dpschen added the
area/internal-code
 label 2022-11-10 20:56:23 +00:00
dpschen added 2 commits 2022-11-10 20:56:24 +00:00
continuous-integration/drone/pr Build is passing Details
28a179be4a
feat: load list views async
frederick commented 2022-11-10 21:01:03 +00:00
Member
Copy Link

Hi dpschen!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://2672-feature-load-list-views-async--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi dpschen! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://2672-feature-load-list-views-async--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.
dpschen added 2 commits 2022-11-10 21:08:11 +00:00
continuous-integration/drone/pr Build is passing Details
d7d3172808
feat: load list setting views async
dpschen added 1 commit 2022-11-10 21:18:29 +00:00
continuous-integration/drone/pr Build is passing Details
282fd05af6
feat: load namespace settings async
dpschen added 1 commit 2022-11-10 21:47:24 +00:00
continuous-integration/drone/pr Build is passing Details
e6c8ccbc88
feat: load saved filters async
dpschen added 1 commit 2022-11-10 22:04:10 +00:00
continuous-integration/drone/pr Build is passing Details
9edd9c6e9e
feat: load ListTeamsComponent async
dpschen added 1 commit 2022-11-11 08:55:51 +00:00
continuous-integration/drone/pr Build is passing Details
38b8019fb1
feat: load label handling components async
dpschen added 1 commit 2022-11-11 09:14:18 +00:00
continuous-integration/drone/pr Build is passing Details
735dee5f47
feat: load DataExportDownload async
dpschen added 1 commit 2022-11-11 09:48:25 +00:00
continuous-integration/drone/pr Build is passing Details
bc924aa833
feat: load ListNamespaces async
dpschen changed title from WIP: feature/load-list-views-async to WIP: feature/load-views-async 2022-11-11 14:55:50 +00:00
dpschen changed title from WIP: feature/load-views-async to feature/load-views-async 2022-11-11 14:56:21 +00:00
dpschen requested review from konrad 2022-11-11 14:56:24 +00:00
konrad was assigned by dpschen 2022-11-11 14:56:27 +00:00
konrad commented 2022-11-11 15:11:42 +00:00
Owner
Copy Link

I feel like there are way too many individual js files now:

dist/assets/About.9bc61e95.js                                                0.86 KiB / gzip: 0.49 KiB

dist/assets/dataExport.828bb300.js                                           0.31 KiB / gzip: 0.23 KiB

dist/assets/DataExportDownload.a48daa2d.js                                   1.46 KiB / gzip: 0.78 KiB

dist/assets/ListNamespaces.5c95c777.js                                       2.61 KiB / gzip: 1.06 KiB

dist/assets/colorPicker.8fc78231.js                                          1.84 KiB / gzip: 1.04 KiB

dist/assets/prioritySelect.vue_vue_type_script_setup_true_lang.edea12af.js   3.94 KiB / gzip: 1.57 KiB

dist/assets/AsyncEditor.7f83a01a.js                                          0.30 KiB / gzip: 0.20 KiB

dist/assets/reminders.4b167098.js                                            5.89 KiB / gzip: 2.14 KiB

dist/assets/useCopyToClipboard.bfda3369.js                                   0.52 KiB / gzip: 0.33 KiB

dist/assets/listSearch.2f1a5076.js                                           1.18 KiB / gzip: 0.68 KiB

dist/assets/createAsyncComponent.1f750ba6.js                                 0.72 KiB / gzip: 0.44 KiB

dist/assets/Done.faacef6b.js                                                 0.40 KiB / gzip: 0.30 KiB

dist/assets/loading.85105541.js                                              0.24 KiB / gzip: 0.21 KiB

dist/assets/multiselect.1a94c963.js                                          5.04 KiB / gzip: 2.01 KiB

dist/assets/ListTeams.b940ea89.js                                            1.17 KiB / gzip: 0.66 KiB

dist/assets/create-edit.vue_vue_type_script_setup_true_lang.0fe0037b.js      1.57 KiB / gzip: 0.71 KiB

dist/assets/migrators.f31fa224.js                                            0.58 KiB / gzip: 0.29 KiB

dist/assets/NewLabel.02c1c7f3.js                                             1.71 KiB / gzip: 0.88 KiB

dist/assets/TaskDetailView.dedbd66a.js                                       40.77 KiB / gzip: 11.84 KiB

dist/assets/ListLabels.3cb931df.js                                           4.09 KiB / gzip: 1.72 KiB

dist/assets/MigrationHandler.18f62890.js                                     4.02 KiB / gzip: 1.70 KiB

dist/assets/ListWrapper.85d6a5c9.js                                          2.64 KiB / gzip: 1.09 KiB

dist/assets/Migration.f766b665.js                                            0.92 KiB / gzip: 0.55 KiB

dist/assets/filter-popup.659ab7f2.js                                         1.50 KiB / gzip: 0.76 KiB

dist/assets/nothing.b507cdc5.js                                              0.23 KiB / gzip: 0.20 KiB

dist/assets/pagination.9afef16f.js                                           1.54 KiB / gzip: 0.78 KiB

dist/assets/ListList.458a9a8b.js                                             8.10 KiB / gzip: 3.42 KiB

dist/assets/filters.055ec471.js                                              14.49 KiB / gzip: 4.18 KiB

dist/assets/ListGantt.5f2b88af.js                                            10.41 KiB / gzip: 4.25 KiB

dist/assets/ListInfo.7b8a6666.js                                             0.81 KiB / gzip: 0.54 KiB

dist/assets/edit.10044ba3.js                                                 2.65 KiB / gzip: 1.12 KiB

dist/assets/ListTable.6e8272de.js                                            8.50 KiB / gzip: 2.61 KiB

dist/assets/duplicate.0ee8ffc7.js                                            1.81 KiB / gzip: 0.96 KiB

dist/assets/ListKanban.6c3d2e9d.js                                           12.91 KiB / gzip: 5.00 KiB

dist/assets/background.79079478.js                                           6.87 KiB / gzip: 3.00 KiB

dist/assets/share.d7587d10.js                                                7.59 KiB / gzip: 2.96 KiB

dist/assets/delete.2de81004.js                                               1.21 KiB / gzip: 0.68 KiB

dist/assets/archive.9e5d2dad.js                                              0.88 KiB / gzip: 0.51 KiB

dist/assets/userTeam.022d6e6e.js                                             7.82 KiB / gzip: 2.58 KiB

dist/assets/edit.7d7dff9e.js                                                 2.93 KiB / gzip: 1.24 KiB

dist/assets/share.758977e1.js                                                1.20 KiB / gzip: 0.66 KiB

dist/assets/archive.7f0ca3b1.js                                              1.18 KiB / gzip: 0.62 KiB

dist/assets/delete.1a788846.js                                               1.00 KiB / gzip: 0.59 KiB

dist/assets/FilterNew.6e3f7ffe.js                                            2.27 KiB / gzip: 0.96 KiB

dist/assets/FilterEdit.f21ac8a1.js                                           2.31 KiB / gzip: 1.01 KiB

dist/assets/FilterDelete.e67696fe.js                                         0.48 KiB / gzip: 0.32 KiB

dist/assets/passwordReset.de60e2ee.js                                        0.86 KiB / gzip: 0.44 KiB

dist/assets/PasswordReset.29cbcabf.js                                        1.44 KiB / gzip: 0.76 KiB

dist/assets/Settings.ea93f9bc.js                                             1.66 KiB / gzip: 0.72 KiB

dist/assets/RequestPasswordReset.8aa9f55b.js                                 1.69 KiB / gzip: 0.83 KiB

dist/assets/Caldav.82c1f984.js                                               3.38 KiB / gzip: 1.56 KiB

dist/assets/DataExport.96326fa9.js                                           1.69 KiB / gzip: 0.88 KiB

dist/assets/Deletion.b9d1478e.js                                             2.99 KiB / gzip: 1.11 KiB

dist/assets/EmailUpdate.4b1c4c06.js                                          2.04 KiB / gzip: 0.99 KiB

dist/assets/PasswordUpdate.b171c244.js                                       2.70 KiB / gzip: 1.12 KiB

dist/assets/General.6b5198df.js                                              6.52 KiB / gzip: 2.08 KiB

dist/assets/TOTP.b6d8fc2c.js                                                 3.99 KiB / gzip: 1.63 KiB

dist/assets/NewList.6cf494cb.js                                              1.75 KiB / gzip: 0.94 KiB

dist/assets/EditTeam.dc03e07e.js                                             7.20 KiB / gzip: 2.53 KiB

dist/assets/NewNamespace.f79357d2.js                                         1.91 KiB / gzip: 0.94 KiB

dist/assets/NewTeam.ba19bb3c.js                                              1.33 KiB / gzip: 0.78 KiB

Can't we at least group those < 3kb?

I feel like there are way too many individual js files now: ``` dist/assets/About.9bc61e95.js 0.86 KiB / gzip: 0.49 KiB dist/assets/dataExport.828bb300.js 0.31 KiB / gzip: 0.23 KiB dist/assets/DataExportDownload.a48daa2d.js 1.46 KiB / gzip: 0.78 KiB dist/assets/ListNamespaces.5c95c777.js 2.61 KiB / gzip: 1.06 KiB dist/assets/colorPicker.8fc78231.js 1.84 KiB / gzip: 1.04 KiB dist/assets/prioritySelect.vue_vue_type_script_setup_true_lang.edea12af.js 3.94 KiB / gzip: 1.57 KiB dist/assets/AsyncEditor.7f83a01a.js 0.30 KiB / gzip: 0.20 KiB dist/assets/reminders.4b167098.js 5.89 KiB / gzip: 2.14 KiB dist/assets/useCopyToClipboard.bfda3369.js 0.52 KiB / gzip: 0.33 KiB dist/assets/listSearch.2f1a5076.js 1.18 KiB / gzip: 0.68 KiB dist/assets/createAsyncComponent.1f750ba6.js 0.72 KiB / gzip: 0.44 KiB dist/assets/Done.faacef6b.js 0.40 KiB / gzip: 0.30 KiB dist/assets/loading.85105541.js 0.24 KiB / gzip: 0.21 KiB dist/assets/multiselect.1a94c963.js 5.04 KiB / gzip: 2.01 KiB dist/assets/ListTeams.b940ea89.js 1.17 KiB / gzip: 0.66 KiB dist/assets/create-edit.vue_vue_type_script_setup_true_lang.0fe0037b.js 1.57 KiB / gzip: 0.71 KiB dist/assets/migrators.f31fa224.js 0.58 KiB / gzip: 0.29 KiB dist/assets/NewLabel.02c1c7f3.js 1.71 KiB / gzip: 0.88 KiB dist/assets/TaskDetailView.dedbd66a.js 40.77 KiB / gzip: 11.84 KiB dist/assets/ListLabels.3cb931df.js 4.09 KiB / gzip: 1.72 KiB dist/assets/MigrationHandler.18f62890.js 4.02 KiB / gzip: 1.70 KiB dist/assets/ListWrapper.85d6a5c9.js 2.64 KiB / gzip: 1.09 KiB dist/assets/Migration.f766b665.js 0.92 KiB / gzip: 0.55 KiB dist/assets/filter-popup.659ab7f2.js 1.50 KiB / gzip: 0.76 KiB dist/assets/nothing.b507cdc5.js 0.23 KiB / gzip: 0.20 KiB dist/assets/pagination.9afef16f.js 1.54 KiB / gzip: 0.78 KiB dist/assets/ListList.458a9a8b.js 8.10 KiB / gzip: 3.42 KiB dist/assets/filters.055ec471.js 14.49 KiB / gzip: 4.18 KiB dist/assets/ListGantt.5f2b88af.js 10.41 KiB / gzip: 4.25 KiB dist/assets/ListInfo.7b8a6666.js 0.81 KiB / gzip: 0.54 KiB dist/assets/edit.10044ba3.js 2.65 KiB / gzip: 1.12 KiB dist/assets/ListTable.6e8272de.js 8.50 KiB / gzip: 2.61 KiB dist/assets/duplicate.0ee8ffc7.js 1.81 KiB / gzip: 0.96 KiB dist/assets/ListKanban.6c3d2e9d.js 12.91 KiB / gzip: 5.00 KiB dist/assets/background.79079478.js 6.87 KiB / gzip: 3.00 KiB dist/assets/share.d7587d10.js 7.59 KiB / gzip: 2.96 KiB dist/assets/delete.2de81004.js 1.21 KiB / gzip: 0.68 KiB dist/assets/archive.9e5d2dad.js 0.88 KiB / gzip: 0.51 KiB dist/assets/userTeam.022d6e6e.js 7.82 KiB / gzip: 2.58 KiB dist/assets/edit.7d7dff9e.js 2.93 KiB / gzip: 1.24 KiB dist/assets/share.758977e1.js 1.20 KiB / gzip: 0.66 KiB dist/assets/archive.7f0ca3b1.js 1.18 KiB / gzip: 0.62 KiB dist/assets/delete.1a788846.js 1.00 KiB / gzip: 0.59 KiB dist/assets/FilterNew.6e3f7ffe.js 2.27 KiB / gzip: 0.96 KiB dist/assets/FilterEdit.f21ac8a1.js 2.31 KiB / gzip: 1.01 KiB dist/assets/FilterDelete.e67696fe.js 0.48 KiB / gzip: 0.32 KiB dist/assets/passwordReset.de60e2ee.js 0.86 KiB / gzip: 0.44 KiB dist/assets/PasswordReset.29cbcabf.js 1.44 KiB / gzip: 0.76 KiB dist/assets/Settings.ea93f9bc.js 1.66 KiB / gzip: 0.72 KiB dist/assets/RequestPasswordReset.8aa9f55b.js 1.69 KiB / gzip: 0.83 KiB dist/assets/Caldav.82c1f984.js 3.38 KiB / gzip: 1.56 KiB dist/assets/DataExport.96326fa9.js 1.69 KiB / gzip: 0.88 KiB dist/assets/Deletion.b9d1478e.js 2.99 KiB / gzip: 1.11 KiB dist/assets/EmailUpdate.4b1c4c06.js 2.04 KiB / gzip: 0.99 KiB dist/assets/PasswordUpdate.b171c244.js 2.70 KiB / gzip: 1.12 KiB dist/assets/General.6b5198df.js 6.52 KiB / gzip: 2.08 KiB dist/assets/TOTP.b6d8fc2c.js 3.99 KiB / gzip: 1.63 KiB dist/assets/NewList.6cf494cb.js 1.75 KiB / gzip: 0.94 KiB dist/assets/EditTeam.dc03e07e.js 7.20 KiB / gzip: 2.53 KiB dist/assets/NewNamespace.f79357d2.js 1.91 KiB / gzip: 0.94 KiB dist/assets/NewTeam.ba19bb3c.js 1.33 KiB / gzip: 0.78 KiB ``` Can't we at least group those < 3kb?
dpschen commented 2022-11-11 15:25:35 +00:00
Author
Member
Copy Link

splitting per route is a common thing, since it allows us to reduce the initial request easily.

Via rollup we can tham decide which vendor dependencies get grouped whith which view. this way heavy vendor files will only get loaded when needed.

Habing many files / requests isn't a bad thing if we don't need them all at once.

What I want to add on top of this is dynamic preloading of links via hover (there is a plugin) and dynamic preloading in general. The latter allows us to cache all those files in the service worker when the user doesn't do anything.

There is another advantage of having many files: when there are no changes the hash should stay the same, meaning that the file will be cached much longer!

So... this is the way ™️ if you have a large js app and want to speed up initial load time / interaction.

splitting per route is a common thing, since it allows us to reduce the initial request easily. Via rollup we can tham decide which vendor dependencies get grouped whith which view. this way heavy vendor files will only get loaded when needed. Habing many files / requests isn't a bad thing if we don't need them all at once. What I want to add on top of this is dynamic preloading of links via hover (there is a plugin) and dynamic preloading in general. The latter allows us to cache all those files in the service worker when the user doesn't do anything. There is another advantage of having many files: when there are no changes the hash should stay the same, meaning that the file will be cached much longer! So... this is the way ™️ if you have a large js app and want to speed up initial load time / interaction.
konrad commented 2022-11-12 20:57:53 +00:00
Owner
Copy Link

Aren't all files already cached in the service worker?

I know with http/2 (and http/3 even more) the overhead of loading many files is very small so that it might makes sense, it just "feels" like a waste having that many files.

Aren't all files already cached in the service worker? I know with http/2 (and http/3 even more) the overhead of loading many files is very small so that it might makes sense, it just "feels" like a waste having that many files.
konrad commented 2022-11-12 20:59:25 +00:00
Owner
Copy Link

I think at least those you're very likely to use all at some point like list / namespace settings and the different views could be each one bundle.

I think at least those you're very likely to use all at some point like list / namespace settings and the different views could be each one bundle.
dpschen commented 2022-11-13 10:42:16 +00:00
Author
Member
Copy Link

Aren't all files already cached in the service worker?

Yes! and the smaller they are, the larger the chance they haven't changed.

I know with http/2 (and http/3 even more) the overhead of loading many files is very small so that it might makes sense,it just "feels" like a waste having that many files.

It's not. Also 1 request per page isn't something new in the web ;)

> Aren't all files already cached in the service worker? Yes! and the smaller they are, the larger the chance they haven't changed. > I know with http/2 (and http/3 even more) the overhead of loading many files is very small so that it might makes sense,it just "feels" like a waste having that many files. It's not. Also 1 request per page isn't something new in the web ;)
dpschen commented 2022-11-13 10:43:43 +00:00
Author
Member
Copy Link

Here is an article explaining this for vue 2. Seems still mostly valid for Vue 3:

https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/

We have vite now so there are no magic comments.

But what we can do is this:

https://github.com/egoist/vue-router-prefetch

I'm not sure how much improvement we get here over the precaching we have with the service worker already. I think this can mostly improve the initial navigations. Reason beeing that the service worker just caches all of the app data, while vue-router-prefetch can prefetch the routes that you actually gonna need.

Here is an article explaining this for vue 2. Seems still mostly valid for Vue 3: https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/ We have vite now so there are no magic comments. But what we can do is this: https://github.com/egoist/vue-router-prefetch I'm not sure how much improvement we get here over the precaching we have with the service worker already. I think this can mostly improve the initial navigation**s**. Reason beeing that the service worker just caches _all_ of the app data, while vue-router-prefetch can prefetch the routes that you actually gonna need.
👍 1
konrad merged commit fd1d01164f into main 2022-11-13 21:52:30 +00:00
konrad deleted branch feature/load-list-views-async 2022-11-13 21:52:30 +00:00
konrad commented 2022-11-13 21:56:55 +00:00
Owner
Copy Link

aaaand I squashed again -.-

aaaand I squashed again -.-
😆 1
This repo is archived. You cannot comment on pull requests.
Reviewers
No reviewers
konrad
Labels
Clear labels   
area/internal-code

   
changes requested

   
confirmed

   
dependencies

   
duplicate

This issue or pull request already exists

  
good first issue

   
help wanted

Need some help

  
hosting

   
invalid

Something is wrong

  
kind/bug

Something is not working

  
kind/feature

New feature

  
question

More information is needed

  
wontfix

This won't be fixed

No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
konrad
3 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/frontend#2672
No description provided.
Delete Branch "dpschen/frontend:feature/load-list-views-async"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?