UI in Microservices World — Micro Frontends pattern and Web Components

Micro Frontends

  • Application, as a set of functionalities, where each one is being developed by independent team;
  • Each team has its own business area, for which it is responsible and specializes in;
  • Teams are multifunctional (full-stack) and develop their functionalities from start to finish, starting from databases to user’s interface;
  • Each team should be able to change technology used.
  • when to integrate particular parts:
  • during development
  • during runtime on client’s side
  • during runtime on server’s side
  • during runtime in middleware
  • how to design routing and communication between elements/services
  • how to provide real separation of elements
  • how to avoid conflicts in CSS styles
  • how to load elements, only if they are necessary (lazy loading)
  • how to share common resources
Source
  • Web Components — they enable creating non-standard reusable elements closed in HTML tags. Theoretically, they work in all modern web browsers and might be used with any framework.
  • Project Mosaic — a set of libraries to develop web applications, which use fragment concepts created by Zalando.
  • single-spa — an interesting solution with a few working examples. Unfortunately, it is next layer of abstraction in our solution (framework which connects frameworks).
  • Allegro OpBox — a solution which is not shared as open source, and won’t be shared until some kind of big player is not going to declare plans to contribution. Still it’s worth reading linked article, because the applied approach is really interesting.

Web Components

  • Custom Elements, which define how to develop and use new elements of DOM tree,
  • Shadow DOM, thanks to which you can hide the details of implementation ( use encapsulations),
  • ES Modules, which allow to use earlier defined JS documents in other documents,
  • HTML Template, thanks to which we may define fragments which are initiated when they are necessary.

Web Components — cooperation with frameworks

  • different types of communication between components,
  • compilers for web component (stencil),
  • performance with a lot of components on one website,
  • other libraries for Web Components (Hybrids, LitElement, Polymer, Slim.js)

--

--

--

Co-Founder & CTO @ TwojPsycholog

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[HOT] MONIWAR IS OFFICIALLY LAUNCHED IN THE NEXT 2 DAYS !!

Experience at LetsGrowMore.

Continuing Momentum:

How to simulate locations in Xcode

TotemFi’s Dev Report

Touch sensor and PH sensor

Introduction to Ansible: Deployment of the Multi-Utility Automation Tool (Part 2)

How to enable “tags” in Google Tag Manager with GDPR “triggers” strategy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert Witkowski

Robert Witkowski

Co-Founder & CTO @ TwojPsycholog

More from Medium

Testing a HTTP client adaptor hook useClient

Push messages to browser notifications

How to mock the tricky things with Jest

How to protect /uploads route with a custom policy in Strapi V4