As we embark on our adventure building the sticky header, one question we are not 100% sure about is whether we can build the entire feature in Vue.js. This will influence a decision around how to build our component.
Currently Vue.js and WVUI are pulled down when a user focuses the search box. If the search box is focused on load, the libraries will load straight away.
However we've noticed in other cases, for example the use of Vega library for graphs on the Facebook page, these scripts load on page view. It's not clear if these are bugs, and if so why they are not being treated as UBN (T272530). This has led to some confusion amongst the team around what is acceptable and what isn't.
Questions to answer
To help inform this decision, we should meet with the design systems (first) and performance teams (later) and understand several things from both their perspectives.
- What does critical path mean to the performance team, given our JavaScript is loaded asynchronously. What are the risks of loading Vue.js/WVUI on page load for all users? What problems would this manifest to the user/Wikimedia operations? (This question should help us knowledge share and understand the problem better going into the next questions)
- Under what circumstances could Vue.js be loaded on page load ? (Note: please avoid the answer "never", there must be some world where this can be true)
2a) For logged in users
2b) For anonymous users
2c) For all users
- What events would it be acceptable to load Vue+WVUI ? For example, we currently load on focus, would this loading strategy be acceptable on the following events (and if not why, if it depends please elaborate)?:
3a) Scroll event
3b) click event
3c) (Mutation/intersection)Observer event (e.g. an element comes into view at a certain place in the page)
- Would it be acceptable to load WVUI/Vue.js after a time delay?
Outcome
A Google Doc or etherpad should document the learnings here, particularly for those not involved in the conversation. Note, we are not looking to make a decision, just to capture knowledge.
Suggested approach
We'll probably want to tag performance team when ready and setup a meeting. Team members should be made optional, but include those who want to be involved and make sure the document is easy for those that didn't attend to understand.