Skip to content

Commit b3325ab

Browse files
authored
feat: create "Styling your legacy Micro Frontends" post (#147)
1 parent 9ed9baa commit b3325ab

File tree

5 files changed

+146
-1
lines changed

5 files changed

+146
-1
lines changed

angular.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
"node_modules/prismjs/components/prism-ruby.min.js",
6363
"node_modules/prismjs/components/prism-javascript.min.js",
6464
"node_modules/prismjs/components/prism-java.min.js",
65-
"node_modules/prismjs/components/prism-markup.min.js"
65+
"node_modules/prismjs/components/prism-markup.min.js",
66+
"node_modules/prismjs/components/prism-scss.min.js"
6667
],
6768
"server": "src/main.server.ts"
6869
},
Loading
Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Styling your legacy Micro Frontends
2+
3+
Different approaches to style legacy Micro Frontends.
4+
5+
![](assets/banner.png)
6+
7+
Authors: Pablo Villoslada Puigcerber
8+
Date: unpublished
9+
Category: frontend
10+
11+
tags: angular,frontend,micro-frontends,module-federation,sass,web
12+
13+
---
14+
15+
## Introduction
16+
17+
Using Micro Frontends you shouldn't have any problem styling them, since the remote applications inherit the styles from the shell app.
18+
19+
But what if you want to mix different frameworks like Bootstrap 4 and Bootstrap 5, which is the case when [maintaining legacy code](2024/05/15/maintaining-legacy-code-with-micro-frontends). In such cases, there are two options to consider:
20+
* Use a single theme and address styling issues individually
21+
* Combine two themes into one, leading to duplication of styles
22+
23+
Each option has its own advantages and drawbacks, so it's important to delve deeper into the details.
24+
25+
## One theme
26+
27+
This method requires more effort to maintain as there is no straightforward approach. You'll have to visually scan the app and fix styling problems one by one, including new CSS code as you go.
28+
29+
Some of these problems are harder to solve as you have to deal with overriding the styles of the shell app, and the final look might not be pixel perfect.
30+
31+
Still, the reward for this effort is a smaller bundle while you keep mastering CSS.
32+
33+
### Bootstrap changes from 4 to 5
34+
35+
One good place to start looking is the official Bootstrap [migration](https://getbootstrap.com/docs/5.0/migration/) changelog from 4 to 5, but don't worry, because not necessarily all the changes apply to your situation.
36+
37+
In the Backbase scenario, the renaming of the "screen reader" classes to "visually hidden" hits hard as you start seeing things that should not be on the screen, but at the same time is quite easy to solve.
38+
39+
### Set-up
40+
41+
1. Start by isolating the changes in your remote `AppComponent`.
42+
```markup
43+
<div class="angular17-theme">
44+
<router-outlet></router-outlet>
45+
</div>
46+
```
47+
48+
2. In the `styles.scss` of your shell app, use the same class you added to the remote `AppComponent`.
49+
50+
```scss
51+
@import '@backbase/backbase-theme-business-preset/scss/main';
52+
53+
.angular17-theme {}
54+
```
55+
56+
3. Now you can start fixing issues; for example, for the mentioned new "visually hidden" classes, you can just extend the old "screen reader" ones.
57+
```scss
58+
.angular17-theme {
59+
.visually-hidden {
60+
@extend .sr-only;
61+
}
62+
}
63+
```
64+
65+
## Two themes
66+
67+
Setting up this approach can be quite challenging as it requires including both Bootstrap versions and, in the Backbase scenario, incorporating both versions of the UI-Ang library along with having two themes.
68+
69+
> **_NOTE:_** Backbase [design system](https://designsystem.backbase.com/) is a collection of guidelines, tools, and resources to help build superior banking experiences. The `@backbase/ui-ang` library exposes the UI components for web and since the version 9 it depends on Bootstrap 5.
70+
71+
Including coupled packages results in a significant amount of code duplication, but once it's set and configured you can nearly forget about making further changes to your CSS.
72+
73+
### Set-up
74+
75+
1. Create a `/themes` folder at the root level.
76+
2. Go to the newly created folder and install UI-Ang with its dependencies.
77+
```bash
78+
npm i @backbase/ui-ang@10 ngx-quill@16
79+
```
80+
3. Copy `/backbase-theme-preset-template` from the `/node_modules/@backbase/ui-ang/dist` to the `/themes` folder and name it `angular17-theme`.
81+
4. Update the `/shell/src/styles.scss` to include the new theme.
82+
```scss
83+
@import '@backbase/backbase-theme-business-preset/scss/main';
84+
85+
.angular17-theme {
86+
@import '../../themes/angular17-theme/scss/main';
87+
}
88+
```
89+
5. Don't forget to update your remote `AppComponent`.
90+
```markup
91+
<div class="angular17-theme">
92+
<router-outlet></router-outlet>
93+
</div>
94+
```
95+
96+
In an ideal world this should be enough to have both themes working side by side, but the compiler throws some errors because of the incompatibilities of using two Sass versions.
97+
98+
![](assets/sass_error_bootstrap_buttons.jpg)
99+
100+
`"sass"` and `"sass-loader"` are dependencies of `"@angular-devkit/build-angular"` so there is not much you can do as the legacy app must stay in Angular 12. Then it's time for you to update manually the source scss files.
101+
102+
1. Copy the `/scss` folder from `/themes/node_modules/bootstrap` to a new `/themes/bootstrap5` directory.
103+
2. Do the same for UI-Ang copying the `/scss` and `/assets` folder from `/themes/node_modules/@backbase/ui-ang` to a new `/themes/ui-ang-10` directory.
104+
3. Search for all the references to bootstrap imports inside `/themes/ui-ang-10` and replace them to point to the custom `/themes/bootstrap5` one. For example, `@import "bootstrap/scss/mixins";` is now `@import "../../../bootstrap5/scss/mixins";`. Make sure to adjust all the relative paths.
105+
4. Now do the same inside `/themes/angular17-theme` and replace the references to UI-Ang. For example, `@import "~@backbase/ui-ang/scss/1-variables/variables";` with `@import "../../../ui-ang-10/scss/1-variables/variables";`.
106+
5. Check that the compiler still throws the same error as before starting with the manual update, or fix the imports otherwise.
107+
108+
In the `/themes/bootstrap5/scss/mixins/_buttons.scss` the offending line is `--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};` so you need to comment it out. This makes the build pass but throws a new error.
109+
![](assets/sass_error_accounts_list.jpg)
110+
111+
In the `/themes/ui-ang-10/scss/5-components/journeys/accounts-journey/_accounts-accounts-list.scss` the failing block it's:
112+
```scss
113+
$accounts-list-cards-column-min-width: max(
114+
$accounts-list-card-min-width,
115+
calc(100% / $accounts-list-cards-max-columns)
116+
);
117+
```
118+
And you can replace it with `$accounts-list-cards-column-min-width: max(18.5rem, 25%);`.
119+
120+
After all this steps you shall be able to see the app compiling. Run also the `npm run build` for precaution. And if there are new errors you have to fix them by either commenting the bad lines or finding alternative code that works.
121+
122+
## Conclusion
123+
124+
You should have a better idea now of both approaches but choosing one or another depends on the use case, time constraints, and developer experience; although a summary of pros and cons for sure helps to decide.
125+
126+
### One theme
127+
128+
Pros:
129+
* Easy setup
130+
* Lightweight CSS bundle
131+
132+
Cons:
133+
* Difficult to maintain
134+
* Requires more meticulous work and is time-consuming
135+
136+
### Two themes
137+
138+
Pros:
139+
* Easy to maintain
140+
141+
Cons:
142+
* Challenging setup
143+
* Large CSS bundle with lots of duplicates
144+
* Fixes for compilation errors might feel hacky

0 commit comments

Comments
 (0)