Bank Albilad

Modernization to New Tech Stack

Current Technology Stack

• Struts2 framework for backend MVC.
• jQuery for DOM manipulation and AJAX calls.
• Custom JavaScript for additional functionalities.
• CSS for styling

What's the problem?

• No reusability in CSS and JS
• No state management among components and pages
• Performance issues
• hard to debug
• Inconsistencies among UI elements
• Repeatative work again and again

Our Goals

• Enhance user experience
• Easy code maintainability
• leverage modern technology stack
• Enhanced Performance  
• Independent isolated Apps (Micro frontends) 

What we will achieve

• More control over the UI 
• Reusability of UI components (Headless UI)
• Reusable business logic
• Continuous evolving technologies 
• Extensive support & huge community

• Custom UI library for Bank Albilad theme
• Use across all Apps (Code once use everywhere)
• Uniform and consistent UI (Too many different UI elements) 
• Based on Well tested UI frameworks 

Our own UI Library

(Design System)

Top UI Libraries

• Material Design
• Ant Design 

• Material Design
• Ant Design
• Ant Design Mobile (For React Native)

Incremental Migration

Preparation:
Identify key functionalities of the existing app.
Document dependencies, APIs, and business logic.

Migration:

• Incremental migration (piece by piece replacement) instead of big bang migration (complete rewrite)

• Prioritize features/pages to migrate based on complexity and usage

• Create a minimal React app and host it alongside the existing Struts2 app

Migration

• Use iframe or subpath routing to embed new features/pages gradually

• Identify reusable components and gradually build React versions of these components and replace jQuery

• Ensure backward compatibility during the transition.

• Document the new architecture, coding standards, and migration steps

  
  Subpath routing involves serving new React features/pages from specific paths within the existing app. For example, you can serve a React-based feature at bank.com/react-feature.

Add ons

• Introducing GitHub/gitlab:
  • untouchable Master branch
  • Proper commit history and easy rollbacks
  • super quick & easy tracking of changes 
• Unit testing:
  • Will save hours of debugging 
  • more maintainable code 

Thanks 

M.Ahmed G.Murtaza

Title Text

Preparation:
Identify key functionalities of the existing app.
Document dependencies, APIs, and business logic.

Migration strategy:
Incremental migration (piece by piece replacement) instead of big bang migration (complete rewrite)
Prioritize features/pages to migrate based on complexity and usage
Create a minimal React app and host it alongside the existing Struts2 app
Use iframe or subpath routing to embed new features/pages gradually
Identify reusable components and gradually build React versions of these components and replace jQuery
Ensure backward compatibility during the transition.
Document the new architecture, coding standards, and migration steps

Subpath routing involves serving new React features/pages from specific paths within the existing app. For example, you can serve a React-based feature at bank.com/react-feature.

Tailwind:
11645825 weekly downloads 

React:
28234726
Facebook.com
GitHub.com
paypal.com
Alibaba.com
aiexpress.com
twitter.com
chatgpt.com
slack.com
shopufy.com

typescript
64725153
Facebook.com
GitHub.com
paypal.com
Alibaba.com
aiexpress.com
twitter.com
chatgpt.com
slack.com
shopufy.com

design system:
Google: https://m3.material.io/
Microsoft: https://fluent2.microsoft.design/
Alibaba: https://ant.design/
facebook.com: 

Facebook design system impact:
28%

Increase in design-to-ship time for sprints that utilized the new design components.

750

Staff hours saved by not having to recreate the design assets

We will be the benchmark for other banks to follow! ;)