NAB publishes deep dive into UX platform NAB-X

Written by Ruby Hinchliffe
1st October 2020

National Australia Bank (NAB) has unveiled the first in-depth look at NAB-X, a multi-year project designed to take a more modular approach to application development.

The bank wants to use the self-built platform to roll out new features more quickly, at a reduced cost of delivery.

NAB calls these micro-frontends ‘mini-apps’

“We realised that decomposing our monolithic frontends into micro-frontends […] would be worth exploring,” the bank says in a recent Medium post.

First reported back in January 2019, NAB-X has now revealed the tools and patterns it has used to rebuild the user experience (UX) for both the banker and consumer-facing applications.

Building NAB-X

NAB calls these micro-frontends “mini-apps”. Part of NAB-X is the framework agnostic integration layer which makes these micro-frontends possible.

To create NAB-X, the bank says it had to come up with a series of “common standards and patterns to avoid fragmentation and ensure interoperability”.

The bank deemed the web components specification “the most viable approach” to a series of standards.

Web components are a set of web platform applications programme interfaces (APIs). They allow developers to create custom, reusable HTML tags which can then underpin web pages and web apps.

How mini-apps work

The shell acts as a library for mini-apps, ensuring each mini-app abides by common rules

Third-party product teams can build, test and deploy mini-apps in isolation. “But in order to be used by customers and bankers, they need to be integrated into a platform shell,” says NAB.

Whilst a mini-app performs all the user interface (UI) functions, the shell is what holds the branded content and loads all the various mini-apps so customers can use them.

Each mini-app can rest on multiple applications, regardless of the mini-app’s own hosting location. This is what makes them easily reusable.

The shells and mini-apps act a lot like an open-source platform like WordPress, which integrates with third-party themes and plug-ins.

The shell acts as a library for mini-apps, ensuring each mini-app abides by common rules. But it is each mini-app’s responsibility to keep itself updated, tested and offer specific customer support where necessary.

The tools

The bank is using an array of open-source technologies. This includes Docker, which the bank says will not limit it to specific cloud providers.

GraphQL is another, an open-source data query language for APIs, which reduces API calls and saves on bandwidth.

To integrate heavier micro-frontends into a native mobile app, the bank is using ReactNative. This is an open-source mobile application framework created by Facebook.

Calling on third-party developers

NAB says it has already experienced “an explosion of prototype mini-apps by a large number of teams”. But now, it’s calling on even more development input.

“We believe that we have a model that will allow third party developers and platforms to build capabilities that can be integrated into our shells to provide customers with [new] features,” it says.

Andrew Vaughan, a senior manager and engineer at NAB, says there are two paths for contribution. Either third-parties can help create NAB-X, or they can develop mini-apps for its shells.