Micro frontends: Markup for a Composed App

Monolithic applications are typically complex applications that bundle several tightly coupled functions. In a monolithic architecture, the entire application is bundled into a single package that includes source code, libraries, configurations, and all other dependencies required for it to run. Monoliths have limitations:

• You cannot use multiple languages to get the desired features for application
• These systems have everything bundled into single deployable unit.
• They are not agile because even a small change often needs full redeployment.
• Tiniest change can cause an unanticipated impact on the rest of the code.

Microservices are the software development technique that structures the backend of an application into loosely coupled services that can be reused by other applications. In the modern era, the use of functions and microservices is a common implementation model. This avoids the above-mentioned limitations of large, monoliths backends.

Diagram shows, in this approach there is a tight coupling and dependency between backend and the frontend. E.g., Frontend team is responsible for creating appealing user experience consuming backend services, as a REST services. Let’s look at our diagram, if we have a change in the “Basket Service” we consume, we need to propagate this change up to the UI. Other thing, frontend team needs to be in touch with various backend teams to ensure any change is reflected to the UI.

Microservices architecture should also be applied to a monolith frontend to decompose it into smaller independently functional components (module) as shown in the sketch below.

However, libraries like React, Angular, Vue.js used for front-end development are promoting monolith approach to front-end architecture. The solution to this problem is Web Components (micro frontend). It’s a design approach similar to micro-services, in which, instead of creating a big frontend app we break the app into a collection of loosely coupled frontend apps built on same or different technologies that might be working together. One of the benefits of using micro frontend style is making frontend development less complex and more manageable. Additionally, this style allows for scalability. It also makes it easier to update or rewrite frontend code as compared to the monolith approach.

Web Components

Web components is a set of standards to make self-contained components (custom HTML-elements) with their own properties and methods, encapsulated DOM and CSS (styles). Web components provide a way to create pieces of front-end that can be imported into Web applications. Custom components and widgets build on the Web Component standards will work across modern browsers and can be used with any JavaScript library or framework that works with HTML.

Web components are based on four main specifications:

• Custom Elements: The Custom Elements specification lays the foundation for designing and using new types of DOM elements. JavaScript APIs allow to define custom elements and their behaviour, which be used in any web user interface. There are two types of custom elements:
  • Autonomous: “all-new” element, extending the abstract HTMLElement class.

    

  • Customized: extending built in elements, like based on HTMLButtonElement Class.

    

• Shadow DOM: The shadow DOM specification defines how to use encapsulated style and markup in web components. This helps to keep the markup structure, style and behaviour hidden and separate from other code on the page. The Shadow DOM API provides a way to attach hidden and separate DOM to an element. Some of the Shadow DOM terminologies:
  • Shadow host: The regular DOM node that the shadow DOM is attached to.
  • Shadow tree: The DOM tree inside the shadow DOM.
  • Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
  • Shadow root: The root node of the shadow tree. For example, element hides its internal DOM in shadow tree.

• HTML Template: The HTML template element specification defines how to declare fragments of markup that go unused at page load but can be instantiated later at runtime. A built-in element serves as a storage for HTML markup. The browser ignores its contents, and only checks for syntax validity, but we can access and use it in JavaScript to create other elements.

In the example above, a web component that uses our template as the content of its shadow DOM.

• ES Modules: The ES Modules specification defines the inclusion and reuse of JS documents in a standards-based, modular, performant way. ES Modules is the recent ECMAScript standard for working with modules. The standardization of a module system for browsers completed with ES6. Web browsers have started implementing it, and ES Modules are now supported in Chrome, Safari, Edge and Firefox (since version 60). Modules act as collections of smaller components that can be reused in our application, they let developers encapsulate all kinds of functionalities, and expose these functionalities to other JavaScript files, as libraries. The process of including JS documents in a standards-based, modular, performant way is defined in the ES Modules specification.

As we understand a “Monolith” means an application composed of all-in-one build. Whereas “Microservices are built as a suite of modular apps. Both approaches have their advantages and disadvantages. Monolithic architecture is preferred for the development of very small, and light-weight applications. Monolithic architecture is considered the traditional way of application development.

 Micro frontend architecture is good for developing complex applications. Web components come to the rescue for Micro frontend development. Web components are full HTML elements with custom templates, APIs and Tag Names. They can be used in any web application, they are compatible with (or without) any JavaScript library or framework (React, Angular, Vue.js), and should work with all modern browsers.

We hope you’ll find something exciting in the idea of Micro front-ends that can be useful for you.

Thanks for reading!