Explaining micro frontends as simply as possible
Tags: microfrontends, javascript, webdev, codenewbie
Published: 2022-03-14 16:43:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mbqbcimmag4265z66av.png)
The world of tech is all about advancing, improving, and evolving. Sometimes quickly, and sometimes it takes a while for changes to catch on.  

When it comes to micro frontends, it’s been a longer process to acceptance, but we’ve fully embraced all the positive possibilities they bring.  

Micro frontends as a concept started showing up on the radar of developers and others in the space back in 2016. And then it gained even more prominence with [Martin Fowler’s piece](https://martinfowler.com/articles/micro-frontends.html) on the frontend architecture in 2019.  

“In this article we'll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code.” 

At its core, micro frontends simply means taking that monolith on the front end – the rigid, immovable, indivisible – and breaking it down into smaller pieces.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0rj1dzifmwkn9ip3ysy.png)

Imagine working on this ancient monolith. It must have taken many artists, working together simultaneously, to get it all complete and cohesive. Now, imagine that complex, beautiful work of art is a web page, and the multiple artists are multiple engineers and developers. Or, they could be marketers, content creators etc. taking on smaller tasks. We’re continuously aiming to lower the bar in terms of what is needed to build a site on Fathym.  

Micro frontends are what the name suggests. They’re multiple, miniature pieces of a website’s front end that come together to give all the functionality, customization and power needed.  

Micro frontends are:  

- Individual, independent, smaller frontends.  

- Multiple teams work on their own projects concurrently. 

- That means smaller, incremental deployments. One team isn’t waiting on another to push their deploy. 

- Smaller, more cohesive codebases. That makes them easier to maintain and change, too. 

- Allow for scaling teams as needed.  

- Give the ability to rewrite, change or update parts of frontend incrementally. That means fixing bugs or changing features of a site doesn’t force the site to be down for maintenance. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r74cvzam6y3cyetokujw.PNG)

## Benefits for teams 

Large organizations with complicated, detailed and beautiful websites can [utilize micro frontends](https://www.fathym.com/blog/articles/2022/january/2022-01-20-how-our-microfontends-help-businesses-big-and-small) for many reasons. 

Being able to break tasks down into bite-sized chunks keeps developers from being overwhelmed and helps them be efficient. On top of that, those multiple, smaller teams can work at their own pace, autonomously. The blog team won’t be delayed by, say, the e-commerce team and so on. Projects can be completed at their own pace as teams work concurrently toward the larger goal.  

## Benefits for fixes/bugs  

Of course, the more features and the more complicated a website is, the more intricate and involved the code on the back end. However, when each feature is made of smaller amounts of code, they’re easier to update. And when the code breaks for some reason, those errors are easier to find. On top of that, because the code is decoupled, the entire website doesn’t have to go down to fix one feature’s bug.  

## Benefits of flexibility (With JavaScript frameworks) 

One more massive advantage of micro frontends is each one of those smaller pieces can be created with different tools.  

That means you can [flashup a website](https://www.fathym.com/blog/articles/2022/february/2022-02-18-flashup-buzz-word-or-brilliant-idea) in mere minutes with plug-and-play open-source apps. Or, you can go low-code/your code. We invite developers to get as complicated as they like while making something inspired, and at the same time, developers can use whichever JavaScript framework they’d like.  

Fathym’s micro frontends platform allows the use of popular frameworks like [Angular, React, Vue, Svelte and more](https://www.fathym.com/blog/articles/2022/february/2022-02-28-angular-vs-react-vs-vue-you-choose). Plus, each bit of the website (blog, gallery, e-commerce etc.) can be built with a different framework, if that team so desires.  

That’s an amazing amount of flexibility considering those frameworks are valued for different abilities.  

## Conclusion 

Micro frontends aren’t a new concept, but they are the wave of the future. [Many larger companies already use the architecture](https://www.entando.com/page/en/7_successful_companies_using_micro_frontends_en_1?contentId=BLG2303&modelId=25) – IKEA, Spotify, Upwork, and SoundCloud among others – and we believe that adoption will only continue to grow over time.  

## Join Fathym 

[We invite you to sign up](https://auth.fathym.com/fathymcloudprd.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_sign_up_sign_in&client_id=98f014f1-2547-4bcc-a583-3edc8f1190f2&redirect_uri=https%3A%2F%2Fwww.lowcodeunit.com%2F.oauth%2FB2C_1_SIGN_UP_SIGN_IN&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=637789907534834707.OWNhMWZkZGMtODQ2NC00YTg0LWFjZWQtYjlkNzg0YTIzMDhkYTcxMzVkZmYtN2E2Mi00ZDRlLWIxODQtZjMxMjBkNWI2OTEx&state=CfDJ8C5COa2dn0dMrEVjdLxcXm-FCakeBxrXIOHa_lF_u0ckh9rvLFuKJ30MWBprExUQA_N5HmWWWPdxqWlni-KFqpg_jVjPahrQdGw79U0sMBN8dTvgrlAMeT9--L-7VgMBsZfFPAho9dcKUN1jO6lAaxL13PM1_vGer-vJc6tcpigRpNr5jcHtitGIKjexLmQqkIslp3MFKCKAi-5IiVd3JbpibPm4gbmDQpYtgstmG9SSlpjvEqJk_2AIqtMHkiojK3kE4WSc5mcYS3FQ3hiRqVQRPlL3jI7U3bUsqGYtLuoJr_St6mGBbHvGmB6M0MCeFn_G5LDsRzyHZhBWf9a1qo6dktz_kEcsAahYPLWjAI_2&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=6.11.1.0) for our freemium platform now, not only to achieve your goals, but to have a little fun while you’re at it, too.