What are micro frontends?
Micro frontends are new designs where the web application is fragmented into several applications and each function independently with a well-defined objective.
In micro frontends, the fragmented applications are built and managed by different teams using different technologies. An e-commerce web application is an example of a micro frontend. E-commerce includes the home page, cart page, checkout page, and payment page. Each page is managed by a separate team and written as a single application.
Enterprises may maintain a simplified development process even as their company expands by breaking apart monolithic structures into smaller frontend components that can then be brought back together onto a single page. Top web application development companies in Chennai design the micro frontends in their web application to reduce inter-team dependency.
Benefits of micro frontends
- Because micro frontends enable smaller teams to create and deliver specific functionality separate from the rest of the app, they’re a great way to empower your developers. This reduces inter-team dependency, as well as the organizational drag on any one team’s ability to innovate.
- Micro frontends are also beneficial to larger enterprises with various teams and sophisticated frontend requirements. Micro frontends allow enterprises to remove inefficiencies and democratise the UX development process by replacing monolithic frontends with micro frontends.
- Micro frontends are far more than a trendy term; they are a vital tool that allows huge enterprises to deliver consumer experiences that move their brands ahead. Micro frontends are being used by smart business leaders to keep their competitive advantage.
Companies using micro frontends
Micro frontends are used by great firms and here are 7 organizations that are successfully utilizing micro frontends.
- IKEA
- DAZN
- Upwork
- Spotify
- SoundCloud
- HelloFresh
- Zalando
1. IKEA
Micro frontends are used in the online store experience of this European furniture manufacturer. IKEA designs and sells ready to assemble furniture, kitchen appliances, and home accessories. It has been the world’s largest furniture retailer. They design modernist appliances and furniture with eco-friendly interior designs. The front-end is broken into smaller parts for the teams to function independently.
The system is broken vertically to create self-contained platforms with both backend and frontend produced by the same team. Keeping the team small is the major advantage of using micro frontend in IKEA. Another benefit is the transclusion mechanism which is including one electronic document into another document. The basic technology at IKEA for the micro frontends is Edge Side Includes. They have the concept of pages and fragments and a team is responsible for this set of pages and fragments.
2. DAZN
DAZN is an OTT subscription video streaming service with live and on-demand streaming of events. Small teams can work independently with micro frontends in DAZN. They help DAZN to move faster and avoid team frustration. When the user types dazn.com, the bootstrap is loaded. Bootstrap includes an HTML page that contains some logic for loading micro-frontends. Application startup is loaded which means the configuration is retrieved. Each micro frontend denotes a business domain.
DAZN has multiple teams and each team works on various areas like TV, web, mobile, and so on. Each team can work autonomously which means if they want to release discovery they don’t want to ask permission from anyone. Some parts are duplicated in DAZN like the header and footer. Coupling is not followed by DAZN and each team can take its own path. For creating successful micro-frontend architecture DAZN wants to build, compose, orchestrate and understand the communication between micro frontends.
3. Upwork
Upwork is an American freelancing platform that allows clients to interview, hire and work with freelancers. Once they choose the freelancer they sent a contract with set hours, pay rate, and a deadline for the work to be completed. In 2017, as part of an overall attempt to update its user experience, the freelancing network for independent business professionals to connect and interact switched to a micro frontend architecture.
“Migrating to a micro frontend design posed some hurdles,” explains Sep Nasiri, “but the benefits of updating Upwork’s frontend along the way made it worthwhile.” Modernization will help us future-proof our site and streamline certain services to give Upwork’s 17 million global registered users a better, more consistent user experience.”
4. Spotify
Spotify is a music streaming service provider and is listed on the New York Stock Exchange in the form of American depositary receipts. Users can browse music on the Spotify app under parameters like artist, album, genre, playlist, or record label. Spotify, an online streaming media service, uses micro frontends for its desktop programs and iframes to put everything together. An event bus decouples the different parts of the application to communicate without knowing who is going to listen for a message or event.
5. SoundCloud
Micro frontends have also benefited SoundCloud, a European online audio distribution platform and music sharing website. Soundcloud allows users to upload, promote, and share audio. “At SoundCloud, we have one team and one product manager responsible for each feature or collection of comparable features,” explains Bora Tunca, who works as a software developer there. We want this team to provide a consistent experience across all platforms.”
6. HelloFresh
HelloFresh is a German-based multinational meal-kit firm that is the top meal-kit provider in the United States. And by splitting apart the frontend monolith, their development teams have been able to overcome impediments to creativity. “Previously, we had this massive monolithic program that was unmaintainable and nigh-on unbootable in a local environment,” said Pepijn Senders, a HelloFresh engineer.
“Now each project gets its own server and its separate dev environment.” All external dependencies can be adjusted, allowing you to debug problems in the live, staging, or your own environment. “Micro frontends allow development teams to work with smaller codebases that are easier to maintain and understand. This prevents them from becoming slowed down by excessive complexity or from making mistakes as a result of trying to operate inside that complexity.
7. Zalando
Zalando is a German-based online company. They do, however, more than just sell items online. In addition to eCommerce, the company leads Project Mosaic, a set of services and modules that provide a micro frontend style architecture for huge websites, contributing significantly to this technique of frontend development. Entando allows you to create modern web apps with tiny frontends. Your company will be unable to create modern online experiences if release cycles take months instead of weeks.
Development constraints restrict your capacity to update your app, preventing iteration and innovation. And an outmoded or clumsy user experience prevents you from attracting and maintaining consumers. As a result, we established a platform to assist you in bringing your ideas to market more quickly. Entando is the most popular micro frontend platform for creating Kubernetes-based enterprise web apps. In order to innovate more quickly, we want to revolutionise the way businesses think about producing apps, websites, and portals.
You may use Entando to quickly construct micro frontends and assemble them into a single page using customizable blueprints. Then, using the Entando Component Repository, reuse UI/UX components across different projects, saving money and speeding up development. Entando’s unique Kubernetes operator automates the deployment of scalable, self-healing apps, allowing you to scale rapidly and effectively. Entando is a free open source project with enterprise support. Start working on the platform immediately, and request a quote to learn more about how our Havro team can help your company build better apps, sites, and portals faster.