使用ivx开发web全栈项目 初探（一）

1、前言

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

2、工具简介

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

3、初体验

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

4、开始开发

（一）界面模块说明

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

1. 可视化部分，对象树最终会渲染到这个部分，若是使用了循环组件（for）或条件组件（if）则预览部分会与成品出现必定差别，这个案例因为是数据驱动生成的，最终的浏览器效果是这样

   

   组件的具体使用方法下文再说；
2. 先后端对象树
   • 对于前台而言，对象树是页面、dom、自定义方法/函数、系统（包含一部分window对象方法、封装的路由方法等）、微信对象（用于配置微信分享连接缩略图、获取用户位置等）；
   • 对于后台而言，对象树包括服务（相似一套自定义的数据库操做流程，可定义参数和返回值，供前台调用）、数据库（关系型数据库表，每当有数据写入能够在表内查看、手动修改、删除）、用户数据库（平台封装好的一套用户表，包括图形验证码校验，短信注册，密码哈希存储）、商城数据库（封装好的商城功能套件，有购物车，具备完备信息的商品表，交互函数等）、微信红包数据库等；
3. 变量，有文本、数值、布尔、数组、对象、二维数组、对象数组、时间。这里单独提变量是由于这也是web开发的基础，贯穿于先后端；
4. 可用组件，点一下就会在对象树里添加组件；
5. 舞台控制，选择舞台设备型号及大小；
6. 预览及发布控件；
7. 出问题了就对着客服小姐姐（貌似）喊救命，她会很耐心地教你如何使用。

（二）开始开发——基本操做

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

页面中的元素包括页面自己能够绑定事件，如图：

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

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

   

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

   

   

（三）开始开发——循环组件/条件组件

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

（四）开始开发——数据库操做

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

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

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

前台的事件组里就能够直接使用这些服务来操做数据库啦。

5、ivx优缺点

（一）优势

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

（二）缺点

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

6、思考

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