I need to embed some content in my frontend! How to choose?
Introduction
We may need to adopt an embedded content strategy based on our company’s desire to reuse content, maintain uniform styles, and meet business needs.
Embeddable content, such as web components, iframes, and micro frontends, has emerged as a powerful solution to enhance user experience and streamline development processes.
These technologies allow developers to encapsulate functionality and design, fostering reusability and consistency across applications. By leveraging embeddable content, organizations can create dynamic, interactive experiences that engage users while simplifying maintenance and updates. In this article, we will explore the various types of embeddable content, their benefits, and best use cases in modern web development.
This article goes through the different existing solutions explaining how and when they should be used, from a publisher point of view as well as a consumer point of view.
The solutions are sorted by the level of impact they have : number of changes in the codebase, increased maintenance, risk of migrations, knowledge to have…
Low-impact solutions
The solution below has a pretty low impact on your codebase, it does not need any structural changes.
iFrame
An iframe, short for « inline frame, » is an HTML element that allows you to embed another HTML document within the current document. This means you can display content from another source directly on your web page without having to leave your site. This embedded HTML document is fully isolated from the JS and the CSS side which can be useful if you don’t want this content to impact yours.
How to use as a publisher
Any published HTML document on a private or public network is usable as an iframe. If you plan to publish a document aimed to be used as an iframe, mind not to publish a whole website but only a small document, like a button. iframe can be used when you need to publish some content that does not need to interact with its parent.
How to use as a consumer
You might consume some content that you are not the owner of. So this has to be taken into account. You also expose your website to some security risks.
Example
Here is an example of how to use iframe to embed some content.
<iframe src= »https://platform.twitter.com/widgets/tweet_button.html »></iframe>
| PROS | CONS |
| easy to integrateno knowledge needed to publish/consume | difficult communication between the parent and the framed contentexposes to security risks (clickjacking)framed content is not indexed by Googlemay affect performance if multiple iframes are loaded |
To help with iframe cons, you can use Zoid. It is a JavaScript library designed for creating and managing iframes in a way that enhances the functionality and user experience of embedding external content.
One of Zoid’s key features is its ability to facilitate secure communication between the parent application and the iframe, even when they are on different domains. It also reduces the risk of vulnerabilities.
Medium impact level
This kind of solutions require some dedicated developments, especially as a publisher, and some CI/CD adaptations.
Web components
Web components are a set of standardized technologies that allow developers to create reusable custom elements for web applications. They enable the encapsulation of HTML, CSS, and JavaScript into a single unit, making it easier to manage and share code across projects.
Web components typically look like regular HTML elements but with custom names. For example, you might create a custom button element called <my-button>. This element can be used just like any other HTML element in your web pages and can even have its own styles by using shadow DOM. Shadow DOM enables the encapsulation of styles and markup so that it does not affect the rest of the page and vice versa.
Web components are hence a great solution for design system or enterprise plugins.
How to use as a publisher
To make your component usable as a web component, the easiest is to publish it as a package and preferably to provide the declaration script which will be needed by your consumers (when importing a web component, it has to be declared to the browser so that it can recognize the HTML tag and knows what to do with it).
Depending on the library you use, there are some existing plugins to help you build your application as a web component and to export it as a library. If you start from scratch, consider using StencilJS.
How to use as a consumer
After importing the library of the web component, you need to declare the web component to your browser otherwise it won’t know how to use your tag. The web component’s library usually provides this kind of script and you just need to run it in your application entry point.
| PROS | CONS |
| easily compatible with frameworkseasy communication | need to learn how web components work/learn stencil to be able to publishneed to know how web components work to be able to consume themcan affect performances if the component embeds too much scripts |
Framework components
Framework components can be considered as web components that are written with a framework and not with vanilla JS/HTML.
For example, it is easier to integrate a component that has been written with Angular into an Angular application than a vanilla web component.
How to use as a publisher
Depending on which framework your component is based on, there are some existing tools that can help you to build and publish it.
For example, Angular provides @angular/elements that provides you some helpers to build a given Angular component to a web component.
Be careful with your dependencies management, you could end to have duplicated dependencies of a framework. Mind to use peerDependencies in your package.json to avoid this issue.
How to use as a consumer
The same way as web components, you have to declare them to the browser. Once again, frameworks usually provides helpers to do so.
| PROS | CONS |
| fully compatible with the framework it has been written witheasy communicationeasier to develop/publish/consume components | need to provide multiple implementations if your consumers use different frameworks |
High impact level
This solution implies high organisational and technical changes.
Micro frontend
Micro frontend is an architectural approach that extends the concept of microservices to the frontend of web applications.
It breaks down a large web application into smaller, independent, and self-contained pieces (or « micro frontends ») that can be developed, deployed, and maintained separately.
To gather the different pieces of micro frontends, an app server entrypoint is usually used, but it depends on the technology. One thing that the teams should keep in mind is not duplicating the dependencies. If microfrontend A and microfrontend B use Angular, then the parent might import the dependency for them (using peerDependencies for example).
This approach fits big teams and complex applications. It can help breaking teams into several independent teams to answer some organisational issues.
| PROS | CONS |
| faster development as teams work in paralleleasier maintenance for each team due to smaller codebasesteam splitting | need to learn frameworks and how to use micro frontendexposure to performance issuesincreased maintenance and migrationsdoes not fit small teams |
How to choose?
What you should take in consideration is what you need, the size and the knowledge of your team, and whether you need to master the embedded content or not.
If you need to create a design system, better go with custom components.
If you need to create or use a login component/payment solution, zoid seems to be a good option.
If you need to split and to reuse some parts of your application and you have a big team, then micro frontend might be what you need.
If you only need to integrate static HTML documents, tags like iframe should do the job.
