Skip to main content

What is Micro Frontends Part -1






The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith.

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.



Monolithic Frontends


Organisation in Verticals


Top resources for you to learn more about Micro frontends:

Server-side rendering micro-frontends – the architecture. : This blog series explores how to implement micro-frontends using a server-side rendering (SSR) approach with AWS services.

The Strengths and Benefits of Micro Frontends : Micro-frontend architectures decompose a front-end app into individual, semi-independent “microapps” working loosely together

Micro Frontend Architecture and Best Practices : In the Modern Era, with new web apps, the front end is becoming bigger and bigger, and the back end is getting less important. Most of the code is its architecture. And the Monolith approach doesn't work for a larger web application. A monolithic approach to a large front-end application becomes unwieldy. There needs to be a tool for breaking it up into smaller modules that act independently. The solution to the problem is the Micro frontend.

Conclusion:

Micro frontends is evolving everyday and as you can find there are different approaches to attaining it. In the future articles in this series, let us find the different approaches and explore it further. Thank you for taking your time to read the article.



Labels:

Comments

Post a Comment

Popular posts from this blog

Things to consider when adopting Cloud Computing

    If you are someone who is new cloud computing and is deciding to adopt cloud computing, there are several factors you have to consider. Define the role of Cloud :  Are you looking to host your website or a mobile app or you just require storage space for your files.  Business flows and Priorities of the Solution :  At what point, does your cloud solution fit in. Do I already have a system which I need to upgrade. Find the priorities of the system of your business. Need for Integrations with Internal and External systems :  Based on your application needs, we need to figure out the Internal and External services that is essential part or something you cannot replace with your new cloud solution. Once we identify these sub systems and find a possible way to work with your Cloud Framework. Financials of running the solution:  Running a cloud deployment can be cost effective or a costly affair, based on how it is setup. Different services have differen...
Post a Comment
Read more

CORS - Cross-origin resource sharing

By Nicho Antony Today, there are many applications that depend on APIs to access different resources. Some of the popular APIs include weather, time, and fonts.  There are also servers that host these APIs and ensure that information is delivered to websites and other end points. Therefore, making cross-origin calls, is a popular use case for the modern web application.  Let’s say accessing images, videos, iframes, or scripts from another server. This means that the website is accessing resources from a different origin or domain. When building an application to serve up these resources with Express, a request to such external origins may fail. This is where CORS comes in to handle cross-origin requests.  What is CORS?   CORS stands for Cross-Origin Resource Sharing. It allows us to relax the security applied to an API. This is done by bypassing the Access-Control-Allow-Origin headers, which specify which origins can access the API.  In other words, CORS is a br...
Post a Comment
Read more