I was in a discussion with @wgardiner, @sudokita and others in Denver about the idea of having building a design system for Open Team. One idea we threw out was the idea of sharing some sort of component library, perhaps build with web components, although I don’t think any of us really had much experience with them. The hope, however, was that they could be shared regardless of whether teams were using different frontend frameworks like React or Vue.
So I just saw this talk mention the possibility of compiling Angular and Vue components down to web components, and it seems like it could be relevant to this idea:
Unfortunately, according the presenter, “When it comes to React I don’t have such a nice message for you.” 
Anywho, not sure if this is still an idea we want to pursue, but I think the general idea of crafting some sort of shared design system could be really valuable, so I thought this could serve as a prompt to keep that discussion going.
1 Like
Hey @jgaehring sorry for the slow response. My work partner has been working on a web component library recently for another project and we’re going to work on packaging it up so I should have a little more perspective soon. I’ve played with them a bit since then and my partner’s experience has been encouraging.
When we talked in Denver I envisioned our shared web component library as being written in vanilla js (possibly with some minimal wrapper, like LitElement) and consumed by whatever frontend framework people choose for individual projects. Afaik none of the major frameworks have issues consuming web components, so this approach should be fine.
In the video I think he’s describing writing a component in Vue, Angular, or React, and exporting/translating it as a web component, which is different from what I’d imagined. Anyways maintaining a shared library that’s written in patchwork of Vue, Angular, React, and vanilla web components would be a pain.
1 Like
Oh that’s great to hear you’re getting some experience and perspective on web components! I haven’t really had a chance to play around with them myself, but component libraries have been more on my mind lately as I’m starting to build out a dedicated library of components that can be used by consumers of Field Kit’s module system.
Also did I hear you guys were starting to use Vuetify?
I’d love to touch base some time if you had a little spare time. Perhaps we could wrangle some other OpenTEAM frontend folks into a group call even.
In any event, good to hear from you, and happy 2020!
2 Likes
Cool yeah let’s talk frontend some time!
Yeah we’re using vuetify right now for our rebuild of the OurSci app. I was annoyed to find that it overrides base styles, because I don’t expect we’ll use if for all our elements.
1 Like
Yes to all of these things. I really want to think through this together, especially as we’re now at the point where we have code to component-ify. At this point, our cover crop tool is in React but I know that one of our related groups is using Vue and d3 that I’d love to figure out as part of a larger shared component library.
2 Likes
