Using Web Components in different Cross UI frontend frameworks
- Using Web Components in different Cross UI frontend frameworks
- Using React Web Componnets within React
- Using React components in a ember app
The application consists of 2 different frontends
- react-web-components - React Web Components
- frontend-ember - Basic Frontend Ember.js App uses web components of React
In the above code, react-web-components has a web component called FancyButton which is written in React.js. We will be bundling the component and will import and use it in different frameworks like Ember.
This shows by using a common libary components across teams in a company or community, multiple UI appications can use components developed in different programming languages and frameworks..
“Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder.” Martin Fowler
At the beginning of a project you always pick a framework and you build your entire project around it.
- What if you want to migrate your app to a latest tech?
- What if you want to use a latest tech component in your traditiona app?
- What if you want to integrate any apps together for a shared responsibility?
The core concept of a Web Component is similar to that of components in frameworks such as React, Angular or Vue. It is a reusable UI building block that encapsulates all the HTML, CSS and any JavaScript-based logic required to render it.
The big difference is that instead of relying on a specific JavaScript framework it leverages technologies natively provided by the browser so that your Web Components are framework agnostic.
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
- webcomponents.org
- Everything You Need to Know About Web Components
- Why I’m Betting on Web Components (and You Should Think About Using Them Too)
- Web Components can be used with any JavaScript library or framework that works with HTML.
- Functionality encapsulated away from the rest of your code.
- Web Components allows you to adopt to the ever evolving JavaScript frameworks landscape.
- Reusability: Once created, web components can be imported, used and reused in applications
- Declaration: You can more easily declare components on your page with your own custom tags.
- Scoping: Shadow DOM ensures DOM and CSS scoping so that styles don’t leak out and component DOM is local. Avoids any collisions between outside JavaScript or CSS.
- Brand consistency: Having your front-end application code split up into component libraries or even design systems can ensure brand consistency through the company. It also provides an additional benefit of the ability to be used by all teams, regardless of tech stack
- Cost-efficiency: Developers will have the ability to focus solely on making native reusable components, similar to LEGOs, and use these blocks in other applications across teams, which in the end saves money
- Faster deployments: Having ready-made code blocks, developers will be able to build and deploy applications more quickly. This leads to less time devoted to developing new features
- Quality improvement: As a by-product of reusing and reviewing the same code multiple times, the overall quality will improve in the course of time.
Many libraries already exist that make it easier to build native web components
- Polymer provides a set of features for creating custom elements.
- Slim.js provides data-binding and extended capabilities for components, using es6 native class inheritance.
- Stencil generates standards-compliant web components.
- Hybrids is a UI library for creating Web Components.
use this to bundle specific web component and import that bundled file in other frameworks.
npm i parcel
parcel build path/component.js
- Web Components
- webcomponents.org
- Everything You Need to Know About Web Components
- Why I’m Betting on Web Components (and You Should Think About Using Them Too)
- The Story of Web Components - Youtube
- Introduction to Web Components
- Web Components Basics and Performance Benefits
- Shadow DOM
