51、前端架构风格

[CodingMeUp]

[CodingMeUp]

多种风格

[CodingMeUp]

大前端的理解

站在一个移动客户端研发的视角，聊聊我对大前端的简单理解：

Web 上线节奏灵活，线上问题可以迅速上容错方案，对 WebView/JS 引擎版本敏感，一套代码可跨多端同时上线业务。如在天猫精灵业务场景下，不仅需要支持安卓、iOS 移动端，还需要支撑天猫精灵 CC 带屏音箱、孙悟空、二郎神等端设备。 Web 端前置作为业务方的唯一接口，Native 端后置解耦业务，转为支持 Web 端。

前置的 Web 端是规范制定者，通过一套自定义的 JS-Framework 层定义大前端框架的 DSL 规范 Do main-Specific-Language（css，js，json），业务层所获取的能力和开发环境全部依赖这一层，它也是 Web 端的另一个定位：安全隔离层，在多端的场景下，业务方获取的能力只有 JS-Framework 层开放出来，物理上隔离了业务层直接接触端容器的可能。（进行管控）

后置的客户端作为引擎，一方面将端上的系统级能力以及宿主 App 的私有能力通过标准化、规范化，模块输出至 JS-Framework 层；另一方面端容器承载前端页面，容器将为 Web 端提供路由总线和消息总线去使用和访问 Native 层的能力。 移动端跨平台的主流技术中，绝大部分都依赖了大前端技术如：Weex/React Native/小程序等等。Weex/React Native 底层渲染引擎是 Native，小程序目前还是 WebView 渲染，但未来核心可能会向渲染性能最好的 Flutter 方向迁移。

大前端技术的核心技术原理：JSBridge。它是大前端技术内打通前端框架和 Native 框架的关键通道，并且是唯一通道，它会持有一个 JS 引擎（V8，Hermes，JavaScriptCore 等）生成 JS Context，解决前端框架和 Native 框架物理上无法直接通信的问题。 解决方式是 Web 和 Native 框架通过分别向 JSBridge 注册入口方法，通过 JSBridge 获取对方的入口方法并调用，以完成双向数据交互。