A micro frontend is an

architectural pattern Software architecture pattern is a reusable, proven solution to a specific, recurring problem focused on architectural design challenges, which can be applied within various architectural styles. Examples Some examples of architectural patte ...

for web development, where independently developed frontends are composed into a greater whole. It is analogous to a

microservices In software engineering, a microservice architecture is an architectural pattern that organizes an application into a collection of loosely coupled, fine-grained services that communicate through lightweight protocols. This pattern is characterize ...

approach but for client-side

single-page application A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is fas ...

s written in

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

. It is a solution to de-

composition Composition or Compositions may refer to: Arts and literature *Composition (dance), practice and teaching of choreography * Composition (language), in literature and rhetoric, producing a work in spoken tradition and written discourse, to include ...

and

routing Routing is the process of selecting a path for traffic in a Network theory, network or between or across multiple networks. Broadly, routing is performed in many types of networks, including circuit-switched networks, such as the public switched ...

for multiple front-end applications. Micro frontends (MFE) can be built using the following approaches: * With tooling such as module federation or native federation * With libraries such a
Single-SPA
or frameworks such a
Piral
* With

Web Components Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends. Primary t ...

* With iframes Companies that use micro frontends are Canonical,

IKEA IKEA ( , ) is a Multinational corporation, multinational conglomerate (company), conglomerate founded in Sweden that designs and sells , household goods, and various related services. IKEA is owned and operated by a series of not-for-profit an ...

Scania AB Scania AB ( , ), stylised SCANIA in its products, is a major Sweden, Swedish manufacturer headquartered in Södertälje, focusing on commercial vehicles—specifically heavy lorries, trucks and buses. It also manufactures diesel engines for hea ...

Spotify Spotify (; ) is a List of companies of Sweden, Swedish Music streaming service, audio streaming and media service provider founded on 23 April 2006 by Daniel Ek and Martin Lorentzon. , it is one of the largest providers of music streaming services ...

, etc. For

Webpack Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with depend ...

this concept is referred to as module federation.

References

Software design patterns Architectural pattern (computer science) Web services {{Software-type-stub

See also

References