Break Up

With Your

Frontend Monolith

Elisabeth Engel

@_lizzelo_

@_lizzelo_

Side Effects

Complexity

Dependency

Coordination

Slow Onboarding

Processes

Killing Innovation

Let's migrate!

@_lizzelo_

Microservices

to the rescue!

๐Ÿ’‹

Keep It

Simple & Stupid

@_lizzelo_

All in one place

Backend

Microservices

Frontend

Frontend ?

@_lizzelo_

@_lizzelo_

1 Company = 1 Website

use Frontend Technology

Speed Dating

https://www.flickr.com/photos/lmdo/6404420503

/home

/content

/settings

โ†’

โ†’

โ†’

@_lizzelo_

Links

โ†”

Links

โ†”

@_lizzelo_

<html>
     <body>

        <div class="navigation">...</div>

        <div class="content">...</div>

        <div class="sidebarA">...</div>

        <div class="sidebarB">...</div>

     </body>
</html>
 

/home

/content

/settings

โ†’

โ†’

โ†’

5 passing

4 failing

Develop Independently

Run Independently

Technology Agnostic

Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

iFrames ?!?

CMS

@_lizzelo_

Links

โ†”

Links

โ†”

โ†’

โ†’

/home

/content

/settings

โ†’

@_lizzelo_

Server Side Includes

โ†’

โ†’

โ†’

โ†’

โ†’

โ†’

โ†’

@_lizzelo_

<html>
     <body>

        <!--#include virtual="/navigation" -->

        <!--#include virtual="/content" -->

        <!--#include virtual="/sidebar?version=A" -->

        <!--#include virtual="/sidebar?version=B" -->

     </body>
</html>
 

/home

/content

/settings

โ†’

6 passing

3 failing

Develop Independently

Run Independently

Technology Agnostic

Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

@_lizzelo_

Server Side Includes

โ†’

โ†’

โ†’

โ†’

โ†’

โ†’

โ†’

Change Perspective?

https://unsplash.com/photos/kvv5bm1dgc8

/home

/content

/settings

โ†’

6 passing

3 failing

Develop Independently

Run Independently

Technology Agnostic

Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

@_lizzelo_

Integration on Code Level

Bundle

โ†’

Lazy Loading

โ†’

โ†’

Web Components

Really !?!?

https://unsplash.com/photos/TdM_fhzmWog

/home

/content

/settings

โ†’

@_lizzelo_

App Shell

โ†’

โ†’

โ†’

โ†’

โ†’

@_lizzelo_

App Shell

โ†’

/content

โ†’

Routing

@_lizzelo_

const routeEntries = [
  {
    route: 'home', 
    goto: 'xy.com/home'
  },
  {
    route: 'content',
    goto: 'xy.com/content'
  },
  {
    route: 'settings',
    goto: 'xy.com/settings'
  }
}

/content

โ†’

xy.com/content

โ†’

Loading via Manifest Files

{
 "name": "content",
 "version": "1.0.1",
 "content": {
   "js": [
     "/js/bundle.min.js"
    ],
   "css": [
     "/css/style.min.css"
    ]
 }
}

@_lizzelo_

App Shell

โ†’

โ†’

JS

CSS

xy.com/content

Initialization

window.xy.content.init(
    applicationUrl, 
    path, 
    dependencies,
    ...
)

@_lizzelo_

App Shell

โ†’

โ†’

JS

CSS

App Shell

/home

/content

/settings

โ†’

6 passing

3 challenges

Develop Independently

Run Independently

Technology Agnostic

Super Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

@_lizzelo_

App Shell

โ†’

โ†’

โ†’

โ†’

โ†’

Second Date

2017 @ gutefrage

Logged Out

SEO
Single Page Speed

Single Technology Stack

Engagement

Smooth Page Switch

Different Technologies

Logged In

?

@_lizzelo_

Shall we?

@_lizzelo_

@_lizzelo_

App Shell @ gutefrage

@_lizzelo_

6 passing

2 challenges

Develop Independently

Run Independently

Technology Agnostic

Super Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

1ย  failing

[Micro Frontends]

@_lizzelo_

Complex Environment

Build Scripts

Error Handling

Redundancy

Shared Dependencies

๐Ÿ˜ณ

๐Ÿค”

๐Ÿ™„

ย 

๐Ÿ˜‡

๐Ÿค•

Independence

Easier Testing

Faster Onboarding

๐ŸŽ‰

๐ŸŽ‰

๐ŸŽ‰

Future Proof

Resilient

๐ŸŽ‰

๐ŸŽ‰

Maintainable

๐ŸŽ‰

[Micro Frontends]

After the Break Up

@_lizzelo_

Be Open

๐Ÿ™„

@_lizzelo_

Youtube: Micro Frontends

Zeef: Micro Frontends

Look Around

http://bit.ly/2zIhQzd

https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT

Start Dating

@_lizzelo_

@_lizzelo_

Acceptance Criteria Check

No participant was harmed

during the talk

4 different approaches

were considered

Everyone understands why

you can bet on micro frontends

Links,ย Server Side Includes,ย Integration on Code Level &ย App Shell

Don't Go Too Fast

@_lizzelo_

Start small

Same Repository

Naming Conventions

Living Styleguide

๐Ÿ‘ถ๐Ÿผ

๐Ÿ‘ถ๐Ÿป

๐Ÿ‘ถ๐Ÿฝ

๐Ÿ‘ถ๐Ÿพ

@_lizzelo_

start a new

love story!

Break Up

With Your

Frontend Monolith

&

Credits

gutefrage.net GmbH

ย 

Katharina Brinck

Thomas Zolynski

Franรงois Godet

Johannes Weber

ย 

Pixabay