[POC/Spike] - Vue Sidebar
This POC is related to the super sidebar epic and you can see the full design there.
Problem to solve
Given all the updates to the sidebar required for the navigation changes, we may be better served re-writing the sidebar in Vue from the start. However, there are a lot of unknowns so we should create a POC to see what we can build and how.
Proposal
Let's spend a week looking into a POC for a sidebar in Vue. The current project sidebar would be a good candidate as there's a lot going on with nesting, badges, permissions, etc. It doesn't need to be pretty, it doesn't need to do everything, it doesn't even need to work properly. But it does need to help us answer the following questions:
Questions to answer
-
Can we re-build the existing sidebar(s) in Vue? The current sidebar is haml/rails based and there's a lot of logic involved in rendering the right navigation elements, in the right place, at the right time. Ideally, we'd keep as much of that logic in the backend as possible, but would have all the rendering handled in vue.
-
What does that architecture look like? If we are keeping the logic in rails, but the rendering in vue how do we architect that?
-
What information do we need from the server, in what format? Is it a simple JSON structure? Is is nested, flat? What information does it need to contain? What information can we get and what do we need?
-
How do we get that information to the UI? Do we make an XHR request or get the data on initialization? How do we fetch and parse this data? When do we request it?
-
Is the perceived performance impacted? If we're loading the navigation elements via an XHR call, does this impact performance? How can we mitigate this?
-
Do we move the top-bar navigation into the sidebar on day 1? If we're re-writing the sidebar, does it make sense to include the current "top bar" navigation elements right from the start, or slowly iterate towards moving them over?
-
What edge-cases might we run into? We don't need to be exhaustive here, but any struggles we have in creating a POC will likely be ten-fold in the creation of the actual navigation. Let's make sure we call them out early so we can plan for them accordingly.
-
How much effort is required to build this properly? The POC should be built with a low-level of shame. If we threw it away and built it for real, how much of an effort would it be? How can we break that effort down?
What does success look like?
If we can answer most of the questions above and come out of this with a better idea of the effort required to migrate this new navigation, this POC will be a success. To be clear, success isn't a fully-working vue-based sidebar. The final result of this POC should be a hideous, buggy mess that guides us towards how to build it properly.