Micro Web Apps

@cosmycx

Cosmin Potocean

Micro web front-end applications

see updated version: https://slides.com/cosminp/micro-front-ends#/

Why?

  • front end web applications to achieve benefits from microservices architecture
  • ​new projects specify microservices and containers architecture
  • microservices architecture have proven benefits

How?

  • split the front end monolith web UI into micro apps

Micro Web Apps

Monolith UI Architecture

Single, large code base
Shares code and components

Micro Web Apps Architecture

Multiple code bases to make the business solution

Can stand alone or be composed

Benefits

  • loosely coupled architecture
  • composition, app or code reuse
  • can map to business domains
  • robust to changes, add-ons
  • problem encapsulation
  • focused on one problem
  • oriented on multiple team experiences
  • polyglot: multiple libraries/frameworks

Things to Consider

  • Login Scheme
  • Navbar, if one
  • Sharing lots of CSS, maybe have a CSS service
  • Sharing web components, maybe use https://bitsrc.io/
  • Big files, Library load time

Example

  • Using Traefik Proxy, https://traefik.io/

Example

docker-compose

Demo

https://github.com/cosmycx/micro-web-apps

https://slides.com/cosminp/micro-web-apps#/

?

Slides:

Made with Slides.com