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.

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