In this article, we will read about how to make a pineapple curry… ahh…sounds different, you are here for micro-frontend but reading about pineapple curry, what the hell is this? Don’t worry, this is just a mind trick to make your brain more active before reading about micro-frontends :) Ok let’s jump into our main topic, micro-frontends.
“In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployedindependentlyfromotherfeatures” — ThoughtWorks Technology Radar
micro-frontends team view
Why we are calling it a ‘curry’?
“Curry” is a variety of dishes that use a combination of spices or herbs to make a dish yummy, similarly. Our micro-frontend curry is an approach that uses a combination of frameworks or libraries to make frontend applications yummy, i.e more scalable, testable and manageable.
Why we need Micro-frontend?
A micro-frontend is independent of any framework. This means we can use it with any of the popular frontend libraries, such as Angular, React, or Vue. We can classify it as a solution to solve some of the frontend design problems using available UI frameworks. So let’s understand what these design problems are:
Frontend up-gradation/change is expensive. We are living in the “new” era wherein after every six months we are getting some new technology/framework as a solution to a big industry problem. But upgrading the application technology stack is not as simple and also not as cost-effective as it looks. Using the micro-frontend approach, we can breakdown the application into features and then develop and deploy these features independently. Now in the future, if required, we can change/upgrade a small independent deployable feature rather than concentrating on whole application up-gradation. Also, it's “Easy to get approval from business stakeholders” :)
Monolith on top of microservices: We have seen the advantages of microservice design in backend systems. It brings flexibility in choosing different technology stack, more focused around the business requirement, and also easy to develop and maintain. Bringing all these benefits to the frontend requires a similar design approach which can break down the big monolith frontend hence we termed “Microservices for frontend” as “Micro-frontend”.
Cross-functional over cross-technology team: Most of us are working in an agile managed project delivery process that advocates cross-functional over a cross-technical team (Angular/React team, Java team, DB team, etc.). Benefits are big in terms of client expectation matching and end-product delivery if we align to be cross-functional. Micro-frontend provides the flexibility to have a cross-functional team that focuses on end-to-end delivery.
How we can implement Micro-frontend?
As we know, to make “Pineapple curry”, there are different recipes available. Similarly, to implement Micro-frontend there are different recipesavailable. Some recipes are very easy to execute, and some require heavy lifting. One can choose a recipe/solution based on business requirements. Let me list down some of the solutions here:
Using an iframe: one of the solutions to implementing micro-frontend is using the iframe approach. It’s somehow best suited, but not limited in those scenarios where the business is least bothered about technology up-gradation to implement a feature like single-sign-on. Using iframes, we can host multiple applications under a single parent window. Inter-app communication can be solved using HTML5 custom events. For app bundling and deployment, one could write a custom NPM script.
Using Web Components: There are many ways we can use web components to build micro-frontends. In Angular, we can create sub-applications to develop different apps under a single shell application. In this approach, there are two important items. First, you need a stitching shell to combine all sub-applications and second, a messaging channel that helps with inter-app communication. I would be soon writing a detailed blog on the Angular approach of building micro-frontends
Logical view
The same approach can be used with React as well. Here also we need a stitching shell which aggregates all sub-application at run-time.
microrfrontend using react
3. Readymade framework: There are a few frameworks available in the market which take care of the stitching and inter-app communication task and help you focus more on business feature implementation. Single SPA is one the popular framework which integrates sub-apps on the client-side and provides out-of-box communication layer for sub-app communication. ARA frameworkis a new addition to this list, it internally uses Airbnb’s Hypernova to make micro-frontends run. Tailor.js also helps engineers building micro-frontend easily. It’s a layout service that uses streams to compose a web page from fragment services. It’s partially inspired by Facebook’s BigPipe, but developed in an e-commerce context.
There are many other options available in the market which help you make build micro-frontends using a different recipe. If you want to look at the extended list, I would recommend you to visit awesome-microfrontends. There is also one book published on the same topic, you can find it here.
In the next post, I will deep-dive one of the approaches to understand how we can actually build it. Until then, enjoy your Pineapple CURRY :)
What is State and Why we need it? Photo by Daniel Leone on Unsplash This is a two-part series, In the first part, I am going to write about why we are speaking a lot about State and why we need it in our application. In the second part, I would write a sample to-do application using React and apply different state containers to evaluate against different architectural concerns like Scalability , Manageability , Performance, and Productivity . Let's start swiftly….. Photo by Austin Distel on Unsplash I am sitting in my office after finishing one of the major application, my state of mind is relaxed and COOL . Well, am I supposed to write about my state of mind, which is in a COOL state or do I need to focus on Application State in the web ecosystem? Well, if you take a birds-eye view, both Mental state and Application state looks to be representing some or other form of information. My mind state is relaxed, cool and happy , where is an
There is a good requirements in industry where you need to update data over web in real time. But because of HTTP limitations you can't directly push data from server to client. so lets understand what all options do we have to simulate the PUSH environment . If you have worked in any real time web application where data needs to be updated on UI in real time like Share trading platforms, reservation systems, ticketing systems, etc. you would have been easily understand the requirement and power of PUSH. for others lets understand why PUSH is important in many mission critical applications. for ex. a user using a share trading application where with some delay he get the updates of different scripts which he is looking to buy/sell. Now consider a scenario where user made a request to buy particular script at a given price he seen 5 sec's below. But because somebody else is also trading in the same script so the price will get impacted accordingly. Now because you ha
Comments
Post a Comment