Microfrontend

Last updated

Micro frontends (singular: micro frontend [1] ) is a front-end web development pattern in which a single application may be built from disparate builds. [1] It is analogous to a microservices approach but for client-side single-page applications written in JavaScript. [2] It is a solution to de-composition and routing for multiple front-end applications. [3]

Micro frontends (MFE) can be built using the following approaches:

Companies that use micro frontends are Canonical, IKEA, Scania AB, Spotify, etc. [4]

For Webpack this concept is referred to as module federation. [5]

See also

Related Research Articles

<span class="mw-page-title-main">Drupal</span> Web content management system

Drupal is a free and open-source web content management system (CMS) written in PHP and distributed under the GNU General Public License. Drupal provides an open-source back-end framework for at least 14% of the top 10,000 websites worldwide and 1.2% of the top 10 million websites—ranging from personal blogs to corporate, political, and government sites. Drupal can also be used for knowledge management and for business collaboration.

<span class="mw-page-title-main">D (programming language)</span> Multi-paradigm system programming language

D, also known as dlang, is a multi-paradigm system programming language created by Walter Bright at Digital Mars and released in 2001. Andrei Alexandrescu joined the design and development effort in 2007. Though it originated as a re-engineering of C++, D is now a very different language drawing inspiration from other high-level programming languages, notably Java, Python, Ruby, C#, and Eiffel.

In software engineering, the terms frontend and backend refer to the separation of concerns between the presentation layer (frontend), and the data access layer (backend) of a piece of software, or the physical infrastructure or hardware. In the client–server model, the client is usually considered the frontend and the server is usually considered the backend, even when some presentation work is actually done on the server itself.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

<span class="mw-page-title-main">PyQt</span> Python GUI library

PyQt is a Python binding of the cross-platform GUI toolkit Qt, implemented as a Python plug-in. PyQt is free software developed by the British firm Riverbank Computing. It is available under similar terms to Qt versions older than 4.5; this means a variety of licenses including GNU General Public License (GPL) and commercial license, but not the GNU Lesser General Public License (LGPL). PyQt supports Microsoft Windows as well as various kinds of UNIX, including Linux and MacOS.

<span class="mw-page-title-main">Monolithic application</span> Software design pattern

In software engineering, a monolithic application is a single unified software application which is self-contained and independent from other applications, but typically lacks flexibility. There are advantages and disadvantages of building applications in a monolithic style of software architecture, depending on requirements. Monolith applications are relatively simple and have a low cost but their shortcomings are lack of elasticity, fault tolerance and scalability. Alternative styles to monolithic applications include multitier architectures, distributed computing and microservices.

Nginx is a web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. The software was created by Russian developer Igor Sysoev and publicly released in 2004. Nginx is free and open-source software, released under the terms of the 2-clause BSD license. A large fraction of web servers use Nginx, often as a load balancer.

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

<span class="mw-page-title-main">API</span> Software interface between computer programs

An application programming interface (API) is a way for two or more computer programs or components to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how to build or use such a connection or interface is called an API specification. A computer system that meets this standard is said to implement or expose an API. The term API may refer either to the specification or to the implementation. Whereas a system's user interface dictates how its end-users interact with the system in question, its API dictates how to write code that takes advantage of that system's capabilities.

ownCloud Free software for cloud computing

ownCloud is a free and open-source software project for content collaboration and sharing and syncing of files in distributed and federated enterprise scenarios. It allows companies and remote end-users to organize their documents on servers, computers, and mobile devices and work with them collaboratively while keeping a centrally organized and synchronized state.

Backbone.js is a JavaScript rich-client web app framework based on the model–view–controller design paradigm, intended to connect to an API over a RESTful JSON interface. Backbone has only hard dependency, which is on one JavaScript library, Underscore.js,. jQuery can also be optionally used for the library. It is designed for developing single-page web applications, and for keeping various parts of web applications synchronized. Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript and Underscore.js.

Micro Focus Service Manager is one of the applications acquired by Micro Focus when it purchased part of Hewlett-Packard Enterprise Software (HPES) in 2017. Before 2017, it was owned by HP when it purchased Peregrine Systems in 2005. The application was originally known as PNMS. After releasing the first version of PNMS, Peregrine Systems eventually added functionality such as Request Management, Call Management, and Change Management and rebranded the application as Peregrine ServiceCenter.

In software engineering, a microservice architecture is a variant of the service-oriented architecture structural style. It is an architectural pattern that arranges an application as a collection of loosely coupled, fine-grained services, communicating through lightweight protocols. One of its goals is that teams can develop and deploy their services independently of others. This is achieved by the reduction of several dependencies in the code base, allowing developers to evolve their services with limited restrictions from users, and for additional complexity to be hidden from users. As a consequence, organizations are able to develop software with fast growth and size, as well as use off-the-shelf services more easily. Communication requirements are reduced. These benefits come at a cost to maintaining the decoupling. Interfaces need to be designed carefully and treated as a public API. One technique that is used is having multiple interfaces on the same service, or multiple versions of the same service, so as to not disrupt existing users of the code.

<span class="mw-page-title-main">JHipster</span> Web application generator

JHipster is a free and open-source application generator used to quickly develop modern web applications and Microservices using Angular or React and the Spring Framework.

<span class="mw-page-title-main">Webpack</span> Open-source JavaScript module bundler

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 dependencies and generates static assets representing those modules.

<span class="mw-page-title-main">Netlify</span> American cloud computing company

Netlify is a remote-first cloud computing company that offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites. The platform is built on open web standards, making it possible to integrate build tools, web frameworks, APIs, and various web technologies into a unified developer workflow.

A Micro-app is a super-specialized application designed to perform one task or use case with the only objective of doing it well. They follow the single responsibility principle, which states that "a class should have one and only one reason to change." Micro applications help developers create less complex applications while reducing costs by breaking down monolithic systems into groups of independent services acting as one system.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

esbuild is a free and open-source module bundler and minifier for JavaScript and CSS written by Evan Wallace. Written in Go instead of JavaScript, esbuild claims to be "10 to 100 times" faster than other bundlers by using parallelism and shared memory usage. It supports TypeScript, JSX, tree-shaking and is extensible through plugins.

References

  1. 1 2 "Micro Frontends". martinfowler.com. Retrieved 2023-05-03.
  2. "Contentstack: What is a micro-frontend approach? - CW Developer Network". www.computerweekly.com. Retrieved 2022-08-29.
  3. "Decision Strategies for a Micro Frontends Architecture". InfoQ. Retrieved 2022-08-29.
  4. "Experiences Using Micro Frontends at IKEA". InfoQ. Retrieved 2022-08-29.
  5. "Module Federation". webpack. Retrieved 2022-08-29.