Microfrontends in Action — How NOT to Fail When Introducing Them

Microfrontends in Action — How NOT to Fail When Introducing Them

Micro-frontends in action — How not to failed when introducing them. Micro-frontends can be a fantastic tool, but they are not a silver bullet. The consequence of reduced discoverability was that we failed. We would have been better off starting with a monolith. Your application know that it needs to change, refresh or trigger an action.

Yes, we did it —  we had chosen the red pill and there was no way back. We were full of doubts and fears that, despite making a lot of research before inviting Single SPA to our project, at some point we would hit the wall. I mean a serious blocker that could cause all of our work to be thrown into the trash. Let’s see how we tried to mitigate the risk of failing and finally achieved success!

Big thanks to 

Mariusz Dobek

for contributing to this article as a coauthor!Choosing microfrontends framework

To be honest we didn’t invest to much time in researching available microfrontend frameworks. We just benefited from the research made by our colleague ( see here) [thanks 

Łukasz Kyć

!]. After a bit of investigation and hacking around our project, it turned out that Single SPAlooked promising. Of course, not all the aspects of our application were covered during that spike. We were aware that at some point something would blow up in our faces. To minimize the risk we created a list of requirements hoping we haven’t missed anything crucial. Let’s go through it.Navigation

As mentioned in the previous post, our starting point was an AngularJS app. We decided to have exactly one more app written in another framework working next to it. However, to achieve transparency to the user, we had to manage navigation without the page reloading.

Authentication

Turned out that we didn’t need to worry because we had an authorization token stored in the local storage of a browser so we could easily access it by both microfrontends. We just had to rewrite the mechanism for reading, restoring, and sending the token in the new microfrontend app. Easy!

Sharing assets and libraries

Sharing resources between two microfrontend apps was one of the biggest challenges. We decided to share some typical assets like images, fonts, and CSS files with global styles and themes.

The main problem was not sharing but rather restricting the scope of resources. Unfortunately, our AngularJS app used an outdated tool — grunt, with the assumption of using just one frontend framework. The consequences were that every dependency used by AngularJS was registered in the global scope. Therefore, every dependency could potentially leak into the other, theoretically independent, microfrontend application.

Finally, we came to the conclusion that the cost of redefining AngularJS app build process to enclose its dependencies, e.g. using some modern build tool like webpack, is too big. To live with it and still keep our app stable we decided to have the same versions of shared libraries. There are a few consequences of that, but the most crucial one is that versions of libraries are now restricted to ones working with both microfrontends.

angularjs micro-frontends front-end-development

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Top 10 Front End Development Companies In 2021

Looking for a trustworthy front end development company? Read this blog to know the Top 10 Front End Development Companies in 2021.

Front End Development Best Practices To Follow

![This is image title](https://solwincdn-79e1.kxcdn.com/wp-content/uploads/2021/06/Front-End-Development-Best-Practices.png "This is image title") As someone from a non-tech background, you might not understand the complexities of front-end...

Hire Front-end Developer | Dedicated Front-end Programmers In India

Hire Front-end web developers and programmers in India from ValueCoders for your custom offshore Front-end application development projects. Hire Front-end developer from ValueCoders and get interactive Front-end web designs. 16+ years exp. , 100% money back guarantee, 450+ Staff . Contact Us Today!

Top 15 Front-end Development Tools To Use In 2021

Web technologies are moving so fast that it is becoming a tough job for businesses as well as developers to keep up the pace. New tools pop up every year letting the old ones become obsolete (Remember Eclipse?). Front-end development is a major part of the web and front-end technologies have grown multifold in the past years. Businesses are focusing more

Hire Front-end Developer | Dedicated Front-end Programmers In India

Hire Front-end web developers and programmers in India from ValueCoders for your custom offshore Front-end application development projects. Hire a Front-end developer from ValueCoders and get interactive Front-end web designs. 16+ years exp. , 100% money-back guarantee, 450+ Staff. Contact Us Today!