应用架构概览
iVX应用架构概览
iVX的应用采用前后端分离架构，即前端部分和后台部分的逻辑完全独立，两者通过服务组件来通信：
如上图所示，前台部分，对应前端应用程序，负责客户端界面的展示与交互。在iVX中，前端程序支持多种类型，包括web应用，小程序，原生app，与windows exe应用。在运行时，每个用户都会在本地客户端下载或安装一份前端程序来运行；后台部分，对应服务端程序，部署在后台服务器（集群）中，负责后台数据与通信逻辑的处理。
其中，后台部分进一步包括后台资源接口和服务逻辑：
- 后台资源接口，主要包含各种数据库，api，缓存，文件等后台资源的操作接口，每一种接口都对应iVX中的一个后台组件。注意，iVX仅负责生成应用程序，并不提供后台资源本身。因此，要运行iVX的后台程序，需要额外接入后台资源，比如mysql数据库，redis等等。在iVX公有云上，这些资源已经自动接入，因此可以iVX应用可以直接发布运行；如果选择私有部署，则需要自行准备资源，详见私有部署相关文档；
- 服务逻辑，主要包含服务组件，是前端程序和后台资源进行交互的“中央枢纽”。其提供了一个HTTP的服务接口（REST API），可以供iVX前端部分应用或其他第三方应用来调用，同时，可以直接操作各种后台资源，并定义内部处理逻辑。
应用编辑举例
在iVX编辑器中，前台部分和后台部分的应用逻辑，分别在前台和后台根中编辑。接下来我们举一个简单的例子，来说明一个应用的各部分逻辑在对象树中的对应关系。
假设我们要做一个简单的表单提交应用，其应用架构如下：
- 左侧用户界面，即前端应用，其运行在用户的浏览器端，负责收集用户填写的信息；
- 右侧的数据库表，即后台资源，负责存储所有用户提交的信息；
- 中间的提交服务，即后台的服务层，负责监听前端应用发送过来的请求，对请求的数据进行处理，比如，判断一下提交的数据是否合法，然后调用数据库表，写入数据。数据写入之后，服务还需要根据写入是否成功，将结果返回给前端应用，这样前端应用可以把数据提交结果在界面上提示出来。
这个应用所对应的编辑器界面如下：
在上图中，左侧表单提交界面，对应所有前台下的UI元素和逻辑，中间提交服务，对应后台根下的“提交服务”组件，右侧数据表，对应后台根下的“用户信息表”数据库组件。注意，由于服务和数据库（后台资源）都是部署在后台服务器，因此，尽管他们的职能不同，但都是添加在编辑器“后台”根下。
前端技术框架
前端应用类型
iVX的前端核心框架为web应用，主体使用数据驱动架构，部分内部模块使用了自研的对象驱动引擎，并引用了pixi.js, three.js, phaser.js, babylon.js 等画布渲染库。同时，web应用可以通过不同的打包方法生成其他类型的应用，如下图所示：
除微信小程序以外的非web类型的应用，都是在其他原生应用环境中以webview形式嵌入web应用，并提供原生环境接口，供webview中调用。比如，ios/android应用，主体界面与数据逻辑，依然是web应用，但可以额外使用ios/android操作系统提供的接口，比如，地理位置，设备信息，app消息通知，本地文件等等。因此，一个iVX应用，可以直接发布为web应用，也可以同时打包为其他类型的前端应用，不需要针对不同的平台重复开发不同的前端程序。
微信小程序，是基于iVX专门开发的一套小程序组件与编译环境，直接编译成原生的微信小程序。
web应用内部结构
如上图所示，iVX的web应用，包含两大环境，一为数据驱动环境，基于自研的数据驱动引擎，内部支持react和vue两种组件环境；二为对象驱动环境，是以html canvas为基础的动画与游戏环境。两套环境相对独立，对象驱动环境是以一个react节点的方式挂载在数据驱动环境中，因此无论应用中是否用到了数据驱动环境下的组件，数据驱动环境都会首先加载。
在每一套环境中，都有其对应的组件集，上图列出了iVX当前提供的所有主要组件集，以及其依赖的基础库。
数据驱动VS对象驱动
数据驱动环境与对象驱动的环境，其核心区别如下图所示：
数据驱动环境中，UI控件的显示属性，与某个数据源绑定，当数据源改变时，UI控件的显示属性也自动改变。因此，在应用开发时，我们不能直接操作UI控件，必须要先配置好数据绑定关系，然后通过设置数据源的方法来改变UI控件。因此，在数据驱动的环境中，一个典型的控件交互循环是这样的：
- UI控件绑定数据源，根据数据源的当前数据进行初始化显示；
- UI控件监听到交互事件（如用户点击）；
- 根据在事件面板上预先配置好的事件定义，调用相应的动作（函数）；
- 在动作中，处理一系列逻辑，改变某个数据源，进而改变UI控件的显示行为；
对象驱动的环境中，UI控件不直接和数据源绑定，其显示行为的改变，是通过在动作（函数）中直接设置其显示属性而实现的。其空间交互循环会比数据驱动环境中少一个步骤：
- UI控件监听到交互事件（如用户点击）；
- 根据在事件面板上预先配置好的事件定义，调用相应的动作（函数）；
- 在动作中，处理一系列逻辑，直接操作UI控件对象，改变其显示属性；
由于省去了数据绑定和数据设置这一步，对象驱动的环境在开发时会相比数据驱动环境更加灵活与直观，但由于需要手动管理所有UI对象的显示行为，在制作时也会相对繁琐。其更加适合制作一些动画、游戏交互等前端交互逻辑相对复杂的应用；而数据驱动环境，一旦设置好UI和数据的绑定关系，UI界面就可以根据数据源自动生成，对于一些和后台数据交互频繁的应用（比如根据后台数据生成列表），数据驱动的环境可以大大简化开发逻辑，我们在交互逻辑中，只需要关注数据本身，而不需要关心UI界面是怎样渲染出来的。因此，数据驱动环境更适合制作一些应用系统的前端界面，比如OA、电商、CRM、iOT、财务管理系统等等。
预览和发布模式
iVX的web应用，分为预览模式与发布模式。两种模式在播放时的行为完全一致，但预览模式为了能够实时同步编辑器内容，使用了web assembly引擎实时解析的方法，而发布模式，为了程序运行性能与js代码安全，使用了完全编译的方法，因此，在编辑器中，预览应用几乎是实时的，而发布应用，需要一定的编译打包时间。
预览模式，需要加载比较大的代码解析引擎，初次打开时加载速度也会相对发布模式较慢，因此，如果要发项目预览给客户，建议使用发布版本（上架或测试发布版本均可）。
若有收获，就点个赞吧
0 人点赞
