Microfrontends Together, But Separately™ at AarhusJS by Niclas Skødt Gleesborg, Bankdata

"Microfrontends Together, But Separately™" presented at AarhusJS in December, 2025 by Niclas Skødt Gleesborg from Bankdata.

"Bankdata’s frontend landscape is made up of many independent apps— yet to our customers, it all feels like one experience. This talk explores how we make that possible through collaboration, shared components, and common data. It’s a story about scaling teamwork as much as technology — and how microfrontends become more powerful when they connect."

https://www.meetup.com/aarhusjs-meetup/events/311884214/

Transcript

1. P AGE 1 What they Before Transformation after know Bankdata is a bankcentral, They are mobile and web apps They realize Bankdata isn’t just a traditional bank IT provider — it’s evolving into a modern software organization with shared building blocks and autonomous teams. Bankdata has a rich history, many frontends, uses hybrid apps, and has a strategy for sharing in microfrontends. believe It’s hard, if not impossible to create big products in frontend without compromising on principles They see that shared architecture and clear boundaries make it possible to scale without chaos — that autonomy and alignment can coexist. Interdependent development is possible in large products feel Interested, Ignorant The talk sparks a realization — “We can actually do this!” — turning curiosity into confidence and a shared sense of ownership. Curious, Informed, Energetic do Struggle with how to do microfrontends They understand that shared practices (e.g. common libraries, contracts, principles) enable independent teams to move fast together. Make changes that allow for Interdependent development
2. Microfrontends: Together, But Separately Niclas Skødt Gleesborg Senior Software Developer @ Bankdata 2. December 2025
4. P AGE P AGE 252 4
6. P AGE 6 3270 Mainframe - COBOL Image redacted
7. P AGE 7 Struts Portlets IBM Websphere - JAVA Native Apps IOS – ObjectiveC, Android - JAVA Image redacted
8. P AGE Someone, somewhere, probably. Why code thrice, when once works? 8 AI AI
9. P AGE 9 Capacitor AI
10. P AGE 10 Angular App Azure Cloud - Typescript Monolitich application
11. NgRx
12. P AGE P AGE DIFFICULT COORDINATION 12 COUPLING HUGE CODEBASE
13. P AGE Small, independent frontend apps that work together to form a larger application 13 MICROFRONTENDS ARE
15. Channels Private Business Advisory Web Android iOS Microfrontend A Microfrontend B Microfrontend C Microfrontend D Microfrontend E
16. P AGE Angular / Mozaic / Kirby 16
17. P AGE Angular Microfrontend 17 Ordinary Angular application - Bootstrapped with Mozaic - Exposes elements - Exposes APIs
18. Channel APIs Microfrontend A Microfrontend B Elements APIs APIs Elements
19. P AGE 19 video redacted
20. P AGE Account + Pay 20 Private APIs pay-mf account-mf account-list-api APIs pay-mf account-mf Open Modal Need accounts Here’s your accounts Here’s a list
31. P AGE Angular Microfrontend 31 Ordinary Angular application - Bootstrapped with Mozaic - Exposes elements - Exposes APIs
32. P AGE manifest.json 32
33. P AGE Element Registration 33
34. P AGE Implementation – Element usage 34
35. P AGE API Definition 35
36. P AGE 36 MF1 NPM Package MF2 Service
37. P AGE 37 CONTRACT != IMPLEMENTATION
38. P AGE 38 API Development Flow Create API Contract Deploy npm package to artifactory Publish MF with API implementati on The MF exposes its services Other MF’s can install the API contract
39. P AGE Microfrontend API Directory Structure 39
40. P AGE API Registration 40
41. P AGE API Usage 41
42. P AGE Multiple Microfrontend Development 42 mz attach recipe-fetcher-mf recipe-mf recipe-fetcher-mf-api Implements fetchRecipes() Has UI Depends on recipe- fetcher-mf-api - mz serve - tsc –watch in api folder - Point package to local build - mz attach
43. P AGE Versioning APIs 43
44. P AGE api/package.json 44
45. P AGE api/src/example-api.ts 45
46. P AGE src/app/example-api-v1.service.ts 46
47. P AGE src/app/example-api-v2.service.ts 47
48. P AGE src/app/example-api.service.ts 48
49. P AGE api/src/example-api.ts 49
50. P AGE Versioning of APIs 50 class ExampleAPIService V1: ExampleApiServiceV1 V2: ExampleApiServiceV2 … interface ExampleAPI ExampleApiV1 ExampleApiV2 … Implements as npm package exposed by microfrontend
51. P AGE Real example? 51
53. Manifest
54. API Definition
55. API Implementation
56. API Implementation V1
57. API Consumption
58. API Consumption
59. API Consumption
60. P AGE P AGE How many microfrontends? 60 252
61. P AGE To conclude 61 • Channels for each customer group • Hybrid app using Angular and Capacitor • Mozaic SDK and deployment • Shared elements and apis • Versioning of apis • Bankdata history • Real example Thank you! – Questions?