Componentization Architecture for iOS Mobile Applications

The author introduces a componentization scheme that must be designed based on business requirements, using a layered + component architecture for a map navigation app where core and basic modules dominate.

Layered Architecture – Initially a three‑layer structure (Business → Core (high + low) → Base) was refined to Business → Core → Base to avoid an overloaded core layer. Upper layers may depend on lower ones, but lower layers must not contain business logic.

Responsibility Division – Business layer hosts feature components (IM, navigation, user), core layer provides services (network, voice) with minimal inter‑component dependencies, and base layer contains independent libraries (AFNetworking, Map SDK, encryption) without any dependencies.

Integration Method – After creating a new project, configuration files, URLRouter, and the app container are added to the main target. Components are integrated via Podfile as frameworks, ensuring uniform integration and fast development.

Component Communication – MGJRouter is used for inter‑component routing. Registration example:

objc
RACSignal *signal = [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) {
    [subscriber sendNext:@"刘小壮"];
    return [RACDisposable disposableWithBlock:^{
        NSLog(@"disposable");
    }];
}];
[MGJRouter registerURLPattern:@"CTB://UserCenter/getUserInfo" withSignal:signal];

Calling example:

objc
RACSignal *signal = [MGJRouter openURL:@"CTB://UserCenter/getUserInfo"];
[signal subscribeNext:^(NSString *userName) {
    NSLog(@"userName %@", userName);
}];

While MGJRouter offers flexibility, excessive hard‑coding can be problematic; a Plist is used to centralize URL and parameter definitions.

H5‑Native Communication – H5 pages trigger native screens via URLRouter. Example JavaScript call:

objc
window.location.href = 'CTB://UserCenter/UserLogin?userName=lxz&WeChatID=lz2046703959';

Corresponding UIWebView delegate:

objc
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

App Service – Centralizes startup tasks with priority handling. Sample definition:

objc
#import <Foundation/Foundation.h>

typedef NS_ENUM(NSUInteger, CTBAppServicePriority) {
    CTBAppServicePriorityLow,
    CTBAppServicePriorityDefault,
    CTBAppServicePriorityHigh,
};

@interface CTBAppService : NSObject
+ (instancetype)appService;
- (void)registerService:(dispatch_block_t)serviceBlock priority:(CTBAppServicePriority)priority;
@end

Parameter Passing & Model Design – Discusses the trade‑off between using dictionaries and dedicated model classes. A shared model component placed in the base layer can reduce coupling while keeping models convenient.

Model example:

objc
@interface CTBStoreWelfareListModel : NSObject
/** Custom initializer */
- (instancetype)initWithDict:(NSDictionary *)dict;
@end

Dynamic Configuration – Proposes server‑driven UI layout using a JSON configuration that maps to UIKit controls. Example JSON:

objc
{
    "status": 200,
    "viewList": [
        {
            "className": "UIButton",
            "frame": {"originX":10,"originY":10,"sizeWidth":50,"sizeHeight":30},
            "normalImageURL":"http://image/normal.com",
            "highlightedImageURL":"http://image/highlighted.com",
            "normalText":"text",
            "textColor":"#FFFFFF",
            "routerURL":"CTB://search/***"
        }
    ]
}

Parsing this JSON creates UI components whose click events are routed via URLRouter, similar to a lightweight React‑Native approach.

Resource Dynamic Configuration – Extends the idea to load image assets from the server on demand, caching them locally to reduce app size.

Taobao Component Architecture – Summarizes Taobao’s evolution from a monolithic MVC app to a four‑layer component system (Bundle, Container, Middleware, Base Library) managed via CocoaPods, enabling independent development, version control, and parallel work.

Bus Design – Describes a unified URL bus, service bus, and message bus for cross‑platform routing (iOS, Android, Web) and event distribution, ensuring backward compatibility when components are missing.

Bundle App Concept – By configuring existing components, new apps can be assembled without code duplication, treating each component as an independent app bundled on a common OS container.

The article concludes that while demos exist, the primary value lies in understanding the architectural mindset and adapting it to other projects.