Micro Applications: Divide & Conquer

Slide 1

Slide 1 text

MICRO APPLICATIONS DIVIDE&CONQUER

Slide 2

Slide 2 text

BILAL CINARLI HEAD OF FRONTEND ARCHITECTURE @BCINARLI

Slide 3

Slide 3 text

27.10.21 This is a journey with blood, sweat and tears… 3 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 4

Slide 4 text

27.10.21 …just kidding! We are developing apps! 4 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 5

Slide 5 text

27.10.21 5 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 6

Slide 6 text

27.10.21 Let’s go back in the history and check some facts! 6 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 7

Slide 7 text

27.10.21 In 2017, Monorepo started for single page application… 7 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 8

Slide 8 text

27.10.21 By the time, 150+ engineers became regular! 8 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 9

Slide 9 text

27.10.21 From 5 product and 17+ feature teams 9 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 10

Slide 10 text

27.10.21 By working around open 100 PRs… 10 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 11

Slide 11 text

27.10.21 …and merging around 25 of those PRs daily 11 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 12

Slide 12 text

27.10.21 12 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 13

Slide 13 text

27.10.21 In January 2020, the production release blocked for 2 weeks! 13 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON BLOCKED

Slide 14

Slide 14 text

27.10.21 Team A was blocking Team B 14 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 15

Slide 15 text

27.10.21 Team B was blocking Team C… 15 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 16

Slide 16 text

27.10.21 …and not able to release for two weeks 16 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 17

Slide 17 text

27.10.21 …and pipelines were taking more than hour 17 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 18

Slide 18 text

27.10.21 18 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 19

Slide 19 text

27.10.21 Then business came… 19 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 20

Slide 20 text

27.10.21 …with one request… 20 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 21

Slide 21 text

27.10.21 “We want our teams to be able deploy independently” 21 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 22

Slide 22 text

27.10.21 22 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 23

Slide 23 text

27.10.21 23 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 24

Slide 24 text

27.10.21 Did not happen like that, since I’m still here :) 24 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 25

Slide 25 text

27.10.21 25 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 26

Slide 26 text

27.10.21 Let’s do it! 26 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 27

Slide 27 text

27.10.21 …easy to say 27 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 28

Slide 28 text

27.10.21 28 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App

Slide 29

Slide 29 text

27.10.21 Need to build multiple applications 29 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 30

Slide 30 text

27.10.21 Need to run multiple pipelines 30 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 31

Slide 31 text

27.10.21 31 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App

Slide 32

Slide 32 text

27.10.21 32 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System

Slide 33

Slide 33 text

27.10.21 33 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System Build system Local env

Slide 34

Slide 34 text

27.10.21 34 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System Build system Local env Shared comp

Slide 35

Slide 35 text

27.10.21 35 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System Build system Local env Shared comp Browse Team Checkout Team Account Team Campaigns Team

Slide 36

Slide 36 text

27.10.21 Micro Applications are SPAs, with just a page or a group of pages 36 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 37

Slide 37 text

27.10.21 Micro Applications are fully independent applications 37 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 38

Slide 38 text

27.10.21 Micro Applications can be deployed separately 38 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 39

Slide 39 text

27.10.21 Micro Applications can be scaled separately 39 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 40

Slide 40 text

27.10.21 40 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System Build system Local env Shared comp Browse Team Checkout Team Account Team Campaigns Team Application Core

Slide 41

Slide 41 text

27.10.21 Application Core 41 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Library Core Design System Build system Local env Shared comp Browse Team Checkout Team Account Team Campaigns Team CLI

Slide 42

Slide 42 text

27.10.21 42 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Single Page App Application Core Library Core Design System CLI Build system Local env Shared comp Browse Team Checkout Team Account Team Campaigns Team

Slide 43

Slide 43 text

27.10.21 Browse App Checkout App Account App Campaigns App 43 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Browse Team Checkout Team Account Team Campaigns Team

Slide 44

Slide 44 text

27.10.21 Browse Team Checkout Team Account Team Campaigns Team Browse App Checkout App Account App Campaigns App 44 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Router

Slide 45

Slide 45 text

27.10.21 45 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 46

Slide 46 text

27.10.21 Maybe not! 46 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 47

Slide 47 text

27.10.21 In development, we do not have magical solutions! In development, we have trade-offs! 47 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 48

Slide 48 text

27.10.21 How do we know, which and when an application will run? 48 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 49

Slide 49 text

27.10.21 What will be the performance impact? 49 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 50

Slide 50 text

27.10.21 How do you retain the session or data between apps? 50 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 51

Slide 51 text

27.10.21 Browse Team Checkout Team Account Team Campaigns Team Browse App Checkout App Account App Campaigns App 51 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Router

Slide 52

Slide 52 text

27.10.21 Browse Team Checkout Team Account Team Campaigns Team Browse App Checkout App Account App Campaigns App 52 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Router CDN for Common Lib

Slide 53

Slide 53 text

27.10.21 Browse Team Checkout Team Account Team Campaigns Team Browse App Checkout App Account App Campaigns App 53 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Router CDN for Common Lib Cookies Local Storage

Slide 54

Slide 54 text

27.10.21 Browse Team Checkout Team Account Team Campaigns Team Browse App Checkout App Account App Campaigns App 54 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON Shared comp Router CDN for Common Lib Cookies Local Storage

Slide 55

Slide 55 text

27.10.21 Micro Applications are SPAs, with just a page or a group of pages 55 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 56

Slide 56 text

27.10.21 Micro Applications are fully independent applications 56 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 57

Slide 57 text

27.10.21 Micro Applications can be deployed separately 57 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 58

Slide 58 text

27.10.21 Micro Applications can be scaled separately 58 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 59

Slide 59 text

27.10.21 Micro Applications are orchestrated by a routing mechanism 59 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 60

Slide 60 text

27.10.21 Micro Applications have a bundle as small as possible 60 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 61

Slide 61 text

27.10.21 Micro Applications load shared libraries from a shared place, CDN 61 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 62

Slide 62 text

27.10.21 Micro Applications can share the cookies and local storage 62 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 63

Slide 63 text

27.10.21 Micro Applications is a way of creating fully independent teams 63 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 64

Slide 64 text

27.10.21 64 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 65

Slide 65 text

27.10.21 65 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON

Slide 66

Slide 66 text

THANK YOU @BCINARLI