https://github.com/fboeller/microfrontends-with-angular

The full code of the talk "Microfrontends with Angular"
https://github.com/fboeller/microfrontends-with-angular

angular frontend microfrontends tutorial webcomponents

Last synced: 13 days ago
JSON representation

The full code of the talk "Microfrontends with Angular"

• Host: GitHub
• URL: https://github.com/fboeller/microfrontends-with-angular
• Owner: fboeller
• License: mit
• Created: 2022-04-05T15:49:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-18T20:17:07.000Z (7 months ago)
• Last Synced: 2024-05-01T17:43:07.917Z (7 months ago)
• Topics: angular, frontend, microfrontends, tutorial, webcomponents
• Language: TypeScript
• Homepage: https://ng.traveling-coderman.net
• Size: 1.29 MB
• Stars: 20
• Watchers: 1
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Microfrontends with Angular

## Watch the video

This project was created to create an instructional video on how to split your angular application into multiple microfrontends using web components.

[Watch Web Component-based Micro Frontends with Angular on YouTube](https://www.youtube.com/watch?v=ee17YczpCpU)

## Blog posts

We have also each published a post on our blogs based on this video:

- [Read Why Microfrontends? on traveling-coderman.net](https://traveling-coderman.net/code/microfrontends/why/)

- [Read Web Component-based Micro Frontends with Angular on xkons.de](https://www.xkons.de/posts/ng-micro-frontends/)

## Local development setup

```

$ git clone https://github.com/fboeller/microfrontends-with-angular.git

$ cd microfrontends-with-angular

$ npm install

$ npm start

```

A visit to `localhost:4200` shows the application.

## Benefits of microfrontends

- Vertical services (backend and frontend are fully owned by one team, see [micro-frontends.org](https://micro-frontends.org/))

- Ship code independently and faster

- Freedom from existing opinionated codebase

- Failures will likely only affect your microfrontend and not the whole app and you can release a fix more quickly

## You might need microfrontends when...

- your releases are slow

- you need to wait for other teams for unblocking the release pipeline

- it is not clear who owns which views

## Drawbacks of microfrontends

- bigger bundle size

- added complexity of stitching shell app and microfrontends together

### Using webpack module federation

- microfrontends are more tightly coupled since they share common dependencies

## web-component vs iframe

iframes are more isolated while web-components are more tightly integrated with the application that embeds them.

### Disadvantages of iframes

#### Overlays

Modals and toast messages are only displayed within the element of the iframe itself and cannot "escape" it. This is why with iframes you would need to use some mechanisms like [Window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to let the outer application know that it should display a modal or toast message with some specific content that is passed along.

#### Theming

The DOM of the iframe is separate from the DOM of the embedding application. This makes it harder to use CSS variables for example.