![9
9
9
What is a micro frontend architecture ?
State of the art
▪ The MFE architecture
Figure 1 : Organisation in Verticals [1]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-9-320.jpg)
![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,](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-10-320.jpg)
![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]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-11-320.jpg)
![12
12
12
How does the MFE architecture work?
State of the art
Figure 2 : The three fundamental concepts of Micro Frontend [1]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-12-320.jpg)
![13
13
13
How does the MFE architecture work?
State of the art
Figure 2 : The three fundamental concepts of Micro Frontend [1]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-13-320.jpg)
![14
14
14
How does the MFE architecture work?
State of the art
Figure 2 : The three fundamental concepts of Micro Frontend [1]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-14-320.jpg)
![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](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-26-320.jpg)
![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](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-27-320.jpg)
![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](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-28-320.jpg)
![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]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-34-320.jpg)
![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]](https://image.slidesharecdn.com/06-migrationprocessfrommonolithictomicrofrontendarchitectureinmobileapplications-230915132714-8569dde9/85/Migration-process-from-monolithic-to-micro-frontend-architecture-in-mobile-applications-35-320.jpg)
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.
- 3. 3 3 3 Contextual Background and Problem Statement 01
- 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 ?
- 16. 16 16 16 Micro frontend on mobile 02
- 17. 17 17 17 BL MicroFrontendShell Our mobile micro frontend shell
- 18. 18 18 18 BL MicroFrontendShell Our mobile micro frontend shell
- 19. 19 19 19 BL MicroFrontendShell Our mobile micro frontend shell
- 20. 20 20 20 BL MicroFrontendShell Our mobile micro frontend shell
- 21. 21 21 21 BL MicroFrontendShell Our mobile micro frontend shell
- 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]