How BANFF Evolved from a Simple Sales App into a Scalable Mobile Platform

Abstract

The BANFF app, originally a lightweight tool for internal sales staff (BD), has grown into a complex mobile office data platform. Its flat project structure and scattered technical abstractions became bottlenecks, prompting a redesign aimed at improving development efficiency, extensibility, and alignment with evolving business needs.

Introduction

BANFF serves internal sales personnel, connecting them with merchants and business districts to boost work efficiency. Over 16 years, the app expanded from quick‑to‑market features (merchant list, contracts, visits, materials, attendance, task system) into a multi‑role platform. Rapid feature addition led to fragmented organization, poor reuse, and maintenance difficulties, especially as new products need to be integrated.

Challenges

1. Overly flat and tightly coupled business pages – The app’s architecture focused on feature accumulation, neglecting modular design. Business pages are scattered, and inter‑page calls have become complex, causing high risk when modifying or removing functionality.

2. Insufficient technical abstraction – Common capabilities such as networking, location, image handling, UI components, and time utilities remain entangled with business code, preventing clean plugin‑style integration and hindering platform‑level extensions.

3. Limited extensibility of certain page architectures – Legacy pages, especially the visit module, have grown beyond the simple MVC pattern, resulting in massive controller files and duplicated logic across similar pages.

Redesign Approach

The redesign centers on three principles:

Business page decoupling : Group related pages into distinct business modules with loose inter‑module coupling and tight coupling only to module entry points.

Technical module separation : Extract technology‑specific code into pure technical modules, using adapter layers to isolate third‑party libraries from the app core.

Complex page refactoring : Re‑evaluate and select appropriate architectural patterns (MVP, MVVM, Dagger2, etc.) for historically complex pages to improve maintainability.

The resulting architecture is illustrated in the following diagrams:

Module Overview

Based on business functions, the app is divided into the following modules:

Merchant Information: my merchants, competitor merchants, leads, onboarding requests, map view, KPI dashboards.

Work Behavior: task system, visits, promotions.

Attendance: alarms, sign‑in.

Other: personal profile, messages, complaints.

Benefits of Modularization

Divide‑and‑conquer mindset simplifies development.

Business logic is decoupled between modules.

Clear interfaces make modifications and maintenance straightforward.

Implementation details are hidden, providing higher‑level abstractions.

Code reuse rates increase significantly.

Conclusion and Future Development

The redesigned BANFF architecture emphasizes business‑centric module clustering, technical abstraction, and selective page refactoring, delivering a more stable and extensible platform. Current capabilities include offline H5 support, with plans to integrate React Native and native‑plugin (NA) solutions, selecting appropriate plugins per business scenario to further strengthen platformization.

A well‑structured architecture boosts productivity by enabling developers to focus on isolated modules, streamlining testing, debugging, and future enhancements while ensuring the platform remains reliable for diverse internal users.