【iVX从入门到精通 · 基础篇】iVX基础篇——系统架构

本专栏文章将带你从0基础入门到精通掌握iVX


提示:关注本专栏一起学习iVX

官网入口点击即可学习


一、前后台分离架构概览

iVX的应用采用前后端分离架构,前端部分和后台部分的逻辑完全独立,两者通过服务组件来通信。

前台部分,对应前端应用程序,负责客户端界面的展示与交互。

  1. 在iVX中,前端程序支持多种类型,包括web应用,小程序,原生app,与windows exe应用。
  2. 在运行时,每个用户都会在本地客户端下载或安装一份前端程序来运行;

在这里插入图片描述

后台部分,对应服务端程序,部署在后台服务器(集群)中,负责后台数据与通信逻辑的处理。后台部分进一步包括后台资源接口和服务逻辑:

  1. 后台资源接口,主要包含各种数据库,api,缓存,文件等后台资源的操作接口,每一种接口都对应iVX中的一个后台组件。注意,iVX仅负责生成应用程序,并不提供后台资源本身。因此,要运行iVX的后台程序,需要额外接入后台资源,比如mysql数据库,redis等等。在iVX公有云上,这些资源已经自动接入,因此可以iVX应用可以直接发布运行;如果选择私有部署,则需要自行准备资源,详见私有部署相关文档;
  2. 服务逻辑,主要包含服务组件,是前端程序和后台资源进行交互的“中央枢纽”。其提供了一个HTTP的服务接口(REST API),可以供iVX前端部分应用或其他第三方应用来调用,同时,可以直接操作各种后台资源,并定义内部处理逻辑。

具体如下:

在这里插入图片描述

二、iVX的技术栈

1. 前端技术栈

  • 自定义组件:用户可以根据iVX提供的组件标准,自行编写组件或采用现成库npm包等,上传自己的组件。
  • React Core:前端生成代码以及前端IDE都是通过React实现的。
  • 吸收Vue特性:相当于是用React将Vue的简洁的很多特性重新实现了一遍,将Vue的简洁+React的高效融为一体。
  • 3D组件:three.js,3D实现基于three.js,能实现强大的3D在线编辑功能,可能控制对象旋转、运动、镜头等;能实现720云相关效果。
  • Pixi.js:物理引擎实现(类似egret)。
  • 图标组件:Echart
  • 富文本编辑器:Quill
  • 全景组件:Krpano
  • 默认UI组件:antD
  • 前端伪类:修改属性,马上显示。
  • 路由:自有技术支持。
  • 搜索引擎优化:自有技术支持

2.后端技术栈

  • 后台和中台的关系:在iVX中,自动生成的代码集中在前端和中台(中台包括所有的业务逻辑),这两部分都可以编译为JavaScript;而真正的后台部分,则是通过Go语言编写的DLL动态连接库来实现的,这个DLL是直接对接后端IaaS资源层,这个DLL是可以从网站上免费下载的。
  • 微服务架构:采用iVX自身的方式来建立微服务和微服务上架管理机制。在iVX内部,包括“公开服务”“组内微服务”“(企业)微服务”“服务”的概念,灵活实现服务有序共享,并保证数据安全访问。
  • BaaS (Backend as a Service):“iVX云”后台高度集成AWS后台产品,将所有后台“数据”“API”“计算”都看成资源来进行管理,并将AWS的核心后台产品都抽象成了iVX中后台组件进行使用,方便用户快速搭建后台的同时,还透传了云计算厂商的后端能力,使得所有IaaS层资源“计算”“流量”“存储”所有节点都是弹性的;通过iVX发挥云计算最大能效。
  • FaaS(Function as a Service):直接使用AWS或阿里云的函数计算lambda。
  • 资源和计费管理:通过云计算的方式对用户运营的应用进行收费和管理。

三、应用架构实践

在iVX编辑器中,前台部分和后台部分的应用逻辑,分别在前台和后台根中编辑。接下来我们举一个简单的例子,来说明一个应用的各部分逻辑在对象树中的对应关系。

假设我们要做一个简单的表单提交应用,其应用架构如下:

在这里插入图片描述

  • 左侧用户界面,即前端应用,其运行在用户的浏览器端,负责收集用户填写的信息;

  • 右侧的数据库表,即后台资源,负责存储所有用户提交的信息;

  • 中间的提交服务,即后台的服务层,负责监听前端应用发送过来的请求,对请求的数据进行处理,比如,判断一下提交的数据是否合法,然后调用数据库表,写入数据。数据写入之后,服务还需要根据写入是否成功,将结果返回给前端应用,这样前端应用可以把数据提交结果在界面上提示出来。

这个应用所对应的编辑器界面如下:

在这里插入图片描述
在上图中,左侧表单提交界面,对应所有前台下的UI元素和逻辑,中间提交服务,对应后台根下的“提交服务”组件,右侧数据表,对应后台根下的“用户信息表”数据库组件。

注意,由于服务和数据库(后台资源)都是部署在后台服务器,因此,尽管他们的职能不同,但都是添加在编辑器“后台”根下。

跟着本专栏文章一起学习iVX,本专栏文章将带你从0基础入门到精通掌握iVX!

一起加油吧!


总结

iVX的编辑界面具有实时可见的效果,不需要编译运行,对于前端开发人员非常友好。在数据存储上,简化了数据库运用的操作,不再需要记忆复杂的数据库命令。

关注本专栏文章,学习更多关于iVX的知识吧!

  • 100
    点赞
  • 110
    收藏
  • 打赏
    打赏
  • 98
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字50 设计师:CSDN官方博客 返回首页
评论 98

打赏作者

abcccccccccccccccode

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值