Micro Frontend

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

in Angular Apps

- Access bit.ly/nodebots-book-en

- Decrease the price to $0,00

- Enjoy

Nodebots book free!

HI, IT'S ME

Companies have legacy code

in production

Monolith

Highly coupled code

Mix of layers

Initial version

<webapps/>                    are evolving

and we need to be up-to-date

The Micro * Way

how easy is to upgrade your app?

microservices, microframeworks, micro-whatever

Micro

frontend

Tool?

Framework?

Micro frontend ?

Tecnique

How to solve

architectural problems

Evolution in Steps

Evolutionary Architecture

will be crucial in your journey

/v1/items/123
/v1/about/123
/v1/gallery/123
...

{ }

team #1

team #2

team #3

Share components is <3

<ItemsList />
<About />
<Gallery />
...
<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />

Layout container

{ }

{ }

{ }

page #1

page #2

page #3

COMPONENTS

PAGES

ROUTING

small scope

boundaries

plug-and-play

Everything is a component

{ }

{ }

{ }

team #1

team #2

team #3

Ownership

Flexibility

Innovation
Migrate page by page

Impacts

The
Strangle

Pattern

Can I use

as a PWA application

?

using

microfrontend

bundle size

time to first render

prefetch

Concerns

ROUTING SOLUTION

stack #1

stack #2

x

ROUTING SOLUTION

stack #1

stack #2

Server-side Routing

Client-side Routing

...
import('./new-page.component')
  .then(({ default: NewPageComponent }) => {
    // Logic to add
    // your experimental feature
  });
  .catch(e => 
    console.log(`
Error loading the component ${e}
    `)
  );
...

import('in-load-time')

Feature Toggle Service

let asyncModule;

if (isFeatureFlagTurnedOn('new-page')) {
  asyncModule = import(
    /* webpackChunkName: "new-page" */
    './new-page'
  );
} else {
  asyncModule = import(
    /* webpackChunkName: "old-page" */
    './old-page'
  );
}

DEMO

... or just "show me the code"

Monorepos 

...can be a good solution

Organized

Tooling

Tasks

Traceability

Cross-project

Dependencies

Why monorepos

Angular Workspaces

...can be a good solution

yarn affected:build --base=master
// Running affected only
// E2E Tests
yarn affected:test --base=master
yarn affected:e2e --base=master
// Unit Tests
// Build

This can potentially

create new problems

Main goal

Easy to deploy

Release early

   Release often

MASTER

BRANCH

Landkid

{1}

{2}

{3}

{4}

{5}

{2}

{6}

{5}

{1}

}

MASTER

BRANCH

{1}

{2}

{3}

{4}

{5}

{2}

{6}

{5}

{1}

}

MASTER

BRANCH

MASTER

BRANCH

{1}

{1}

{2}

{3}

{4}

{5}

{6}

}

{2}

{5}

{1}

MASTER

BRANCH

MASTER

BRANCH

Metrics

everywhere

ROUTING SOLUTION

stack #1

stack #2

What if your

API goes down?

What if your

API have

optional attributes?

What if your

types are not

assertive?

// GET api/endpoint/1234

{
  "location": [...],
}
type ApiEndpointResponse = {
  location?: Array<...>;
  listing?: {
    [k: string]: | string
                 | boolean
                 | number;
  } 
};
// GET api/endpoint/1234

{
  "location": [...],
  "listing": {...}
}

<ngx-recap/>

Think in architecture

Start with small steps

Migration plan

Define routing solution

Monorepos can help

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Micro Frontend in Angular Apps

By willmendesneto

Micro Frontend in Angular Apps

The talk is sharing some common issues that happens in some projects and how to solve them. We start them with the goal of validate the business and after that we realise we have to improve the application. In some points the pages are so coupled that's hard to deliver fast, do it with proper confidence or even scale the project page by page having lot of benefits, such as start resilient decoupled applications! Even though examples are in Angular, the principles apply to any frontend framework.

  • 46
Loading comments...

More from willmendesneto