Migrating from Monolith to Microfrontends

Yaprak Ayazoğlu

ConfrontJS 2018

@yaprakaya

About me...

Yaprak Ayazoğlu

Freelance Frontend Engineer

Google Developer Expert in Web Tecnologies

@yaprakaya

  • Netherlands in the past 4 years
  • M.S. Computer Science
  • B.S. in Electrical and Electronics Eng.
  • 1 Solar powered and Hydrogen Powered car
  • Mentoring @LoncaWorks

 

@yaprakaya

@yaprakaya

@yaprakaya

bol.com

@yaprakaya

What am I doing @bol.com?

@yaprakaya

Change...

Webshop ->Sellers

@yaprakaya

When I started @bol.com

@yaprakaya

Architecture

  • Monolith
  • Java in the backend
  • A mixture of Angular 1.x, Backbone, Handlebars in the frontend

@yaprakaya

Domains in Seller Dashboards

@yaprakaya

@yaprakaya

Monolith

Seller Dashboards

Returns

Orders

My Assortiment

...

Downstreams

Pain points

  • Deployment
  • Code reuse
  • Inertia (hard to adapt and implement new ideas)
  • Maintenance
  • Owneship

@yaprakaya

Time to change...

@yaprakaya

Expectations

  • Teams that can work independent of each other
  • Publishing code flawless and being able to publish frequently
  • Able to adapt and implement innovations
  • Using new technologies
  • Migrate without affecting the end users

@yaprakaya

Domains

  • /orders
  • /offers
  • /home
  • /performance
  • /assortment
  • /returns
  • ... vs.

@yaprakaya

Before...

@yaprakaya

Monolith

Seller Dashboards

Returns

Orders

My Assortiment

...

Downstreams

After Return Domain Detached

@yaprakaya

Monolith

Seller Dashboards

Returns

Orders

My Assortiment

...

Downstreams

FE

BE

@yaprakaya

BFF (Backend for frontend)

Backend for Frontend is a shim to help organize microservice architectures and coordinate functionality across a diverse, wide system. A BFF is a layer between the downstream services and UI.

Microfrontend

A composition of techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.

@yaprakaya

Examples of Micro Frontend

  • Orders
  • Returns
  • Delivery services
  • Warehouse management

@yaprakaya

@yaprakaya

Monolith

Seller Dashboards

Returns

Orders

My Assortiment

...

Downstreams

FE

BE

FE

BE

...

Features

  • It does not own data
  • including session
  • Independent of each other
  • Reusable in different portals
  • Live in different urls, different servers, different machines

@yaprakaya

Single Sign On

  • Session information
  • First service that detached from seller dashboard
  • The service without UI
  • Key microservice that makes the system look like one complete system

@yaprakaya

Menu

@yaprakaya

As we speak...

  • 8 different teams who works in 6 different departments
  • More than 20 micro frontend
  • Services that are deployed for several different user groups and different portals

@yaprakaya

Problems

  • The same look and feel and user experience
  • Shared libraries
  • SSO
  • Problems in hardware level

@yaprakaya

Was it a success in first take?

@yaprakaya

The first microfrontend experiment

  • Supplier portal
  • Angular Module for each domain
  • A SPA that is glued to each other on the browser

@yaprakaya

Supplier Portal

Application

1

Application

2

Application

3

@yaprakaya

SPA structure

<html>
  <head>
    …
    <script src=“/wrapper/bundle.js”></script>
    <script src=“/application-1/bundle.js”></script>
    <script src=“/application-2/bundle.js”></script>
    <script src=“/application-3/bundle.js”></script>
    …
  </head>
  …
</html>

@yaprakaya

Downs

  • Hard to maintain
  • Separate repositories become dependent to each other on run time
  • 3rd party library updates affected whole system

@yaprakaya

Ups

  • Performance

First of all...

  • Supplier portal is still in use

Modern Technologies

@yaprakaya

@yaprakaya

Typescript

  • Able to define types
  • Able to define interface for REST communication
  • Able to define types for streams (Observables)
  • Editor support

@yaprakaya

@yaprakaya


@Injectable()
export class PackingListService {
  private packingListUrl = 'url/to/packing-list';

  constructor(public http: HttpClient) { }

  public getPackingList(listId: string): 
      Observable<SendStockItem[]> {
    return this.http
      .get(`${this.packingListUrl}?list-id=${listId}`)
      .map((json: any) => {
        const packingList = PackingListDto.fromJson(json);
        return packingList.lines;
      });
  }
}

@yaprakaya

import { SendStockItem } from './send-stock-item';

export class PackingListDto {
  id: string;
  retailerId: string;
  sendStockItems: SendStockItem[];

  static fromJson(json: any): PackingListDto {
    return PackingListDtoSerializer.fromJson(json);
  }
}

class PackingListDtoSerializer {
  static fromJson(json: any): PackingListDto {
    const packingListDto = new PackingListDto();
    packingListDto.id = json.id;
    packingListDto.retailerId = json.retailerId;
    packingListDto.sendStockItems = json.lines.map((line) => {
      return SendStockItem.fromJson(line);
    });
    return packingListDto;
  }
}

@yaprakaya

import { FormGroup } from '@angular/forms';

export class SendStockItem {
  id: string;
  selectedQuantityFormItem?: FormGroup;

  static fromJson(json: any): SendStockItem {
    return SendStockItemSerializer.fromJson(json);
  }
}

class SendStockItemSerializer {
  static fromJson(json: any): SendStockItem {
    const sendStockItem = new SendStockItem();
    sendStockItem.id = json.id;
    return sendStockItem;
  }
}

Angular

  • Component based
  • Form and validation support
  • Localization support
  • Dependency injection in unit tests
  • CLI
  • Ecosystem
  • Framework

@yaprakaya

Shared libraries

@yaprakaya

Styling

@yaprakaya

Angular Component

Library

 

@yaprakaya

Framework agnostic component library and style guide

@yaprakaya

Wrap up

  • Autonomous and independent teams
  • Ownership
  • Easy to adapt new ideas
  • New technologies

@yaprakaya

Questions?

@yaprakaya

Thanks

@yaprakaya

https://frontconnect.nl/

info@frontconnect.nl

https://slides.com/yaprakayazoglu/monolith-to-microfrontend/

Migrating from Monolith to Microfrontends

By Yaprak Ayazoglu

Migrating from Monolith to Microfrontends

Recently, bol.com seller dashboards, which used to be a monolith, decomposed into microfrontends defined by a business domain concept. We experimented on different ways of microfrontend techniques and picked one. Since each application can run independently on their own minimal setup, this gave the teams great flexibility, autonomy and yet improved the ownership of the individuals. Despite some drawbacks, such as UX consistency, performance issues, etc. this technique definitely proved itself within bol.com. In this case study, you will hear our gains from using microfrontends.

  • 3,537