Save 37% off PRO during our Black Friday Sale! »

Micro Applications: Divide & Conquer

Micro Applications: Divide & Conquer

As teams get bigger and applications, we work with become more complex, handling the development environment, dependencies, and even development itself becomes a burden. We tried different things like micro-frontends, including dependencies, and more to ease the development, but they all come with different additional complexities. What would you think if it was possible to split your website into separate micro apps that you can develop, build, and deploy separately but work in harmony? Also, leave the development complexity behind.

80d92d5d0bd0170aebf6e07589a0b571?s=128

Bilal Çınarlı

October 27, 2021
Tweet

Transcript

  1. MICRO APPLICATIONS DIVIDE&CONQUER

  2. BILAL CINARLI HEAD OF FRONTEND ARCHITECTURE @BCINARLI

  3. 27.10.21 This is a journey with blood, sweat and tears…

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

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

    #IJSCON
  6. 27.10.21 Let’s go back in the history and check some

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

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

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

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

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

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

    #IJSCON
  13. 27.10.21 In January 2020, the production release blocked for 2

    weeks! 13 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON BLOCKED
  14. 27.10.21 Team A was blocking Team B 14 MICRO APPLICATIONS:

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

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

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

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

    #IJSCON
  19. 27.10.21 Then business came… 19 MICRO APPLICATIONS: DIVIDE & CONQUER

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

    @BCINARLI #INTPHPCON / #IJSCON
  21. 27.10.21 “We want our teams to be able deploy independently”

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

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

    #IJSCON
  24. 27.10.21 Did not happen like that, since I’m still here

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

    #IJSCON
  26. 27.10.21 Let’s do it! 26 MICRO APPLICATIONS: DIVIDE & CONQUER

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

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

    #IJSCON Single Page App
  29. 27.10.21 Need to build multiple applications 29 MICRO APPLICATIONS: DIVIDE

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

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

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

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

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

    #IJSCON Single Page App Library Core Design System Build system Local env Shared comp
  35. 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
  36. 27.10.21 Micro Applications are SPAs, with just a page or

    a group of pages 36 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON
  37. 27.10.21 Micro Applications are fully independent applications 37 MICRO APPLICATIONS:

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

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

    DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 27.10.21 45 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON /

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

    #INTPHPCON / #IJSCON
  47. 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
  48. 27.10.21 How do we know, which and when an application

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

    DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON
  50. 27.10.21 How do you retain the session or data between

    apps? 50 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON
  51. 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
  52. 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
  53. 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
  54. 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
  55. 27.10.21 Micro Applications are SPAs, with just a page or

    a group of pages 55 MICRO APPLICATIONS: DIVIDE & CONQUER @BCINARLI #INTPHPCON / #IJSCON
  56. 27.10.21 Micro Applications are fully independent applications 56 MICRO APPLICATIONS:

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

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

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

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

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

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

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

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

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

    #IJSCON
  66. THANK YOU @BCINARLI