Playing with Micro Front-ends

Micro Frontends

“Luck is a Dividend of Sweat. the More You Sweat, the Luckier You Get.” Ray Kroc.

My recent article mostly talks about Philosophy, but I’m a hardcore ‘Master of Software Engineer’ and a ‘Curious Kid’. Let’s dive into Micro Front ends

The term micro frontends are revolving around the developer world, I love to contribute from my Expertise.

Micro Frontends

I have loaded React, Angular and VueJs frameworks in a single shot

“Po, do you know my secret ingredient noodle soup that everyone loves? Do you know what makes it so good? Nothing! There is no secret ingredient! It’s just chicken noodle soup!”

Webpack does the works, check out my folder structure and Integration

src/angular — angular framework

src/king, src/kong — react framework

src/vue — vuejs framework

src/server — express server

src/dist- web pack bundles

Webpack Config

How short and crispy. We have created a bundle for all frontends frameworks in a Single Shot 😍 😍 😍 😍 😍

“Simplicity is the ultimate sophistication.” — Leonardo da Vinci

Let's go deeper,

1. Communicate between Frameworks
2. Dynamic Rendering of Frameworks

1. Communicate between Frameworks

Communicate between Frameworks

Custom Event, no magic, for API doc visit - https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

2. Dynamic Rendering of Frameworks

I’m just fetching the angular bundle from the server, no magic. How cute is that script, allow us to render the frameworks dynamically

Contributors welcome

Github: https://github.com/prabaprakash/Micro-Frontends