🔥 How to Share the Same Web Components between Angular and React? 🤔
Let’s find out if we can build sharable Web components compatible with any frameworks like Angular and React
Content
- Intro
- Why reusable UI components are important?
- What the heck is Web Components?
- Proof of Concept
- Prototyping the Angular, React apps, and UI library
- Integration of UI component with React and Angular
- GitHub link
- Conclusion
- You are amazing, thank you ❤️
- Learn More
Intro
There are plenty of UI libraries that provide you a pack of industry common components like buttons, dropdown, modal windows. One of the most popular examples can be material design or bootstrap. The problem with them is that they are not compatible with all the UI frameworks, so you need to integrate them in some way, or use a framework-specific version. Such a solution is not acceptable in most of the use cases, especially when the product is growing and consistency has higher priority than before. Let’s find out together, how to build the UI library, that can be reused in any UI framework?
Why reusable UI components are important?
Building unified, reusable UI components can be useful in many scenarios. With rapidly changing trends in the frontend world, like today React is more popular but tomorrow Angular, or a new framework released that is better than both of them in terms of performance and flexibility. Or a new major version of the framework is not compatible with the previous, and as a result, you can not reuse your old components, that is what happened with the transition from AngularJs to Angular 2+. All of these cases of technology changes affect the frontend quite frequently and create an issue of migrating UI components.
The other scenario is when you work on a large enterprise product that builds multiple projects. And these projects are reusing the same UI components. Moreover, the projects may use different UI frameworks. In this case, unified UI components will be very handy.
Also, another case happens when in some fast-growing projects, the team decides to open source some of the services or components. If you consider sharing with the world your UI library too, which may have a positive effect on your product and will pay you back with promoting your brand and attracting new customers, you need to think in direction of building a framework-agnostic Ui library.
And the last one, if you are a creator. And you may be the one who wants to work on the open-source project to create your own library. For any reason, like improve karma, create your portfolio for future employers or just enhance your frontend credibility.
What the heck is Web Components?
Well, after screening through the different use cases that may get benefits from unified UI components, the question still remains, how to implement it? If we want such a flexible solution, also supported by major browsers, we have to look at the direction of Web Components. It is not a new word in the frontend, web components have a long history and first time were introduced at Fronteers Conference 2011 by Alex Russel. Later on, big tech companies like Google managed to build an open-source library Polymer, that simplified building applications based on Web Components. And finally, browsers, such a Firefox started to support Web Components by default, and until now, Web Components are compatible with all major browsers.
In this article we are not going to dive deep into the Web Components, we only show the base implementation and have they can be reused across different frameworks.
Proof of concept
We are going to implement 2 simple apps, using React and Angular. The apps will consist of a button — “Increment” in Angular app and “Decrement” in React app, clicking on it will increment and decrement value accordingly. Both apps will share a ui-component called counter-value. What it does, is just simply retrieve the value from the parent and display it. The final result will look like this:
Prototyping the Angular, React apps, and UI library
Let’s jump straight to the implementation. In this example, we will use nrwl cli to quickly prototype monorepo with two apps and one shared library.
First, let’s create a workplace and enter the folder:
npx create-nx-workspace web-comp-app
cd web-comp-app/Next what we need, is to install all the dependencies:
npm install — save-dev @nrwl/angular
npm install — save-dev @nrwl/reactThen we need to generate a shared library and add our reusable ui-component to it.
nx g @nrwl/web:lib shared/ui-components
cd libs/shared/ui-components/src/lib
mkdir wc-counter-value
cd wc-counter-valueAnd create file wc-counter-value.element.ts
After element is ready, we need to export it from shared library:
web-comp-app/libs/shared/ui-components/src/index.tsIntegration of UI component with React and Angular
Last step is integration, it is the most interesting part. Let’s start with Angular, it has to increment the counter value.
We need to make sure the angular can accept non-angular elements, to do it, we need to inject CUSTOM_ELEMENTS_SCHEMA .
web-comp-app/apps/ng-app/src/app/app.module.tsThat is all we need to do with integration, we can use wc-counter-value.element.ts directly now. The last is to update the app.component.ts .
Perfect, time to integrate our shared component with React app now. Go to the:
web-comp-app/apps/react-app/src/app/app.tsxAnd just directly inject the wc-counter-value.element.ts
That pretty much it, to safe some time you can clone the repo to try it yourself, enjoy.
Conclusion
Even though, it is not too common to have multiple frameworks in one organization, this example demonstrated the flexibility of using web components. If you interested in the topic and this article collects 800 👏 claps, I will post about best practices of building web components. If you learned anything new, follow me on medium and twitter.
You are amazing, thank you ❤️
Admire you people. Your like 👍 and follow ❤️— transforms into positive energy that busts the motivation. Love and respect to all of you, you are amazing people 🙌
Priyanshu MultiQoS, kranthi, Maulik Rakholiya, M VJ, Daniel Minguella Blasco, Yong Hong Tan, Calal, vmsi krsna, Wangyg Personal, BabyManisha. Sunkara, lexeek, Simon, Trance Cyberian, Timmy Lin, Nam Ng, Raj kiran, Kannan Balasubramanian, Vijay Thirugnanam, Sheena Irwin, Mahesh Guntumadugu, Ashok Vardhan, Sameer Ayyagari, Muhammad Wasi, Darsbir Itten, Tigran Apresyan, akbar wibawa, Sardonyx, Ben Ji, Avan Thakkar, Luke, Quoc Huynh, mallikharjuna, Nguyễn Thanh Bảo, Shane Healy, Deepanshu Tiwari, Mehdi Davarzani, Carlos Inguanzo, Hu wh, bhaskar, Bibhorsingh, UmerFarooq, Deniz Yoldaş Aksu, Mahendra Bishnoi, Carolina Ramirez, Shobika Saravanan, Thiyagarajan Muthusamy, Shubham Singh, Naveen Kanth, Siarhei Astapovich, Omar Belkhodja, Yaroslav, Zack Ch, Mutita Donsomsakunkij, Gokul Krishna, Sett Ran, Artur conrado, Kevin Prakasa, Manish Kumar, Vaibhav Lokhande, Danilo Martins, ANJALI CHAUHAN, Mohammadreza Qadamgahi, Ismael Tech (ismaeldevmw), Rafael Birkmann, Khaled Nehad, Santosh Vijapure, Rajat, Shoaib Khan, Dennis Hulsmans, Satish Pednekar, Amir Khan and Nenad Brcic.
