使用ivx开发web全栈项目-InfoQ

前言

本人是一枚喜欢探索黑科技的 web 前端，没事喜欢研究研究框架，了解网络技术/工具等等。最近在研究 saas 和 paas 的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估计表示不屑，不就是在线编排 h5 的工具网站嘛，这种东西国内不多得是：135 编辑器、秀米、易点，大同小异都是集成的富文本编辑器，允许你使用封装好的事件触发器、动画效果、自定义 css 样式，感觉没什么技术含量，都是公司的运营人员在使用。当然，简单的系统根本引不起技术工作者的研究兴趣，那么 ivx 的难度可以满足你对“黑科技”的兴趣。

工具简介

调查了一下 ivx 的技术团队，还真是来头不小，是 ih5 团队（国内非常知名的硬核 h5 编辑器）。ih5 在业内名气着实不小，尤其是在设计界，让无数设计师不用再到处找前端程序员转而自己开发。ivx 正是在 ih5 基础上进行的大迭代，支持微信小程序、微信 h5、企业级网站的开发。进入官网，点击使用，不用注册直接跳转到编辑器页面…看来对自己的产品很有信息啊，编辑器页面出现的时候，我的内心是奔溃的。

初体验

emmm…androidStudio 是你吗😌？没事没事，大概只是看着多而已，随便点一点，添加点元素进去就好了。添加了，然后呢，怎么绑定事件，怎么让元素动起来，布局好不习惯啊，想用 flex。还好有视频教程和文档，点开发现这视频教程也太多了吧，86 个视频，看日期貌似还在持续更新…这时候我发现有数据库和微信登录？！我有一个大胆的想法：用这个建站岂不是什么都可以自己做，不用再叫个后端和我分钱，嘻嘻。秉承着格物致知（捞更多钱）的精神，我开始了长达 3h 的视频学习，不学不知道，有很多的技术亮点，感觉看视频学了个七七八八，开始实践。接下来用实例给大家介绍一下这个工具的一些基本操作。

开始开发

界面模块说明

首先是对于界面中各个部分的说明，要寄出我的千年老 ps 技术了，各位看官请看下图：

可视化部分，对象树最终会渲染到这个部分，如果使用了循环组件（for）或条件组件（if）则预览部分会与成品出现一定差异，这个案例由于是数据驱动生成的，最终的浏览器效果见下图，组件的具体使用方法下文再说；
前后端对象树。对于前台而言，对象树是页面、dom、自定义方法/函数、系统（包含一部分 window 对象方法、封装的路由方法等）、微信对象（用于配置微信分享链接缩略图、获取用户位置等）；对于后台而言，对象树包括服务（类似一套自定义的数据库操作流程，可定义参数和返回值，供前台调用）、数据库（关系型数据库表，每当有数据写入可以在表内查看、手动修改、删除）、用户数据库（平台封装好的一套用户表，包括图形验证码校验，短信注册，密码哈希存储）、商城数据库（封装好的商城功能套件，有购物车，具有完备信息的商品表，交互函数等）、微信红包数据库等；
变量，有文本、数值、布尔、数组、对象、二维数组、对象数组、时间。这里单独提变量是因为这也是 web 开发的基础，贯穿于前后端；
可用组件，点一下就会在对象树里添加组件；
舞台控制，选择舞台设备型号及大小；
预览及发布控件；
出问题了就对着客服小姐姐（貌似）喊救命，她会很耐心地教你如何使用。

效果图

基本操作

选中前台->点击页面，可以看到右侧对象树中有了页面，在页面中添加元素就构成了我们常见的单页效果。

页面中的元素包括页面本身可以绑定事件，如图：

点击这个叹号，让我们对它进行编辑，这里要强调一下，这个便是低代码编程的具体实现，用可视化组件代替代码逻辑：

白色的点表示本行及内部是否启用，相当于代码中的//；
钩子/事件监听条件；
条件判断组件，中间有封装好的条件，可以添加并列的 &&以及||逻辑
有这个箭头的地方可以选中右侧对象树中的组件或变量，并可做进一步的操作，可以做到很复杂的逻辑：

从图中可以看出可以嵌套 js 语法，结合起来开发项目，速度简直要飞起来。不过当项目越来越大，迭代的功能越来越复杂，这些组件看起来可能就没这么清晰了，还好 ivx 的团队考虑到了这点，可以将动作事件进行封装调用：

循环组件/条件组件

现在不管是三大前端框架还是微信小程序还是没流行起来的渲染模板都有利用 for 和 if 渲染 dom 的功能，ivx 的 for 组件同样可以对数组数据进行渲染。组件所在位置如下图，for 组件需要填写数据来源，通常为数组结构，渲染出的结果的次数也就是数组的长度。if 组件需要选则条件，如果符合条件就会渲染 if 内的 dom 元素。for 组件中的每一个 item 可以通过当前数据与 dom 的属性相绑定：

数据库操作

各位同学重点来了，与传统开发的不同之处便在这里出现，如果你需要搭建数据库存储用户的数据，那么你需要：买云服务器/dns->搭建后台->webpack 配置打包信息/插件/api->打包发布。你就是再熟练，各种环境搭建，配置证书，下载工具或插件，参数配置，再来点针对类似 canvas 图片源请求的难受的需求配置，这一套下来你不用个 1 小时能搞定？那想必你找不到对象！

ivx 的数据库基本封装了前端同学能用到的全部功能，先来看一下表的基本结构：

点击添加字段可以添加黄色的自定义字段，字段的内容/数据类型/名称都能修改。白色的字段是每个数据库的默认字段，不可修改。再来看看对数据库的操作，除了基本的增删改查还封装了很多操作。首先选中后台->点击 db 组件->点击右上角服务->对服务进行编辑。服务就是对数据库的操作，可以添加接收参数（通常作为查询键）以及返回参数（数据库查询结果）。具体操作流程入图：

自定义参数；
将参数与筛选条件选则对应的规则相绑定；
将结果返回给参数以方便获取。

前台的事件组里就可以直接使用这些服务来操作数据库啦。

ivx 优缺点

优点

基于云服务的开发系统，再也不用背着电脑到处跑了，再也不用在家里的电脑里装各种环境了，有浏览器就能满足所有的开发需求；全栈开发省时省力，2 个人的工作一个人做且速度更快，并且除了使用提供的组件，还可以自己写组件，写 js 函数，调用三方 api 接口，非常灵活；能构建全平台系统，目前支持小程序和 web，下个版本貌似还支持 app；这套工具的技术采用 react+golang+k8s+docker 架构将组件生成代码，其最终生成的代码的健壮性不比一个老师傅弱，不服的可以自己再撸一套代码版的跑一下比比性能；安全性，不论是接口还是数据库，其安全策略都很完备。在预览效果时看到回包的明文结构可能还在吐槽安全性，打包发布后再看看回包都是加密过的信息，收到回包后只有浏览器能解密并使用数据，不禁感叹 https 下还做到这样真的是“安全第一”；有类似 git 的版本管理系统，支持多人开发和分支管理，对可视化事件备注注释方便阅读，当然这个肯定没有 vscode 里直接能看到差异那种强壮的功能，但在同类产品里确实做的不错；完善的学习资源，有详细的开发文档，不输 imooc 的视频课程，在线客服和技术论坛。

缺点

劝退新手的学习难度，正所谓成也萧何败也萧何，其功能的强大注定了使用的难度，在开发者眼里的优点就成了新手眼里的缺点。如果对于程序员来说事半功倍，但对于没什么基础的新人没个几星期的学习和使用是无法构建大体量、多功能项目的；事件组多了会导致编辑页面变卡，滚动的时候尤其明显，点击选中组件也有一定的延迟，在流畅性方面用户体验并不是很好，希望以后可以改进；不同种类项目的代码不能够通用，比如小程序的组件无法复制粘贴到 web 项目，这可能和代码的生成逻辑有关，小程序生成的是对应 wxml、wxss 文件。对比其他前端框架，复用性就被比了下去，比如各种前端框架的 native 版本（react-native/vue-native）和小程序版本（mpvue/melago），代码基本可以通用。

思考

我从 html->js->jq->node->框架->框架衍生组件->表驱动编程->黑科技->颈椎病康复指南，前端的变化日新月异，这些知识是我们安生立命的资本，花费了我们大量的时间，结合我们的学历和专业才让我们在行业内无法被替代。apaas 产品会否是互联网应用的下一个风口，会否改变编程学习的方式是互联网人需要考虑的。01 代码被高级语言替代，可视化编程有可能替代高级语言，这并不使我害怕丢了饭碗，而是会鞭策我不断学习，一方面了解这种新颖的技术理念另一方面让我达到 apaas 所不能企及的高度，变得更加不可替代。