DEV Community


Posted on • Updated on

Micro Frontends Patterns#1: Introduction

This series, titled Micro Frontends Architecture Patterns, is a systematic introduction to the details of various architectural patterns which includes Web Frontends, from Monolith to JAMstack, and Micro Frontends. I wrote this series for two reasons.

The first is that I believe that the scope of Web Frontends is becoming broader than before. It is rare(?) for a Frontend engineer to work only on the 'Frontends'. It is necessary to have a bird's eye view of the entire software architecture and to design interactions with other systems. At least, such a way of thinking is often useful. By summarizing the architecture related to the Frontends, I hope to help web development.

The second reason is that I believe that knowing the history and evolution of the architecture will help us understand Micro Frontends better. When a technology becomes a trend, there is a background and a problem to be solved, and Micro Frontends is no different, there are situations where they are effective.

This series is organized as follows.

  • Introduction
  • Micro Frontends in 3 minutes
  • Monolithic Application
  • JAMstack
  • Microservice Architecture
  • Isomorphic JavaScript
  • Linked Application
  • Unified SPA
  • Client Side Composition
  • Edge Side Includes
  • Edge Side Composition
  • Server Side Composition
  • Build Time Composition
  • Reading List

If you want to know about the architecture of Micro Frontends, I recommend you to start from 7.Linked Application. Examples, reference books, articles, OSS, etc. are listed in the 14.Reading List, so if you want to see the information with your own eyes, please visit there directly.

In addition, this series is expected to achieve the following

  • [ ] Understand the architectural evolution of Web Frontends.
  • [ ] Understand the architecture of Web Frontends and be able to select one depending on the situation.
  • [ ] Understand the concepts and implementation patterns of Micro Frontends.
  • [ ] Be able to use your time in a meaningful way(?)

Hope this will help you.

What this series does not cover

  • I will not explain Micro Frontends in detail. Please read the Micro Frontends in 3 minutes chapter for more information on this.
  • I will not cover Frontends architectures such as MVVM or Flux.
  • I will not cover non-Web platforms. Similarly, we won't cover technologies such as React Native that use web technologies.
  • I have no intention to compare just 'libraries'.

Top comments (0)