IBRebuild: ABN AMRO Banking Migration

Industry

Banking

Scale & Growth

Javascript

Angular/black/white

Vuedotjs

Axios

webpack

lit

bitbucket

npm

nodedotjs

Git

Eslint

Prettier

Related Engineering Services

Custom SoftwareMVP DevelopmentAI & Automation

Want this "build once, deploy many" foundation pre-built?

Skip the months-long build. The ready-made app catalogue ships token-driven, component-based foundations you can launch in days.

Landing + Catalog

Premium Furniture Catalog

Design-first, component-based store kit.

Free App

Dynamic CRUD App (Free)

Reusable, token-styled admin foundation.

Project Case Study

IBRebuild modernized ABN AMRO Bank's internet banking application, migrating it from an aging AngularJS codebase to Vue.js. The rebuild delivered a faster, component-driven UI while the legacy system kept running until the new frontend was proven in production.

• Strategic Executive
• Engineering Architecture

Business Impact & ROI

Strategic modernization: replacing an end-of-life AngularJS frontend was the right call before the framework's last-fixed state became a security and velocity liability. The incremental, zero-downtime approach protected customers and built engineering trust across the platform.

Strategic Playbook Features

Technical Deep-Dive

Incremental AngularJS-to-Vue migration: shared view layer first, feature-by-feature swap, coexistence with the legacy app, token-based session handling, and feature-flagged rollback. Business logic stayed in the API layer so the UI rewrite never re-opened banking rules.

Engineering Architecture: Migrating Internet Banking to Vue.js

IBRebuild modernized ABN AMRO's internet banking application, replacing an aging AngularJS codebase with Vue.js. The project was a controlled, incremental migration: the legacy system stayed live until the new frontend was proven in production.

1. Why a Rewrite Was the Right Call

AngularJS was hitting its end-of-life window, and the internet banking UI had compound performance and maintainability problems — heavy directives, scattered state, and templates that were painful to extend. Vue.js was chosen for its small runtime, gentle learning curve for new team members, and pragmatic Composition API that fits banking code-review workflows.

2. Migration Without a Big Bang

A hard cutover was not an option for a system customers use daily. Instead, the frontend was rebuilt module by module:

• Shared view layer first: routing, session, and layout shell.
• Feature-by-feature swap: each banking flow (account overview, transfers, statements) moved to the new app individually, validated against the production back end.
• Coexistence: during transition, both frontends served the same API, letting the team de-risk each migration slice before switching default routes.

The structure kept business logic in the API layer, so the frontend rewrite was about presentation and state, not re-verifying banking rules.

3. State, Security, and Consistency

• Centralized state: shared stores for session, accounts, and transactions keep views consistent and make data flow easy to review.
• Security by design: token-based session handling, request interception, and hardened error responses mirror the bank's existing API contracts, so no new attack surface was introduced by the UI layer.
• Zero-downtime release: deployments were served behind the same domain with feature gating; rollback meant flipping routes, not redeploying.

4. Outcome

The rebuild removed the framework lifecycle risk, cut bundle size and first-paint times on the primary screens, and gave ABN AMRO's frontend teams a modern baseline — the same engineering foundation later required by the Emerald Design System rollout.

Want this engineering approach for your product?

Book a 25-min call to scope it with a senior architect, or browse ready-made foundations to start in days.

Architecting Your Success

A proven, four-stage framework to stabilize your technical debt.

01

Discovery Call

Technical diagnosis and scaling strategy.

Diagnosis

02

Architecture Audit

Deep dive into infra and technical debt.

Analysis

03

Fixed-Scope Roadmap

Detailed milestone-based blueprint.

Strategy

04

Senior Execution

High-integrity build & velocity.

Velocity

Need a similar strategic architecture?

If this project aligns with your current bottlenecks, let's discuss how to apply these same principles to your business.

PreviousMarketplace Booking Platform

Portfolio

NextEmerald Design System