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_

Speed Dating

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

/home

/content

/settings

β†’

β†’

β†’

Team Ownership

6 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

β†’

Team Ownership

7 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

β†’

β†’

β†’

β†’

β†’

β†’

β†’

@_lizzelo_

/home

/content

/settings

β†’

Team Ownership

7 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

/home

/content

/settings

β†’

@_lizzelo_

App Shell

β†’

β†’

β†’

β†’

β†’

@_lizzelo_

App Shell

β†’

/settings

β†’

Routing

@_lizzelo_

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

/settings

β†’

xy.com/settings

β†’

Loading via Manifest Files

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

@_lizzelo_

App Shell

β†’

β†’

JS

CSS

xy.com/settings

Initialization

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

@_lizzelo_

App Shell

β†’

β†’

JS

CSS

App Shell

/home

/content

/settings

β†’

Team Ownership

7 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

?

Shall we?

have a look at our new home: www.gutefrage.net/invitation

have a look at our new home: www.gutefrage.net/invitation

App Shell @ gutefrage

@_lizzelo_

Team Ownership

6 passing

3 challenges

Develop Independently

Run Independently

Technology Agnostic

Super Fast Loading

Native Support

Corporate Identity

Sharing Basics

Smooth User Interaction

Modular

1Β  failing

www.gutefrage.net/invitation

[Micro Frontends]

@_lizzelo_

Complex Environment

Build Scripts

Error Handling

Redundancy

Shared Dependencies

😳

πŸ€”

πŸ™„

Β 

πŸ˜‡

πŸ€•

Independence

Easier Testing

Faster Onboarding

πŸŽ‰

πŸŽ‰

πŸŽ‰

Future Proof

Resilient

πŸŽ‰

πŸŽ‰

Maintainable

πŸŽ‰

Mission Phase

@_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_

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

Break up with your Frontend Monolith

By Elisabeth Engel

Break up with your Frontend Monolith

YouTube recording: https://www.youtube.com/watch?v=W3_8sxUurzA

  • 2,636