APICloud多端开发原理

猿友 2021-04-01 17:48:26 浏览数 (2305)
反馈

在兼容和继承 APICloud 所有 API、模块、技术栈以及用户体验的基础上,APICloud 定义了一套新的代码编写标准(DSL):基于标准 Web Components 组件化思想,兼容 Vue / React 语法特性,通过一次编码,分别编译为 APP、小程序代码,实现多端开发。


APP 代码使用 DeepEngine3.0 运行,全翻译式的运行原理提供完全原生的体验和性能。


APICloud 整个多端技术的工作原理

开发者在开发工具中编写代码并形成一个虚拟 dom,通过 webpack、rollup 等编译工具分别编译到 app、H5 以及小程序平台。在编译到 app 平台时整个运行基于 V8JavaScript 的引擎去运行,加上 avm.js 的共同作用去渲染或者执行开发者编写的代码,基于浏览器或者系统自带的 webview,代码借助于 avm.js 直接渲染到浏览器或者 webview 真实 dom 上。而对应小程序代码,则是直接生成小程序语法。


APICloud整个多端技术的工作原理


APICloud 在多端技术的 4 个核心能力:

跨平台引擎

历经近十年的发展,跨平台技术和生态如今趋于稳定,企业和开发者对跨平台技术已形成共识,并大规模的应用到各种业务场景中。

在此期间,跨平台技术分离出两个主要方向:


  1. 混合方向:HTML5 + Native 混合,也就是我们通常说的混合开发:通过 HTML5 快速实现 APP 的 UI 布局、业务逻辑,在开发过程中涉及 HTML5 无法实现或者体验不好的功能,则借助Native模块来实现。
    该模式的 APP 引擎整体基于 Webview 架构,对前端开发者友好,背靠前端庞大的 JavaScript 生态,前端开发者无需学习新的技术即可开发 APP。该方向代表技术为 Cordova、AppMobi、Ionic 等。
  2. 中间语言(DSL)编译方向:开发过程要求使用特定的语法编写 APP 代码,通过编译环境将代码编译为 AndroidiOS 原生 APP。开发者无需学习 Android & iOS 原生技术以及 Java、Object-C、C/C++ 等复杂的开发语言即可完成 APP 开发。

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


APICloud DeepEngine 3.0 同时支持以上两种技术模式,允许开发者在同一个APP中自由选择使用其中一种方式进行开发。


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


APICloud DeepEngine 3


跨端JS架构

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


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


APICloud 视图模型框架是基于标准 H5 子集设计的 DSL 中间语言编程框架,目前具备如下能力:


  • Virtual DOM:通过虚拟 DOM,渲染到不同终端,充分尊重系统特性,为不同终端执行差异处理,实现高效渲染;
  • 组件化:高可重用性、可组合性、可维护性的架构设计,隐藏了复杂的 DOM 结构和行为,让开发者专注于应用的功能和外观;
  • 数据绑定:轻松将数据源绑定到应用用户界面,降低逻辑复杂性和开发难度;
  • 状态管理和路由:有效分离用户界面和数据处理,实现项目的工程化管理;
  • 类 Vue 语法和兼容 React JSX,兼具 Vue 的轻巧和 React 的灵活性。

 

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


全流程开发工具

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


以 APICloud Studio3 多端开发工具为例,它是基于业界领先的代码编辑器 -VSCode 深度定制,支持在 Windows、MacLinux 系统上运行,在兼容 VSCode 所有能力的基础上:


  • 提供舒适的高亮标记以及完善的智能帮助提示和自动完成功能,支持 APICloud 定义的 DSL 编写;
  • 提供实时预览和真机调试能力,可直接在工具中调试代码和预览效果,或者使用 Wi-Fi、USB 链接真实的手机进行调试和功能验证;
  • 提供简单高效的代码管理,支持 Git 方式的代码管理,同时内置 SVN,简化了复杂的 Git 操作;
  • 云端一体,同 APICloud 业务紧密衔接,保持和云端打通,在本地即可实现创建/导入项目,云编译,自定义 Loader,以及模块管理等操作。


统一编译环境

多终端统一编译环境,是一系列代码解析,语法分析,翻译,重构等工具的集合,负责将 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。


以上内容由低代码开发平台 APICloud 提供,想要了解更多推荐学习编程狮(w3cschool.cn)免费课程《APICloud(3.0)-APP&小程序实战开发培训》。


1 人点赞