Optimizing Asset Downloads for Micro UIs, Lessons from Modernizing Teller System

Application upgrades are inevitable in the digital world, as is the difficulty of effectively informing end users of them. In distributed systems, coordinating asset downloads for updates can be a major bottleneck, particularly for systems with thousands of users spread across geographically separated locations.

A Micro UI architecture is used to modernize our new teller system,to guarantee flexibility, scalability, and adaptability. By dividing the frontend into smaller, separate microservices, this method enables development teams to work more independently, update more quickly, and debug more easily. Since each Micro UI is created, implemented, and maintained separately, it fits in nicely with our need to quickly adjust to the changing needs of banking operations.

Our New teller system is powered by a platform that combines:

• For the frontend, Vue.js was selected due to its component-based architecture, simplicity, and responsiveness.
• For the backend, Golang provides excellent performance and economical use of resources.
• For deployment, OpenShift Container Platform (OCP) offers a scalable, containerized architecture appropriate for on-premise settings.

Even though this architecture has many benefits, it also has particular difficulties for updating and administering more than 6000 branches, each of which has five to ten users. I’ll discuss how downloading micro UI elements operates in this post, along with common problems and ways to make the process more efficient for big systems.

How Micro UI Asset Downloads Operate

Frontend frameworks such as Vue.js are commonly used by micro UIs to provide a scalable and modular user experience. Users must download the updated assets (JavaScript, CSS, and other static files) whenever an update is released in order for the program to run properly. The procedure is broken down as follows:

▹ First Load

All required resources are downloaded from the server by the user’s browser when they first access the application. Typically, these resources are locally stored for quicker access in the future.

▹ Deployment of Updates:

Any assets that have been altered during updates are detected (using hashes or file versioning) and marked for download. If necessary, the user’s browser downloads new files and checks the cache.

▹ Difficulties at Scale:

Deploying updates might cause a network surge when there are thousands of branches and users since several users may request the same updated assets at once.

Pain Points

In a distributed system like this, controlling asset downloads poses a number of difficulties:

1. Network Congestion: When more than 6000 branches are deployed simultaneously, a spike in download requests strains the network’s capacity and creates delays.
2. Legacy Dependencies: The transfer to contemporary systems may be made more difficult by older systems’ reliance on legacy components for asset delivery.
3. User Disruption: Users may experience delays or insufficient functionality if assets are not downloaded quickly, which could affect productivity.
4. On-Premise Limitations: On-premise deployments encounter more difficulties in effectively disseminating updates than cloud-hosted systems, which can take advantage of Content Delivery Networks (CDNs).

Strategies to Optimize Asset Downloads

To tackle these challenges, we explored and implemented several strategies:

Delta updates (Partial Asset Downloads)

• Use delta updates to download only the parts of the files that have changed.​
• Use a tool or process that calculates the difference (delta) between the old and new versions of the assets​
• When a new update is deployed, only the difference is sent to each branch, minimizing the total data to be downloaded.

Background Asset Preloading​

• Allow the system to download the update in the background during periods of low activity​
• Service workers or background scripts handle the downloading of assets without interrupting the user’s workflow​

Feature Flag

• Use feature flags to control which branches receive the updates. Instead of deploying the updates to all branches at once, roll them out in batches​
• Feature flags also allow you to enable or disable features dynamically without redeploying the whole application, reducing the need for downloading full asset packages

Conclusion

It’s difficult to manage asset downloads for micro user interfaces at scale, particularly in systems with large on-premise installations. However, this process can be optimized and flawless user experiences can be guaranteed using careful tactics like service worker caching, phased rollouts, delta updates, and feature flags.

I’d be interested in knowing your comments if you’re facing comparable difficulties or looking into ways to improve your system. Let’s work together and exchange ideas to improve the effectiveness of large-scale deployments.