We have 3 sets of products that area each built on a different technology: React, React Native and Angular.
- The group built on React is using a shared component library with documentation written in Storybook.
- The group built on React native doesn't share any code
- The group built on Angular shares a custom, manually written design guide, where code is copy-pasted to each individual product.
Because of this separation, multiple products end up looking and feeling different.
We would like to move to a shared look, which makes it clear that these products belong together.
However, we do not want to rewrite these products entirely, but would much rather rework the style for each of them.
The question: What strategies/approaches exist to share the same style and user-experience between these 3 technologies?
What we're worried about:
- Differences creeping in over-time
- Excessive manual testing
- Excessive repeated development for each of the different technologies
- To clarify: We don't mind maintaining 3 component libraries (because we probably don't have another choice), but we don't want to fix style bugs multiple times.
- Slow/difficult process when introducing changes
Research:
- Shared global CSS: React-Native only seems to support CSS-in-JS
- Web components could probably be used in all 3 technologies via a wrapper, but I'm (maybe incorrectly?) worried about ease-of-development, support, ...
- Whenever an article talks about this topic, they're actually comparing the differences between the 3 technologies, rather than suggesting a way to bridge the differences
CodePudding user response：
There's nothing inherently wrong with what you're suggesting, slicing the reuse at different levels brings different benefits and challenges. web-components is about as high level as you can go between React and Angular, if you want something lower that's cross platform, I suggest you look at design tokens, implemented using something like https://amzn.github.io/style-dictionary/
You can take this as far as you want - we use this to deliver common theme spacing, sizing, colours across Swift, Kotlin, React Native, Svelte and React, but you can go further and define more, just check out their examples. It offers a good way to have a JSON representation of a styled system with a native wrapper on top that consumes this.
CodePudding user response：
You can checkout https://nx.dev. it's a powerful build tool that allows you to share components between angular and react project. explanation and example here: https://nx.dev/p/a/examples/react-and-angular
And as you mentioned you can use the created web-components in your react-native app and focus on managing them using services like bit.dev