Questions tagged [micro-frontend]

In a micro-frontend architecture, the user interface is divided into multiple self-contained micro-applications, each responsible for a specific functionality or feature. These micro-applications can be developed using different technologies, frameworks, or programming languages, depending on the team's preferences and requirements.

One of the key benefits of micro-frontends is the ability to decouple frontend development, allowing teams to work autonomously and adopt different technologies as needed. This flexibility enables independent deployment and scalability of individual micro-applications, reducing the risk of regressions and minimizing the impact of changes.

Micro-frontends can communicate and collaborate with each other through well-defined APIs or by leveraging shared data stores or events. This allows seamless integration and coordination between different micro-applications, providing a unified and cohesive user experience.

Another advantage of micro-frontends is their potential for reusability. Teams can develop common UI components, styles, and utilities that can be shared across micro-applications, promoting consistency and reducing duplication of effort. This reusability also facilitates maintenance and updates, as changes made to shared components can be automatically propagated to all micro-applications using them.

However, implementing micro-frontends requires careful planning and consideration of various aspects such as communication protocols, data sharing mechanisms, routing, and coordination between micro-applications. It may also introduce additional complexity, as each micro-application needs to be independently developed, tested, and deployed.

Despite the challenges, micro-frontends provide an effective approach for large-scale frontend development, empowering teams to work efficiently, scale their applications, and deliver enhanced user experiences through modular, independent, and reusable components.

583 questions
3
votes
1 answer

Micro Front Ends - Approach

I have an old legacy app built in AngularJS (Angular 1), making framework changes or any other major changes is not feasible at this point. There is new app built using newer stack and its standalone app in itself. I need to render this new app in…
Don
  • 1,334
  • 1
  • 10
  • 18
3
votes
1 answer

Is there any way to show a loader till micro apps getting loaded in single spa project

I am using single spa for my current project and want to have a loader till my micro app gets loaded and there will be a switch between these micro apps , in that case also I want to show a loader. Is there any way to achieve the same?
3
votes
1 answer

How to approach microfrontends in ASP.NET?

I'm fairly new to microservices and web development, but built myself a small microservice architecture in ASP.NET where I have a few services with simple CRUD operations exposed by a REST api. Currently I can consume them in a single MVC client and…
3
votes
1 answer

How to implement micro frontend architecture in legacy application using Angular

Recently our team has decided to implement micro front end architecture in our legacy product. It has been developed using Asp.Net aspx pages along with javascript/jquery. Last year we started using angular in our application for some of the views.…
Amit
  • 1,460
  • 1
  • 14
  • 39
3
votes
2 answers

Angular Custom Elements & Angular 8 Material: MatDialog and MatMenu not working

I am using angular custom elements to build an application in which a MatDialog is part of the custom element. I have a MatMenu in the host application as well. Problem is, when I open the mat-dialog on page load and then open the mat-menu, the…
3
votes
1 answer

Using Webpack, how to dynamically load an external module built with another Webpack

Let's say I manage 2 JavaScript projects both built with Webpack: A Website called User-Website A JavaScript module called External-Module Note that I'm using 2 separate projets for the same reasons described by the Micro Front end architecture. I…
Yves M.
  • 29,855
  • 23
  • 108
  • 144
3
votes
0 answers

Build Vue microfrontend app (with routing and vuex store)

I need help with configuration of build/distribution of a microfrontend app that uses Vuex, Vue-Router and Vue i18n. TL;DR: I'm having issues building a microfrontend app that will be imported in already existing systems. Our team tried to build the…
3
votes
2 answers

Micro-frontends - How to dynamically load URLs with hashes In them

My company is working with a micro-frontend architecture for our application. It's a project I've been pioneering here and it has been quite successful so far. However, I'm hoping to get some advice on one of our outstanding challenges. When you…
craigmiller160
  • 5,751
  • 9
  • 41
  • 75
3
votes
2 answers

What is the are difference beetween micro-frontend and microservice

Micro-frontend is a microservice approach to frontend web development. Microservice is an architectural style that structures an application as a collection of small autonomous services, modeled around a business domain. But What are the main…
billyjov
  • 2,778
  • 19
  • 35
3
votes
1 answer

Angular6 micro front-ends routing

I have angular 6 micro front end application. It's having 4 different applications inside Main application. And how do i implement routing between those applications.And how do i implement routing in Main application (i have many child routes in…
3
votes
1 answer

Communication pattern for MicroFrontends to MicroService backend trough single channel/websocket

we are currently facing some tough architectural questions about integrating multiple Web Components with individual backend services in a composite web UI to one smooth web application. There are some constraints an (negotiable) design…
3
votes
0 answers

How to publish the working source code of a full angular application to npm?

Micro-frontend investigation. I created a sample angular application with the cli and instead of bootstrapping the application, I create an entry point like this: import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from…
Imre Nagy
  • 31
  • 1
  • 3
2
votes
0 answers

Angular App with Module Federation and SSR

We have an Anguar Application (v 15.2.9) that utilize Module federation (v 15.0.0) to acheive MFE architecture. Now we need to apply Server Side Rendering (SSR) (v 15.2.1) and we followed the steps that mentioned in Adding Angular Universal to an…
2
votes
1 answer

Shell tries to load remote module from wrong port ("cannot match any routes")

I have the following issue, briefly described in the below image: The shell appolication has 2 mfe's as follows (module-federation.config.js): const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); …
noamyg
  • 2,747
  • 1
  • 23
  • 44
2
votes
1 answer

How to Navigate from remote microfrontend app to host app's route

I'm trying to Implement Cam Jackson’s micro-frontend applications, so far I'm able to create 3 following react application: parent app child1 app child2 app blog reference The problem that I'm facing is with the routing. parent app routes: const…