frontend EE code structure

We currently do a range of things for EE JS code. I haven't yet seen/thought of an optimal solution, but imagine we'll need a few different approaches for different requirements and code. Main case I'd like suggestions for is when we have a base feature and then add tasty EE extras (e.g. Boards or Search Filters)

for classes/POJOs

I think we mostly extend classes or import the base and add stuff. Some issues I've had with this:

• CE changes can easily (and silently) break EE
• hard to follow code if tracing through inherited instance methods
• debugging overridden methods is very confusing (determining this)

for vue components

can probably handle most of this with slots. This avoids some things we can't do (like extend templates), but may need some trickery if the component in the slot wants access to props from the parent.

for vuex state/actions

we could add an ee property to top level state, then hide that from components via getters. Or extend CE store and add stuff we want

for haml templates (incl. JS Fixtures)

Currently we are feeding slightly different HTML fixtures to the JS tests in spec/. This usually means some extra DOM elements that don't do anything in CE specs, but can cause weird behaviour. e.g https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/6864#note_94635929