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

β†’

β†’

β†’

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

β†’

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

β†’

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

β†’

β†’

β†’

β†’

β†’

β†’

β†’

Change Perspective?

https://unsplash.com/photos/kvv5bm1dgc8

/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

Really !?!?

https://unsplash.com/photos/TdM_fhzmWog

/home

/content

/settings

β†’

@_lizzelo_

App Shell

β†’

β†’

β†’

β†’

β†’

@_lizzelo_

App Shell

β†’

/content

β†’

Routing

@_lizzelo_

const routeEntries = [
  {
    name: 'home', 
    path: 'xy.com/home'
  },
  {
    name: 'content',
    path: 'xy.com/content'
  },
  {
    name: 'settings',
    path: '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

β†’

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

?

@_lizzelo_

Shall we?

@_lizzelo_

@_lizzelo_

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

[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

can be named

Everyone understands why

Frontend Dev is so much fun

/home

/content

/settings

β†’

β†’

β†’

@_lizzelo_

Links

↔

Links

↔

/home

/content

/settings

β†’

@_lizzelo_

Server Side Includes

β†’

β†’

β†’

β†’

β†’

β†’

β†’

/home

/content

/settings

β†’

@_lizzelo_

Integration on Code Level

Bundle

β†’

/home

/content

/settings

β†’

@_lizzelo_

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

@_lizzelo_

Web Components

<html>
     <body>

          <navigation></navigation>

          <content></content>

          <sidebar version="A"></sidebar>

          <sidebar version="B"></sidebar>

     </body>
</html>
 

@_lizzelo_


class NewHTMLElement extends HTMLElement {

  createdCallback() {...}

  attachedCallback() {...}

  attributeChangedCallback(attr, oldVal, newVal) {...}

  detachedCallback() {...}
}


document.registerElement('new-tag', NewHTMLElement);
  

@_lizzelo_


class ContentElement extends HTMLElement {

  createdCallback() {
   this.addInputField();
   this.addSubmitButton();
   this.listenToSubmit();
 }

  ... 

}

document.registerElement('content', ContentElement);
  

@_lizzelo_

<html>
 <body>

  <navigation></navigation>

  <content></content>

  <sidebar version="A"></sidebar>

  <sidebar version="B"></sidebar>

 </body>
</html>

Submit

Break up with your Frontend Monolith - Extended

By Elisabeth Engel

Break up with your Frontend Monolith - Extended

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

  • 4,195