Want to dive straight in the code? Here’s the Github repository.

This article is part of a series of articles. It combines these 3 articles:

In the Github repository, you’ll find the code that combines React, Svelte and Vue micro frontends on a single page. These web applications will be composed by Podium, a server-side composition framework for micro frontends.

If you have read the articles above, you will understand how to use Podium to mix different frontend frameworks. …


Want to jump straight into code?

Podium makes server-side composition of micro frontends easy. In a way, Podium and Svelte are a bit alike — Svelte is a compiler and generates pure HTML, CSS and JS (No virtual dom). Podium compiles/composes HTML, CSS & JS from different sources (Micro Frontends) into a single page.

This article is a part of a series of articles. Other articles are…
Podium: An intro in server-side composed Micro Frontends
React Micro Frontends with Podium
Micro Frontends with VueJS & Podium
Combine multiple frontend libraries with Podium

We’ll use Podium to compose 2 basic svelte…


Podium makes server-side composition of micro frontends easy. Vue call itself a progressive frontend framework. As all frontend frameworks, the result is a static website.

Don’t know Podium? Don’t worry, here’s a link to an introduction in Podium…

We’ll use Podium to compose 2 Vue apps on 1 page. Micro Frontends work independently, but in case the applications should need to share some data on runtime, we’ll use the Podium event bus to send data from one application to the other.

A moving picture of 2 Vue applications on one page, One app with an input signaling to the other.
A moving picture of 2 Vue applications on one page, One app with an input signaling to the other.
2 Vue applications on a single page…

Vue Micro Frontends (Podlets)

We’ll need 3 folders…

  • 1 for the base application

For demonstration purposes, I’ve…


The code for this article on Github…

A lot of Micro Frontend frameworks expect you to eject React or build the application in “their way”. Some frameworks change state management, others require a certain folder structure, … Podium does not expect you to change your app.

In this article, we’ll look at how to create 2 basic react application using the create-react-app command and combine them on a single page. As a bonus, I will use the Podium event bus to send messages from one Micro Frontend to the other.

To follow this article, some knowledge of React and Podium…


Want to jump straight to code?

Does this sound familiar?

Our large frontend application uses yesterday’s tech stack

The developers maintain the application and cannot create new features.

There is some quick and dirty code in there (due to delivery pressure).

The project is too big, and even the core team does not know where what is.

As a developer, it is very tempting to do an entire rewrite. However, a rewrite might introduce other issues such as a huge cost. A solution could be to decouple and rewrite the application piece by piece. …

Jozzeh

Front-end web developer & tech enthusiast at an IT consultancy firm based in Belgium. https://www.josdeberdt.be

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store