Sharing the same style/look/design/ux between React, React Native and Angular

user_2149093 0
Viewed 403

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
angular react-native reactjs user-interface
3 Answers

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.

user_59819260

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

user_111235130

In your case, you use multiple frontend frameworks to build products and to share the same style and user-experience between these 3 technologies you need to use Nx.

What is Nx

Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more and with Nx, you can:

  • Use modern tools like Cypress and Jest.
  • Build full-stack applications and share code between the backend and the frontend.
  • Use effective development practices pioneered at Google.

You can see all documentation here Nx and here how to Building Angular and React Applications Together With Nx and finally you can see in GitHub framework project Nx - GitHub

user_52534560
Related