Supporting JS frameworks

[khawkins98]

We still have yet to come up with our approach to supporting React, Angular, [insert framework here].

There's probably some inspiration to be had from IBM's Carbon: https://next.carbondesignsystem.com/getting-started/developers/other-frameworks

Will the Carbon Design System support other frameworks in future?

We are open to the idea of providing core support for additional frameworks in future. We added Angular support in the summer of 2018.

For the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a Carbon version of Vue.js, for example, but had no plan to support that solution outside of their product, that couldn’t become a core part of the Carbon Design System.

After some initial research, thinking, and reflecting on what services are asking of us. Maybe the best approach will be to:

1. Support Vanilla JS very well
2. Offer guidance and demos on integrating VF patterns with Framework X
3. As we get support+time commitments nominate maintainers for, say, the "VF 2.0 Angular edition"
4. Perhaps some specific Angular or React support for critical EMBL JS-powered patterns (Data Protection banner, announcements, etc.)

☝️ That thinking loops me back into focusing on two big priorities:

1. Make a VF 2.0 that doesn't break other code (we're doing this well so far)
2. Offer strong guidance on how things should look/behave/feel

What's next?

1. Explore the above ideas
2. Get feedback from the to-be-created VF Working Group (a separate thing from any EMBL brand group) See: DOCUMENTATION - VF Governance #114

[khawkins98]

I think we've settled this in other conversations, to summarise:

• The Visual Framework is primarily a CSS framework
• There is some JavaScript support for core things (tabs, cookie notification banners, etc.)
• That JS is fully opt-in by using JS data selector data-vf-js-tabs
• If a data selector is not present, the JS won't run on that element and users can bring their own JS

I'll link to this comment from the readme and we can document/explain more if/when needed.