14年到16年 客户端相关技术快速发展，大家在这方面的研究和落地结果非常多，插件化，包管理，组件化，各种脚手架和研发体系，换肤，热更新，动态化，跨平台，等等。各种技术和项目不断出现，百花齐放，那是移动客户端快速发展的阶段。现在，客户端的技术早已趋于稳定，同时偏重于运营的移动互联网对动态化的需求更为强烈。在这方面，前端，大前端更有优势，也更容易落地，也更为标准化。早期在动态化上的探索，主要集中在H5和Hybrid H5，之后还出现各种native的json动态化方案，还有以各种特有DSL去描述UI的方案，16年Facebook发起的react native项目，彻底点燃了前端跨平台演进的激情，weex随后跟进，再到flutter的出现。同时，前端框架react，Vue，angular的不断成熟，在构建前端/移动应用上，变得更加简单。

总体上，移动客户端开发早已进入稳定期，技术框架开发模式成熟，各种配套设施齐全。前端这几年的发展日新月异，到目前为止，以Vue/React/Angular为代表的前端框架也趋于稳定，周边配套也较为齐全，开发模式也趋于稳定，都以组件化和标准化为指导原则。以RN/Weex/Flutter为基础的大前端技术也趋于稳定，开发模式稳定了，周边配套也完善了，后续更多地会在框架性能稳定性开发效率上做文章，应用层面不会大动干戈了，但小的变动仍会有不少。敬那些逝去的项目框架，期待这些新框架仍能不断带来惊喜。

在对这些框架的使用和反哺上，大公司和小公司也必然是迥异的策略，小公司拿来即用，再配合一些胶水层代码，甚至这些代码也取之三方。大部分框架在追求通用性的同时，必然会在易用性上打折，大公司有能力也有人力对其深度定制，满足自身需求，提高使用效率，也能反馈给社区，甚至新的轮子就出来了。

UI系统

• UI系统包含UI元素的布局、渲染和UI事件的捕获、传递、处理等。
• iOS、Android、Web、微信小程序、其他小程序都有各自的原生UI系统。

系统服务

• 原生系统的各种能力，来自硬件的、软件的。

开发语言不同、运行环境不同

开发模式不同

跨端方案

• 不同原生系统上的UI系统和系统服务是有差别和相似的，跨端方案是尽量屏蔽这些差异，对应用开发者来说，开发体验是一致的的、透明的，就像jQuery屏蔽不同Web浏览器间的差异性。
• 需要做到这点，跨端方案需要提供包括DSL、Runtime、组件库、工具链等，一整套屏蔽原生系统开发和运行的差异。

Runtime

• Runtime需要支撑DSL在原生系统的运行，需要桥接到到原生系统服务、原生UI系统，需要提供自有或轻或重的UI渲染系统，需要提供对自有组件库或三方组件库的访问等。
• UI引擎，轻的方案是直接桥接到原生UI系统，引擎只做UI数据的处理、转换、传递，重的方案是基于跨平台的渲染方案如OpenGL做一套自己的UI系统。

组件库

• 自有、三方、原生系统的组件库等等。

工具链

• 开发阶段，需要提供转换器或编译器，对DSL的支持，IDE，等等。
• 调试阶段，调试工具、方式。
• 测试阶段，测试工具。
• 部署阶段，本地部署、远程部署。

客户端上的一个页面搭建采用哪种架构，往往取决与页面类型。

展示型页面

数据从数据层到展示层单向流动

表单型页面

数据在数据层和展示层双向流动

交互型页面

展示层不仅展示数据，还有大量动画，操作行为等

组件

系统底层框架
网络
存储
缓存
序列化
架构
组件化
工程化
数据监控
日志
性能
Crash
安全
图片
视频、音频
AR、VR、ML
UI组件
屏幕分辨率
布局、样式
渲染
研发效率
编程语言、OC/Swift、OOP、AOP、FP
Hybrid
Native动态化
热补丁
小程序
PWA
编译
部署

• WXSDKInstance -> WXBridgeManager->WXBridgeContext->WXJSCoreBridge->JSContext

• WXSDKInstance -> WXComponentManager

• WXBridgeManager : 对WXBridgeContext进一步封装，提供JS API调用，JS 事件发送，注册Native Call Handler，注册Native模块Handler、注册Native组件Handler、注册Native服务Handler等接口。提供Bridge独立线程，上述接口基本上都在该线程中执行。

• WXComponentManager ：管理着组件的布局，样式等

// WXComponentManager.mm

- (void)_layoutAndSyncUI
{
    [self _layout];
    if(_uiTaskQueue.count > 0){
        [self _syncUITasks];
        _noTaskTickCount = 0;
    } else {
        // suspend display link when there's no task for 1 second, in order to save CPU time.
        _noTaskTickCount ++;
        if (_noTaskTickCount > 60) {
            [self _suspendDisplayLink];
        }
    }
}

- (void)_layout
{
    BOOL needsLayout = NO;

    needsLayout = [_rootComponent needsLayout];

    if (!needsLayout) {
        return;
    }
#ifdef DEBUG
    WXLogDebug(@"flexLayout -> action__ calculateLayout root");
#endif

        std::pair<float, float> renderPageSize;
        renderPageSize.first = self.weexInstance.frame.size.width;
        renderPageSize.second = self.weexInstance.frame.size.height;
        _rootFlexCSSNode->calculateLayout(renderPageSize);
    NSMutableSet<WXComponent *> *dirtyComponents = [NSMutableSet set];
    [_rootComponent _calculateFrameWithSuperAbsolutePosition:CGPointZero gatherDirtyComponents:dirtyComponents];
    [self _calculateRootFrame];

    for (WXComponent *dirtyComponent in dirtyComponents) {
        [self _addUITask:^{
            [dirtyComponent _layoutDidFinish];
        }];
    }
}

• WXSDKInstance : 加载bundle文件，管理、渲染根视图。

• WXSDKManager ：管理WXSDKInstance多实例

//WXSDKInstance.m

- (void)_renderWithMainBundleString:(NSString *)mainBundleString
{
    if (!self.instanceId) {
        WXLogError(@"Fail to find instance！");
        return;
    }
    self.performance.renderTimeOrigin = CACurrentMediaTime()*1000;

    if (![WXUtility isBlankString:self.pageName]) {
        WXLog(@"Start rendering page:%@", self.pageName);
    } else {
        WXLogWarning(@"WXSDKInstance's pageName should be specified.");
        id<WXJSExceptionProtocol> jsExceptionHandler = [WXHandlerFactory handlerForProtocol:@protocol(WXJSExceptionProtocol)];
        if ([jsExceptionHandler respondsToSelector:@selector(onRuntimeCheckException:)]) {
            WXRuntimeCheckException * runtimeCheckException = [WXRuntimeCheckException new];
            runtimeCheckException.exception = @"We highly recommend you to set pageName.\n Using WXSDKInstance * instance = [WXSDKInstance new]; instance.pageName = @\"your page name\" to fix it";
            [jsExceptionHandler onRuntimeCheckException:runtimeCheckException];
        }
    }
    if (!self.userInfo) {
        self.userInfo = [NSMutableDictionary new];
    }
    if (!self.userInfo[@"jsMainBundleStringContentLength"]) {
        self.userInfo[@"jsMainBundleStringContentLength"] = @([mainBundleString length]);
    }
    if (!self.userInfo[@"jsMainBundleStringContentLength"]) {
        self.userInfo[@"jsMainBundleStringContentMd5"] = [WXUtility md5:mainBundleString];
    }

    id<WXPageEventNotifyEventProtocol> pageEvent = [WXSDKEngine handlerForProtocol:@protocol(WXPageEventNotifyEventProtocol)];
    if ([pageEvent respondsToSelector:@selector(pageStart:)]) {
        [pageEvent pageStart:self.instanceId];
    }

    WX_MONITOR_INSTANCE_PERF_START(WXPTFirstScreenRender, self);
    WX_MONITOR_INSTANCE_PERF_START(WXPTAllRender, self);

    NSMutableDictionary *dictionary = [_options mutableCopy];
    if ([WXLog logLevel] >= WXLogLevelLog) {
        dictionary[@"debug"] = @(YES);
    }

    if ([WXDebugTool getReplacedBundleJS]) {
        mainBundleString = [WXDebugTool getReplacedBundleJS];
    }

    //TODO WXRootView
    WXPerformBlockOnMainThread(^{
        _rootView = [[WXRootView alloc] initWithFrame:self.frame];
        _rootView.instance = self;
        if(self.onCreate) {
            self.onCreate(_rootView);
        }
    });
    // ensure default modules/components/handlers are ready before create instance
    [WXSDKEngine registerDefaults];
     [[NSNotificationCenter defaultCenter] postNotificationName:WX_SDKINSTANCE_WILL_RENDER object:self];

    _needDestroy = YES;
    _mainBundleString = mainBundleString;
    if ([self _handleConfigCenter]) {
        NSError * error = [NSError errorWithDomain:WX_ERROR_DOMAIN code:9999 userInfo:nil];
        if (self.onFailed) {
            self.onFailed(error);
        }
        return;
    }

    _needDestroy = YES;
    [WXTracingManager startTracingWithInstanceId:self.instanceId ref:nil className:nil name:WXTExecJS phase:WXTracingBegin functionName:@"renderWithMainBundleString" options:@{@"threadName":WXTMainThread}];
    [[WXSDKManager bridgeMgr] createInstance:self.instanceId template:mainBundleString options:dictionary data:_jsData];
    [WXTracingManager startTracingWithInstanceId:self.instanceId ref:nil className:nil name:WXTExecJS phase:WXTracingEnd functionName:@"renderWithMainBundleString" options:@{@"threadName":WXTMainThread}];

    WX_MONITOR_PERF_SET(WXPTBundleSize, [mainBundleString lengthOfBytesUsingEncoding:NSUTF8StringEncoding], self);
}

//WXBridgeProtocol.h

@protocol WXBridgeProtocol <NSObject>

@property (nonatomic, readonly) JSValue* exception;

/**
 * Executes the js framework code in javascript engine
 * You can do some setup in this method
 */
- (void)executeJSFramework:(NSString *)frameworkScript;

/**
 * Executes the js code in javascript engine
 * You can do some setup in this method
 */
- (void)executeJavascript:(NSString *)script;

/**
 * Executes global js method with specific arguments
 */
- (JSValue *)callJSMethod:(NSString *)method args:(NSArray*)args;

/**
 * Register callback when call native tasks occur
 */
- (void)registerCallNative:(WXJSCallNative)callNative;

/**
 * Reset js engine environment, called when any environment variable is changed.
 */
- (void)resetEnvironment;

// WXJSCoreBridge.m

- (void)executeJSFramework:(NSString *)frameworkScript
{
    WXAssertParam(frameworkScript);
    if (WX_SYS_VERSION_GREATER_THAN_OR_EQUAL_TO(@"8.0")) {
        NSString * fileName = @"native-bundle-main.js";
        if ([WXSDKManager sharedInstance].multiContext) {
            fileName = @"weex-main-jsfm.js";
        }
        [_jsContext evaluateScript:frameworkScript withSourceURL:[NSURL URLWithString:fileName]];
    }else{
        [_jsContext evaluateScript:frameworkScript];
    }
}

- (JSValue *)callJSMethod:(NSString *)method args:(NSArray *)args
{
    WXLogDebug(@"Calling JS... method:%@, args:%@", method, args);
    return [[_jsContext globalObject] invokeMethod:method withArguments:args];
}

- (void)registerCallNative:(WXJSCallNative)callNative
{
    JSValue* (^callNativeBlock)(JSValue *, JSValue *, JSValue *) = ^JSValue*(JSValue *instance, JSValue *tasks, JSValue *callback){
        NSString *instanceId = [instance toString];
        NSArray *tasksArray = [tasks toArray];
        NSString *callbackId = [callback toString];
        WXLogDebug(@"Calling native... instance:%@, tasks:%@, callback:%@", instanceId, tasksArray, callbackId);
        return [JSValue valueWithInt32:(int32_t)callNative(instanceId, tasksArray, callbackId) inContext:[JSContext currentContext]];
    };

    _jsContext[@"callNative"] = callNativeBlock;
}