Page MenuHomekolab.org

Integrate video chat into app.js (as an async component)
ClosedPublic

Authored by machniak on Dec 28 2020, 2:08 PM.

Details

Reviewers
vanmeeuwen
Group Reviewers
Restricted Project
Commits
rK8de4819f466d: Integrate video chat into app.js (as an async component)
Summary

This integrates two apps into one, making things simpler and convenient.
The app.js size does not grow because the whole Room component as well as openvidu lib
are loaded when needed.

Test Plan

./phpunit

Diff Detail

Repository
rK kolab
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

machniak requested review of this revision.Dec 28 2020, 2:08 PM
machniak created this revision.

I would like to learn more about the "async" or "lazy-loading" (if that's applicable terminology), as it could be the underpinnings of our future dashboard widgety approach?

I would like to learn more about the "async" or "lazy-loading" (if that's applicable terminology), as it could be the underpinnings of our future dashboard widgety approach?

Maybe. The documentation is quite limited. There are some other methods to do some dynamic loading of vue components. For now I'm using the method described at https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State. Current solution is not complete yet. I have to at least add some "loading indicator" and some error handling.

I would like to learn more about the "async" or "lazy-loading" (if that's applicable terminology), as it could be the underpinnings of our future dashboard widgety approach?

Maybe. The documentation is quite limited. There are some other methods to do some dynamic loading of vue components. For now I'm using the method described at https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State. Current solution is not complete yet. I have to at least add some "loading indicator" and some error handling.

I would like to feel like I'm able to say that those methods should be further explored, but I have to admit that on a technical level, I don't know what I'm talking about with regards to those methods.

What I think is a target we can agree on is though, many-many things "could" be loaded, but "shouldn't" be loaded -- in terms of some of them widgets we talked about, dependent on the user-specified preferences of what to display on their dashboard. I call this "lazy loading" -- or "loading what is requested (in a (user-defined) context)" -- and I can not but wonder what you're exploring here could get us to better understand and ultimately define and implement that.

TL;DR: Make video chat app part of the main app without the app size concerns.

At the moment the meet.js is a separate application, it's made this for three reasons mainly: 1. we don't want the main application file(s) to be very big, e.g. because they are loaded when user accesses the homepage only, 2. at some point we considered it to be loaded in a separate domain. 3. I didn't know how to use dynamic components when we implemented it (and it wasn't a big deal at that point).

So, the idea in point 2. has been abandoned (at least for now) and with this diff the size issue is not a problem anymore. Having one app allows us to simplify some things, like e.g. the menu widget. And e.g. we can use router links to move from the app to the /meet/room (we don't have to load big meet.js that includes content of app.js) and back. This of course looks better from a user perspective.

If you npm run prod this you will see there's app.js ~450KB, and room.js ~230KB, before we had app.js ~450KB and meet.js ~630KB. So, if you access the /meet/room only you have to load 450+230KB - slighlty more than now, but if you access the homepage (or any kolab4 page) first, /meet/room will fetch only the additional 230KB.

We could even consider merging admin app into the main app, but this is not that much needed, and might be actually better to have it separated.

We could load some other components dynamically, but all of them right now are small (and don't have extra external dependencies), so it does not have much sense.

machniak updated this revision to Diff 5641.Jan 5 2021, 4:18 PM
  • Corrected components lazy-loading + loader element
machniak retitled this revision from [Draft] Integrate video chat into app.js (as an async component) to Integrate video chat into app.js (as an async component).Jan 5 2021, 4:29 PM
machniak updated this revision to Diff 5647.Jan 6 2021, 12:04 PM
  • Remove redundant code
machniak updated this revision to Diff 5653.Jan 6 2021, 2:10 PM
  • Fix unexpected logon form when accessing the room
vanmeeuwen accepted this revision.Jan 7 2021, 10:43 AM
This revision is now accepted and ready to land.Jan 7 2021, 10:43 AM
This revision was automatically updated to reflect the committed changes.