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

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

APICloud多端技术的工作原理

开发者通过开发工具基于avm语法标准编写的代码,通过webpack、rollup等编译工具分别编译到app、H5以及小程序端。其中,编译到app端时,app基于V8引擎执行,avm.js作为runtime,二者实时协作完成UI的原生渲染以及业务逻辑代码的执行;编译到标准H5端,基于浏览器或者webview运行时,代码则借助于avm.js直接渲染到浏览器或者webview的真实dom上;编译为小程序端,则对应小程序代码,直接生成小程序语法。

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

跨平台引擎

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

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

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

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

跨端JS架构

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

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

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

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

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

3.数据绑定:轻松将数据源绑定到应用用户界面,降低逻辑复杂性和开发难度;

4.状态管理和路由:有效分离用户界面和数据处理,实现项目的工程化管理;

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

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

全流程开发工具

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

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

1.提供舒适的高亮标记以及完善的智能帮助提示和自动完成功能,支持APICloud定义的DSL编写;

2.提供实时预览和真机调试能力,可直接在工具中调试代码和预览效果,或者使用Wi-Fi、USB链接真实的手机进行调试和功能验证;

3.提供简单高效的代码管理,支持Git方式的代码管理,同时内置SVN,简化了复杂的Git操作;

4.云端一体,同APICloud业务紧密衔接,保持和云端打通,在本地即可实现创建/导入项目,云编译,自定义Loader,以及模块管理等操作。

统一编译环境

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

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

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

1.Mpvue(美团):支持将Vue语法编译为小程序和H5,支持微信、支付宝等小程序

2.Taro(京东):支持将React语法编译为小程序和H5,支持微信、支付宝等小程序,同时支持生成React Native APP

3.Hippy(腾讯):同时支持将Vue和React语法编译为微信小程序和H5

4.Chameleon(滴滴):支持将其CML语法编译到Web、小程序、Weex APP等多种终端

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

avm.js

Avm(APICloud-View-Model)是一个移动优先的高性能跨端JavaScript框架,支持一次编写多端渲染。它提供更趋近于原生的编程体验,通过简洁的模型来分离应用的用户界面、业务逻辑和数据模型,适合高度定制的应用开发。

软件名称:avm.js

最近更新时间:2020年1月20日

软件语言:JavaScript

开发商:APICloud

软件授权:未开源

简介

Avm核心库只关注终端差异、虚拟DOM、组件化和数据绑定,与其他重量级框架不同的是,Avm不需要太多的外部依赖,仅需要组件化、数据驱动等更现代化框架的能力。Avm提供类Vue语法并兼容 React JSX,非常容易学习,如果您是Vue、React的用户,将更易上手Avm,几乎不需要学习成本。

Avm专注于移动端,提供简洁的代码书写模式,编码一次,可同时生成Android & iOS原生App、小程序和WebApp。

特点

易用

有Vue、React基础,可快速上手。配套专用的开发工具APICloud Studio3。

多端

一次开发,多端渲染,一个技术栈搞定移动端开发。

功能API丰富

提供1千+模块和2万+API可直接调用,面向行业和场景无限制。

项目结构

参考

Avm.js 的 API 参考了 VueJS、ReactJS、Omi.js。