$30 off During Our Annual Pro Sale. View Details »

Micro Applications: Divide & Conquer

Bilal Çınarlı
October 27, 2021
Programming
2
930

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.

Bilal Çınarlı

October 27, 2021
Tweet

More Decks by Bilal Çınarlı

See All by Bilal Çınarlı
Aninda Yüklenen Uygulamalar
bcinarli
0
23
Iletisimin Mühendisligi
bcinarli
0
23
Independently together: 
better developer experience & App performance
bcinarli
1
370
Developer Experience: How happy are your engineers?
bcinarli
0
210
Lightning Fast Web Applications
bcinarli
1
260
WebAssembly - is it the future for the Web?
bcinarli
0
96
Why Performance Matters
bcinarli
0
130
Design Systems and Component Based Frontend
bcinarli
0
76
Future Proof Frontend Coding
bcinarli
1
190

Other Decks in Programming

See All in Programming
DIGGLEの分析基盤アーキテクチャ
zakky21
0
240
Scala Left Fold Parallelisation - Three Approaches
philipschwarz
PRO
0
280
MVP開発をするための要求の詰め方/How to think about requirements for MVP development
misatokii
0
140
非同期ツールキット「Vert.x」のご紹介
masatoshiitoh
0
130
Intro to Stateful Services or How to get 1 million RPS from a single node
antyadev
0
140
Angular 17 - Rainaissance
gregonnet
0
140
クソアプリを作ってみた💩 / kusojaku
uhooi
0
190
DMMプラットフォームにおけるコード品質を改善する取り組みの理想と現実
pospome
3
1.9k
ユーザー登録とログインフォームにautocomplete属性を使いましょう
ivanova1991
2
1.7k
文化祭入退場システムCracker (at U-22プログラミング・コンテスト)
pocopota
0
150
ChatGPTをソフトウェア開発に活用する
fbei_ot
0
150
カスタマーサポートの信頼性向上 〜社内ツールにおけるSRE活動〜 - NIFTY Tech Day 2023
niftycorp
0
120

Featured

See All Featured
Facilitating Awesome Meetings
lara
37
5.2k
Design by the Numbers
sachag
272
18k
Raft: Consensus for Rubyists
vanstee
130
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
123
31k
How GitHub Uses GitHub to Build GitHub
holman
467
280k
Agile that works and the tools we love
rasmusluckow
323
20k
It's Worth the Effort
3n
180
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
14k
Done Done
chrislema
178
15k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
13
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.9k
KATA
mclloyd
13
11k

Transcript

  1. MICRO
    APPLICATIONS
    DIVIDE&CONQUER

    View Slide

  2. BILAL CINARLI


    HEAD OF FRONTEND ARCHITECTURE


    @BCINARLI

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. 27.10.21
    Micro Applications load shared libraries


    from a shared place, CDN
    61
    MICRO APPLICATIONS: DIVIDE & CONQUER
    @BCINARLI #INTPHPCON / #IJSCON

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. THANK YOU
    @BCINARLI

    View Slide