"Micro frontends: Unbelievably true life story", Dmytro Pavlov

A real life story about the experience of using Micro frontends in an existing Enterprise product. Problems and their solutions on the way from the integration of a separate component to an extensible No-code platform.

3. 2019 2020 2023 2024
AGENDA
... ...
Context
Micro frontends motivation
Issues & solutions
Carry outs
1.
2.
3.
4.

4. 2019 2020 2023 2024
CONTEXT
... ...
Team: 100+ members
Application
Extensible / Customizable 
No-​Code Platform
Monolith
Tech stack
SPA
Custom JS Framework
AMD Architecture
MVVM Pattern

5. 2019 2020 2023 2024
ISSUES
... ...
Maintenance
Optimizations
New features
Bugs

6. 2019 2020 2023 2024
ISSUES
... ...
Specific knowledge required
Internal community limitation
Documentation
Hiring issues

7. 2019 2020 2023 2024
CHANGE TECH STACK ISSUES
... ...
New tech stack issues
Existing functionality and plans
Ability to integrate new techs in monolith app
Lack of expertise & experience
Educate big team

8. 2019 2020 2023 2024
MICRO FRONTENDS: General Info
... ...
Benefits
Incremental upgrades
Decoupled codebases
Independent deployment

9. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Preliminary work
Identifу a suitable task
Make a PoC
Be ready to face issues

10. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Created Component with Angular
Angular
Cmp

11. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Packed as Web-​component
Web Cmp
Angular
Cmp

12. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Packed as Web-​component
import {Component, Injector}  from '@angular/core';
import {createCustomElement}  from '@angular/elements';
//...
@Component({
 //...
})
export class AppComponent {
constructor(
injector: Injector,
 public forecast: ForecastComponent,
) {
 // Convert `ForecastComponent` to a custom element.
 const ForecastComponent = createCustomElement(ForecastComponent, 
{injector});
 // Register the custom element with the browser.
customElements.define( 'forecast', ForecastComponent);
}
}

13. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Used proxy for integration into existing App
Proxy Cmp
Web Cmp
Angular
Cmp

14. 2019 2020 2023 2024
MICRO FRONTENDS: First steps
... ...
Results
Unlocked new tech injection flow
Gained new expertise & experience
Faced new issues
Proxy Cmp
Web Cmp
Angular
Cmp
Proxy Cmp
Web Cmp
Angular
Cmp
Proxy Cmp
Web Cmp
Angular
Cmp

15. 2019 2020 2023 2024
MICRO FRONTENDS: ISSUES
... ...
Issues
Each component loads own deps
Increases traffic
Downgrades performance
Proxy Cmp
Web Cmp
Angular
Cmp
Angular, RxJS
<code>
Component
<code>

16. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
The externals configuration option 
provides a way of excluding
dependencies from the output bundles.
Instead, the created bundle relies on
that dependency to be present in
application environment.
Angular, RxJS
<code>
Component
<code>
Component
<code>
Component
<code>

17. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
Build external deps
"ng-​core": {
 "builder": "ngx-​ build-​ plus:browser",
 "options": {
 "outputPath": "dist/libs/studio-​ enterprise/util/ng-​ core",
 //...
 "scripts": [
 //...
 "node_modules/rxjs/dist/bundles/rxjs.umd.js" ,
 "dist/@angular/core/bundles/core.umd.js" ,
 "dist/@angular/common/bundles/common.umd.js" ,
 "dist/@angular/common/bundles/common-​ http.umd.js",
 "dist/@angular/compiler/bundles/compiler.umd.js" ,
 "dist/@angular/elements/bundles/elements.umd.js" ,
 "dist/@angular/platform-​ browser/bundles/platform-​ browser.umd.js",
 "dist/@angular/platform-​ browser-​ dynamic/bundles/platform-​ browser-​ dynamic.umd.js"
],
},
 //...
},
Angular, RxJS
<code>

18. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
External deps files
Angular, RxJS
<code>
Component
<code>
Component
<code>
Component
<code>

19. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
Build component
"forecast": {
 "builder": "ngx-​ build-​ plus:browser",
 "options": {
 "outputPath": "dist/libs/studio-​ enterprise/forecast/" ,
 //...
 "extraWebpackConfig": "libs/studio-​ enterprise/util/ng-​ core/webpack.externals.js"
},
 //...
},
Component
<code>
"externals": {
 "rxjs": "rxjs",
 "@angular/core": true,
 "@angular/common": true,
 "@angular/common/http" : true,
 "@angular/platform-​ browser": true,
 "@angular/platform-​ browser-​ dynamic": true,
 "@angular/compiler": true,
 "@angular/elements": true,
}
1
2

20. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
Component files

21. 2019 2020 2023 2024
MICRO FRONTENDS: Externals
... ...
Optimization results
Angular, RxJS
<code>
Component
<code>
Component
<code>
Component
<code>
~1MB

22. 2019 2020 2023 2024
MICRO FRONTENDS: Evolution
... ...
Since that time
Gained experience & expertise
Switched to new tech stack
for new features

23. 2019 2020 2023 2024
MICRO FRONTENDS: Evolution
... ...
New issues
Increased Components
code size
Internal libs were not shared
between components
Angular
RxJS
<code>
Component
Dep4 Dep5
Dep1 Dep2 Dep3
Component
Dep4
Dep1 Dep2
Component
Dep5
Dep1 Dep3

24. 2019 2020 2023 2024
MICRO FRONTENDS: MF
... ...
Module Federation is a feature introduced
in Webpack 5 that enables dynamic and 
decentralized sharing of JavaScript
modules between different
Webpack-​ bundles at runtime.
Component
<code>
Dep4 Dep5
Dep1 Dep2 Dep3
Component
<code>
Dep4
Dep1 Dep2
Component
<code>
Dep5
Dep1 Dep3Dep2

25. 2019 2020 2023 2024
MICRO FRONTENDS: MF
... ...
Build config
withModuleFederationPlugin({
name: 'forecast_component',
filename: 'forecast-​ component.js',
exposes: {
 './Main': path.join(__dirname, './src/main.ts'),
},
shared: [
 '@creatio/sdk/util/common-​ types',
 '@creatio/sdk/util/utils' ,
 '@creatio/studio-​ enterprise/ui/components' ,
 '@creatio/studio-​ enterprise/feature/components-​ preprocessors',
 '@creatio/studio-​ enterprise/ui/cdk',
 '@creatio/studio-​ enterprise/ui/schema' ,
 '@creatio/studio-​ enterprise/ui/data-​ grid-​ cdk',
 '@creatio/studio-​ enterprise/ui/view',
 '@creatio/studio-​ enterprise/feature/schema-​ view',
 '@creatio/studio-​ enterprise/util/model' ,
 '@creatio/studio-​ enterprise/util/low-​ code',
],
});
Component
<code>
DepNDep1 ...

26. 2019 2020 2023 2024
MICRO FRONTENDS: MF
... ...
Build result
Remote entry
Dependency
Component
<code>
DepNDep1 ...

27. 2019 2020 2023 2024
MICRO FRONTENDS: MF
... ...
Loading schema
1
2

28. 2019 2020 2023 2024
MICRO FRONTENDS: MF
... ...
Optimization results
Component Before, Mb After, Mb %
Forecast 9.2 2.7 71%
Analytics Dashboard 5.6 0.05 99%
Campaign Gallery 3.11 0.05 99%
Omnichannel Messaging 2.15 0.34 84%
... ... ... ...

29. 2019 2020 2023 2024
MICRO FRONTENDS: Further plans
... ...
Plans for the future
Split libs into a smaller chunks for more advanced
lazy loading
Optimize build process

30. 2019 2020 2023 2024
MICRO FRONTENDS: Carry outs
... ...
Micro frontends
Enabled possibility and added flexibility in using new
technologies
Led to new issues

31. Join Creatio