SlideShare a Scribd company logo

Migration process from monolithic to micro frontend architecture in mobile applications

•
•
E
ESUG

This document discusses migrating a monolithic mobile application called CARL Touch to a micro frontend architecture. It presents a migration process involving three steps: 1) analysis of the monolithic codebase, 2) identification of potential micro frontends, and 3) transformation of the codebase to implement the identified micro frontends. Previous experiments at Berger-Levrault involving two teams migrating CARL Touch provided insights. The proposed process uses static and dynamic analysis, code visualization and clustering techniques to help identify optimal micro frontends and transform the codebase in a semi-automated manner.

1 of 35
Download to read offline
1 1 1 Migration process from monolithic to micro frontend architecture in mobile applications International Workshop on Smalltalk Technologies 2023 Lyon 31/08/2023 Quentin Capdepon, Nicolas Hlad, Abdelhak-djamel Seriai and Moustapha Derras
2 2 2 Introduction ▪ This presentation consists of three main sections: ▪ Contextual Background and Problem Statement → This section provides the context surrounding our work and the issues we are addressing. ▪ Previous Experiments at Berger-Levrault → In this section, we explain the implementations and experiments conducted at Berger-Levrault, along with their corresponding results ▪ Proposed Problem Solution → In this section, we present our proposed migration process to resolve the identified problem.
3 3 3 Contextual Background and Problem Statement 01
4 4 4 CARL Touch Introduction Cross-Platform Computerized Maintenance Management System (CMMS) Application for iOS and Android
5 5 5 Industrial issues encountered Introduction ▪ A maintenance and issue Maintenance QR Scan Report incident Technician Security
6 6 6 Industrial issues encountered Introduction ▪ A customisation of the app issue APK APK V.2 Update … …
7 7 7 What architecture to solve the prior issues ? Introduction ▪ Our current architecture One same monolith for everyone
8 8 8 What architecture to solve the prior issues ? Introduction ▪ Our current architecture One same monolith for everyone ▪ Our target architecture A modulable architecture to obtain tailored apps
9 9 9 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Figure 1 : Organisation in Verticals [1]
10 10 10 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Figure 1 : Organisation in Verticals [1] Benefits : - Incremental upgrades, - Simple and decoupled codebases, - Independent deployement, - Autonomous teams,
11 11 11 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Benefits : - Incremental upgrades, - Simple and decoupled codebases, - Independent deployement, - Autonomous teams, Downsides : - Payload size, - Environment differences, - Operational and governance complexity. Figure 1 : Organisation in Verticals [1]
12 12 12 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
13 13 13 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
14 14 14 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
15 15 15 Engineering & Research questions Research question ▪ Topic 1 : Engineering questions ▪ How to achieve MFE principle on mobile ? ▪ Topic 2 : Research questions ▪ How to migrate monolith architecture to micro frontend for mobile applications ?
16 16 16 Micro frontend on mobile 02
17 17 17 BL MicroFrontendShell Our mobile micro frontend shell
18 18 18 BL MicroFrontendShell Our mobile micro frontend shell
19 19 19 BL MicroFrontendShell Our mobile micro frontend shell
20 20 20 BL MicroFrontendShell Our mobile micro frontend shell
21 21 21 BL MicroFrontendShell Our mobile micro frontend shell
22 22 22 Observation: Developers encounter difficulties in identifying 'Optimal' MFEs and struggle implementing them from the monolith. Goal : Developping a semi-automated migration process from monolith to MFE Experimentations Empirical experimentation with Carl Touch ▪ Two teams are responsible for migrating the Carl Touch monolith to MFE using our Shell (in Flutter). ▪ We obtain 2 different architectures
23 23 23 Migration process 03
24 24 24 Our migration process monolithic MFEs
25 25 25 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel monolithic 1.Analysis MFEs
26 26 26 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making monolithic 1.Analysis 2.Identification MFEs
27 27 27 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making 3. Transformation 1. Violation resolver to solve generic violation 2. Transformation Rules for MFE Dart code generation monolithic 1.Analysis 2.Identification 3.Transformation MFEs
28 28 28 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making 3. Transformation 1. Violation resolver to solve generic violation 2. Transformation Rules for MFE Dart code generation monolithic 1.Analysis 2.Identification 3.Transformation MFEs
29 29 29 Visualization : Navigation graph Benefits : - Visual help on the application Navigation flow, - User-Centric information for a transformation, - Lateral navigation identify good MFE candidat, - Forward navigation highlight inusable candidat.
30 30 30 Visualization : Navigation graph Benefits : - Visual help on the application Navigation flow, - User-Centric information for a transformation, - Lateral navigation identify good MFE candidat, - Forward navigation highlight inusable candidat. Downsides : - Not a clustering - Require a dynamic and a static code analysis, - Missing information on the communication.
31 31 31 Visualization : Git Contribution Analysis Benefits : - Proposition of a team clustering, - Provide insight on the best MFE suited team, - Allocation of Dedicated Teams for Each MFE, - Improved assessment of team profiles.
32 32 32 Visualization : Git Contribution Analysis Benefits : - Proposition of a team clustering, - Provide insight on the best MFE suited team, - Allocation of Dedicated Teams for Each MFE, - Improved assessment of team profiles. Downsides : - Not a codebase clustering, - Requirement for Prior MFE Clustering.
33 33 33 Conclusion
34 34 34 Bibliography M. Geers, Micro Frontends in Action, manning publications ed., 2020. URL: https://livebook.manning.com/book/micro- frontends-in-action/. [1] https://micro-frontends.org/ by M. Geers S. Peltonen, La. Mezzalira, D. Taibi, Motivations, benefits, and issues for adopting microfrontends: A multivocal literature review, Information and Software Technology 136 (2021) 106571. doi:10.1016/j.infsof.2021.106571. https://martinfowler.com/articles/micro-frontends.html - Cam Jackson in 19 June 2019 E. Braz, Flutter micro app - a package to speed up the creation of micro frontend(or independent features) structure in flutter applications, 2022. URL: https://web.archive.org/web/20220804142023/https://flutterrepos.com/lib/emanuel-braz-flutter_micro_app Ionic, Micro frontend architecture for mobile web apps - ionic portals, 2022. URL: https://ionic.io/portals. D. Taibi, L. Mezzalira, Micro-frontends: Principles, implementations, and pitfalls, ACM SIGSOFT Software Engineering Notes 47 (2022) 25–29. doi:10.1145/3561846.3561853. L. Mezzalira, Microfrontends anti-patterns: Seven years in the trenches, 2022. URL: https://www.infoq.com/presentations/microfrontend-antipattern/. [2] [3] [4] [5] [6] [7] [8]
35 35 35 Bibliography M. Brito, J. Cunha, J. a. Saraiva, Identification of microservices from monolithic applications through topic modelling, in: Proceedings of the 36th Annual ACM Symposiumon Applied Computing, SAC ’21, Association for Computing Machinery, New York, NY, USA, 2021, p. 1409–1418. URL: https://doi.org/10.1145/3412841.3442016. doi:10.1145/3412841.3442016. F. Auer, V. Lenarduzzi, M. Felderer, D. Taibi, From monolithic systems to microservices: An assessment framework, Information and Software Technology 137 (2021) 106600. doi:10.1016/j.infsof.2021.106600. A. Bucchiarone, N. Dragoni, S. Dustdar, S. T. Larsen, M. Mazzara, From monolithic to microservices: An experience report from the banking domain, IEEE Softw. 35 (2018) 50–55. doi:10.1109/MS.2018.2141026. R. Capuano, H. Muccini, A systematic literature review on migration to microservices: a quality attributes perspective, in: IEEE 19th International Conference on Software Architecture Companion, ICSA Companion 2022, Honolulu, HI, USA, March 12-15, 2022, IEEE, 2022, p. 120–123. URL: https://doi.org/10.1109/ICSA- C54293.2022.00030. doi:10.1109/ICSA-C54293.2022.00030. F. Freitas, A. Ferreira, J. Cunha, Refactoring java monoliths into executable microservicebased applications, in: C. D. Vasconcellos, K. G. Roggia, P. Bousfield, V. Collereii, J. P.Fernandes, M. Pereira (Eds.), SBLP’21: 25th Brazilian Symposium on Programming Languages, Joinville, Brazil, 27 September 2021 - 1 October 2021, ACM, 2021, p. 100– 107. URL:https://doi.org/10.1145/3475061.3475086. doi:10.1145/3475061.3475086. [9] [10] [11] [12] [13]

More Related Content

Migration process from monolithic to micro frontend architecture in mobile applications

  • 1. 1 1 1 Migration process from monolithic to micro frontend architecture in mobile applications International Workshop on Smalltalk Technologies 2023 Lyon 31/08/2023 Quentin Capdepon, Nicolas Hlad, Abdelhak-djamel Seriai and Moustapha Derras
  • 2. 2 2 2 Introduction ▪ This presentation consists of three main sections: ▪ Contextual Background and Problem Statement → This section provides the context surrounding our work and the issues we are addressing. ▪ Previous Experiments at Berger-Levrault → In this section, we explain the implementations and experiments conducted at Berger-Levrault, along with their corresponding results ▪ Proposed Problem Solution → In this section, we present our proposed migration process to resolve the identified problem.
  • 4. 4 4 4 CARL Touch Introduction Cross-Platform Computerized Maintenance Management System (CMMS) Application for iOS and Android
  • 5. 5 5 5 Industrial issues encountered Introduction ▪ A maintenance and issue Maintenance QR Scan Report incident Technician Security
  • 6. 6 6 6 Industrial issues encountered Introduction ▪ A customisation of the app issue APK APK V.2 Update … …
  • 7. 7 7 7 What architecture to solve the prior issues ? Introduction ▪ Our current architecture One same monolith for everyone
  • 8. 8 8 8 What architecture to solve the prior issues ? Introduction ▪ Our current architecture One same monolith for everyone ▪ Our target architecture A modulable architecture to obtain tailored apps
  • 9. 9 9 9 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Figure 1 : Organisation in Verticals [1]
  • 10. 10 10 10 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Figure 1 : Organisation in Verticals [1] Benefits : - Incremental upgrades, - Simple and decoupled codebases, - Independent deployement, - Autonomous teams,
  • 11. 11 11 11 What is a micro frontend architecture ? State of the art ▪ The MFE architecture Benefits : - Incremental upgrades, - Simple and decoupled codebases, - Independent deployement, - Autonomous teams, Downsides : - Payload size, - Environment differences, - Operational and governance complexity. Figure 1 : Organisation in Verticals [1]
  • 12. 12 12 12 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
  • 13. 13 13 13 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
  • 14. 14 14 14 How does the MFE architecture work? State of the art Figure 2 : The three fundamental concepts of Micro Frontend [1]
  • 15. 15 15 15 Engineering & Research questions Research question ▪ Topic 1 : Engineering questions ▪ How to achieve MFE principle on mobile ? ▪ Topic 2 : Research questions ▪ How to migrate monolith architecture to micro frontend for mobile applications ?
  • 22. 22 22 22 Observation: Developers encounter difficulties in identifying 'Optimal' MFEs and struggle implementing them from the monolith. Goal : Developping a semi-automated migration process from monolith to MFE Experimentations Empirical experimentation with Carl Touch ▪ Two teams are responsible for migrating the Carl Touch monolith to MFE using our Shell (in Flutter). ▪ We obtain 2 different architectures
  • 25. 25 25 25 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel monolithic 1.Analysis MFEs
  • 26. 26 26 26 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making monolithic 1.Analysis 2.Identification MFEs
  • 27. 27 27 27 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making 3. Transformation 1. Violation resolver to solve generic violation 2. Transformation Rules for MFE Dart code generation monolithic 1.Analysis 2.Identification 3.Transformation MFEs
  • 28. 28 28 28 Our migration process 1. Analysis 1. Dart Parser Development 2. Creation of a Famix Dart Importer 3. Creation and generation of a Dart Metamodel 2. Identification [9] [10] [11] [12] [13] 1. Creation of Roassal visualization for the model 2. Proposed Clustering Approach for the Model 3. Interactive Roassal Visualization to help Expert Decision Making 3. Transformation 1. Violation resolver to solve generic violation 2. Transformation Rules for MFE Dart code generation monolithic 1.Analysis 2.Identification 3.Transformation MFEs
  • 29. 29 29 29 Visualization : Navigation graph Benefits : - Visual help on the application Navigation flow, - User-Centric information for a transformation, - Lateral navigation identify good MFE candidat, - Forward navigation highlight inusable candidat.
  • 30. 30 30 30 Visualization : Navigation graph Benefits : - Visual help on the application Navigation flow, - User-Centric information for a transformation, - Lateral navigation identify good MFE candidat, - Forward navigation highlight inusable candidat. Downsides : - Not a clustering - Require a dynamic and a static code analysis, - Missing information on the communication.
  • 31. 31 31 31 Visualization : Git Contribution Analysis Benefits : - Proposition of a team clustering, - Provide insight on the best MFE suited team, - Allocation of Dedicated Teams for Each MFE, - Improved assessment of team profiles.
  • 32. 32 32 32 Visualization : Git Contribution Analysis Benefits : - Proposition of a team clustering, - Provide insight on the best MFE suited team, - Allocation of Dedicated Teams for Each MFE, - Improved assessment of team profiles. Downsides : - Not a codebase clustering, - Requirement for Prior MFE Clustering.
  • 34. 34 34 34 Bibliography M. Geers, Micro Frontends in Action, manning publications ed., 2020. URL: https://livebook.manning.com/book/micro- frontends-in-action/. [1] https://micro-frontends.org/ by M. Geers S. Peltonen, La. Mezzalira, D. Taibi, Motivations, benefits, and issues for adopting microfrontends: A multivocal literature review, Information and Software Technology 136 (2021) 106571. doi:10.1016/j.infsof.2021.106571. https://martinfowler.com/articles/micro-frontends.html - Cam Jackson in 19 June 2019 E. Braz, Flutter micro app - a package to speed up the creation of micro frontend(or independent features) structure in flutter applications, 2022. URL: https://web.archive.org/web/20220804142023/https://flutterrepos.com/lib/emanuel-braz-flutter_micro_app Ionic, Micro frontend architecture for mobile web apps - ionic portals, 2022. URL: https://ionic.io/portals. D. Taibi, L. Mezzalira, Micro-frontends: Principles, implementations, and pitfalls, ACM SIGSOFT Software Engineering Notes 47 (2022) 25–29. doi:10.1145/3561846.3561853. L. Mezzalira, Microfrontends anti-patterns: Seven years in the trenches, 2022. URL: https://www.infoq.com/presentations/microfrontend-antipattern/. [2] [3] [4] [5] [6] [7] [8]
  • 35. 35 35 35 Bibliography M. Brito, J. Cunha, J. a. Saraiva, Identification of microservices from monolithic applications through topic modelling, in: Proceedings of the 36th Annual ACM Symposiumon Applied Computing, SAC ’21, Association for Computing Machinery, New York, NY, USA, 2021, p. 1409–1418. URL: https://doi.org/10.1145/3412841.3442016. doi:10.1145/3412841.3442016. F. Auer, V. Lenarduzzi, M. Felderer, D. Taibi, From monolithic systems to microservices: An assessment framework, Information and Software Technology 137 (2021) 106600. doi:10.1016/j.infsof.2021.106600. A. Bucchiarone, N. Dragoni, S. Dustdar, S. T. Larsen, M. Mazzara, From monolithic to microservices: An experience report from the banking domain, IEEE Softw. 35 (2018) 50–55. doi:10.1109/MS.2018.2141026. R. Capuano, H. Muccini, A systematic literature review on migration to microservices: a quality attributes perspective, in: IEEE 19th International Conference on Software Architecture Companion, ICSA Companion 2022, Honolulu, HI, USA, March 12-15, 2022, IEEE, 2022, p. 120–123. URL: https://doi.org/10.1109/ICSA- C54293.2022.00030. doi:10.1109/ICSA-C54293.2022.00030. F. Freitas, A. Ferreira, J. Cunha, Refactoring java monoliths into executable microservicebased applications, in: C. D. Vasconcellos, K. G. Roggia, P. Bousfield, V. Collereii, J. P.Fernandes, M. Pereira (Eds.), SBLP’21: 25th Brazilian Symposium on Programming Languages, Joinville, Brazil, 27 September 2021 - 1 October 2021, ACM, 2021, p. 100– 107. URL:https://doi.org/10.1145/3475061.3475086. doi:10.1145/3475061.3475086. [9] [10] [11] [12] [13]