关于多端技术，这4个核心知识你get到了吗？-InfoQ

AICon全球人工智能与机器学习技术大会周四开幕，点击查看完整日程>> 了解详情 



 写点什么

在移动互联网十几年的开发进程中，APP 开发者遭遇了移动设备的屏幕碎片化，系统版本分散，厂商定制泛滥等多种开发适配痛点。开发者将大量的精力耗费在了不同平台的实现以及解决各种兼容适配问题上，这就导致了项目周期延长和成本的大量增加，而这也与企业希望 APP 低成本快速实现，按时上线的诉求产生了极大的矛盾。

而跨平台技术的出现消除了这一痛点。通过不同平台之间的差异，开发者能够通过一次编码，同时开发出高性能和体验的 Android / iOS 双平台 APP。传统 APP 开发模式下需要 4 人日的工作，现在只需 1 人日即可完成，这不仅大大降低了企业的开发成本，也保证了项目的如期上线。也正是因为跨平台技术具备开发效率高、体验和性能不输原生的特点，使其至今仍具有强大的生命力，持续为企业输出价值。市面上主流的 APP 产品，或多或少都在使用跨平台技术架构进行开发，可以说跨平台技术的发展史几乎和移动互联网发展历史一样长。

进入寡头时代后，微信、支付宝、头条等“超级 APP”们纷纷建立起自有生态主导流量分发，推出了各自的小程序开发技术。而企业在开发 APP 产品的同时，还会要求其对应小程序的开发，甚至很多团队在业务初期，无需开发 APP，仅需要小程序进行模式验证，大量的需求令小程序开发市场异常火爆。

但因各家小程序技术之间没有统一的标准或者接入方式，导致了技术碎片化。开发者必然要为不同端的小程序做不同的开发和适配，其不仅需要开发 Android / iOS 的 App，还要兼容 WebApp 以及各大超级 APP 的小程序，由于单一功能在各终端都要重复实现，开发和维护成本成倍增加，这给开发者和企业带来了极大的负担。行业中迫切需要一种仅使用一套代码就可以同时开发 APP、小程序和 H5 的解决方案，来减少开发和管理成本，并释放人力提升效率。

多端技术由此而来，在跨平台技术已经成熟稳定的能力下，通过多端统一开发工具将 APP 代码编译为小程序和 H5 代码，可以达到一套代码可同时适配 APP、小程序和 WebApp 多端的开发目的。

通过多端技术的发展历程我们不难发现，其并非新兴、分散的技术或服务，它是历经长期积累，而形成一系列复杂能力的集合体。一个完整的多端技术，通常应该具备 4 个核心能力：

1、跨平台 APP 引擎，提供一套代码同时开发 Android / iOS App 的能力；

2、高性能 JS（DSL）框架，提供统一的 DSL，消除终端差异，一次编写多端渲染能力；

3、多终端统一编译环境，提供一次编写，多端部署的能力；

4、全流程开发工具，提高开发效率和代码质量，实现项目工程化管理。

跨平台 APP 引擎

历经近十年的发展，跨平台技术和生态如今趋于稳定，企业和开发者对跨平台技术已形成共识，并大规模的应用到各种业务场景中。在此期间，跨平台技术分离出两个主要方向：

1、混合方向：即 HTML5 + Native 混合，也就是我们通常说的混合开发：通过 HTML5 快速实现 APP 的 UI 布局和业务逻辑，在开发过程中涉及 HTML5 无法实现或者体验不好的功能，则借助 Native 模块来实现。

该模式的 APP 引擎整体基于 Webview 架构，对前端开发者非常友好，背靠前端庞大的 JavaScript 生态，前端开发者无需学习新的技术即可开发 APP。该方向代表技术为 Cordova、AppMobi、Ionic 等。

2、中间语言（DSL）编译方向：开发过程要求使用特定的语法编写 APP 代码，通过编译环境将代码编译为 Android / iOS 原生 APP。开发者无需学习 Android & iOS 原生技术以及 Java、Object-C、C/C++ 等复杂的开发语言即可完成 APP 开发。

该模式的 APP 引擎不依赖 Webview，而是借助 Virtual Machine，比如 V8 / JSCore 引擎，通过 JS-Runtime 实现更为复杂的代码逻辑来满足交互处理、通信和状态管理，同时扩展和完善 JS / Native 的通信机制、封装完善的组件和系统能力等，实现完全原生的渲染。该方向既延续了前端开发体系，又最大限度的保证了渲染性能，代表技术为 React Native、Weex。

行业新产品速递

APICloud Deep Engine 3.0 版本在历经跨平台领域多年深耕后即将正式发布，该版本可同时支持以上两种技术模式，开发者可在同一个 APP 中自由选择其中一种方式进行开发。

Deep Engine 使用全翻译式原理，将 Javascript 编译为 Native API，为 APP 提供完全原生的体验和性能。

高性能 JS（DSL）框架

在大前端技术领域，当我们遇到了需要解决的重复性的问题时，通常会考虑设计一个 DSL（Domain-Specific Language）或者抽象出一个框架层，专门来解决此类问题。使用 DSL 我们并不需要为特定终端编写多套代码，还可以利用宿主语言的抽象能力，确保各终端渲染效果的一致性以及对开发者友好。

常见的 DSL 有：React 支持的 JSX 语法、Vue 定义的 SFC 结构和 v-* 指令集、微信小程序的 WXML/WXS 语法等。这些 DSL 最终被编译为目标代码，直接发布于小程序平台，或者借助 JS-Runtime 运行于 APP 和 Web 浏览器。

行业新产品速递

APICloud 即将发布全新的 AVM 开发框架，该视图模型框架是基于标准 H5 子集设计的 DSL 中间语言编程框架，将具备如下能力：

1、Virtual DOM：通过虚拟 DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

2、组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的 DOM 结构和行为，让开发者专注于应用的功能和外观；

3、数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

4、状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

5、类 Vue 语法和兼容 React JSX，兼具 Vue 的轻巧和 React 的灵活性。

APICloud DSL 最终可编译为标准 JS，通过 DeepEngine 渲染到 APP 端和 Web 端，或者编译为微信小程序代码，用于微信小程序平台发布。

APICloud DSL 使用 Vue 方式定义组件或页面：

APICloud DSL 使用兼容 React JSX 方式定义组件或页面：

多终端统一编译环境

多终端统一编译环境，是一系列代码解析，语法分析，翻译，重构等工具的集合，负责将 DSL 编译为目标编程语言，例如将 Less 编译为 CSS。在多端技术领域，多端编译环境则负责将 DSL 编译为可在 JS 引擎或者 Web 浏览器中执行的标准 JS 和 Html 代码，以及编译为符合微信或者支付宝等小程序技术标准的代码。

编译成功的标准 JS 代码运行于跨平台 APP 引擎中，实现 APP 端功能；小程序代码可直接用于发布到微信或者支付宝小程序平台，实现小程序端功能；Html 代码则可作为 Web 端发布。由此达到一套代码，可同时部署到 APP，、小程序、H5 端的目的。

目前常见的多终端编译环境有：

Mpvue（美团）：支持将 Vue 语法编译为小程序和 H5，支持微信、支付宝等小程序；

Taro（京东）：支持将 React 语法编译为小程序和 H5，支持微信、支付宝等小程序，同时支持生成 React Native APP；

Hippy（腾讯）：同时支持将 Vue 和 React 语法编译为微信小程序和 H5；

Chameleon（滴滴）：支持将其 CML 语法编译到 Web、小程序、Weex APP 等多种终端。

行业新产品速递

APICloud 多终端编译环境即将全面支持使用类 Html5 技术实现多终端开发，无需搭建特定的终端编译环境，一键云端编译即可生成高质量目标终端代码，可用性高，有利于二次开发。支持编译为 Android / iOS APP、微信小程序以及标准 H5。

全流程开发工具

开发工具作为开发者的“灵魂伴侣”，伴随在开发者的整个职业生涯里。市面上有很多流行且成熟的工具可供多端开发进行使用，例如 VSCode、Sublime、WebStorm 等。因多端技术 DSL 的个性化，如果能够提供“标准化 + 行业化 + 定制化”的全流程开发工具，包含完备的编码、调试、和发布功能，则能让多端开发工作事半功倍，因此诸如微信和支付宝的小程序开发流程中，均提供了符合自己业务特色的 IDE。