AppBoxFuture(六): 前端组件化开发

  前面几篇都是在介绍结构化与非结构化的数据存储，本篇换换口味介绍一下框架是如何实现前端组件化开发的。首先得感谢Vue、ElementUI等优秀的前端开源项目，这些项目帮助作者快速实现了框架的两个前端工程（IDE及Web应用)的开发。

  当初框架的设计目标是：前端、后端、存储端统统一锅端，为什么这么设计，一方面是想减少开发人员对于开发环境及各类工具的安装配置时间，另一方面是想消除各端之间的集成调试问题，使开发人员更多的关注数据结构、业务逻辑、用户界面的设计与开发。为了达成这一目标，作者在框架的前端开发尝试过类似于Winform拖拉方式的界面生成，但发现灵活性受到了极大的限制。后来学习了Vue等项目，确认了框架集成Vue及ElementUI来用于前端用户界面开发的方案。

一.实现思路

  由于框架的IDE是基于Web的，如何实现带智能提示的代码编辑及如何实现界面的即时预览成为一个小小的挑战（作者熟悉skia,gdi+等方式画用户界面，但不熟悉web前端）。

1.实现代码编辑器

  作者一开始想到VS Code是基于Electron的就看了一下源码，结果发现微软从VS Code剥离了代码编辑器monaco-editor项目，具备了实现一个在线代码编辑器所需要的所有功能，而且惊喜的是monaco editor自带了Html\JS\CSS着色与智能提示。

2.实现即时预览

  在大体了解了Vue的原理后，作者在IDE的视图设计器内实现了在线将Vue组件的代码编译转换为运行时代码，类似于Webpack分别将模版、脚本、样式编译然后组合在一起形成一个js包，设计时发给预览窗口动态加载，运行时则通过Vue的异步组件功能按需加载。

二.实现效果

1.组件开发

  每个组件通过ViewModel关联，开发完全等同于在线Vue组件开发，这里不再过多描述。需要注意的是样式统一为Vue的局部样式(scoped)。

• Tip1: 在代码编辑内CMD+S保存, CMD+1,CMD+2,CMD+3分别切换模版、脚本、样式编辑；
• Tip2: 点击顶部"Preview"在右侧显示预览窗口；
• Tip3: 框架集成的ElementUI组件均注册为全局组件，且前缀为e-xxxx，非默认的el-xxxx。

2.组件组合

  组合其他子组件时，需要先在脚本内注册局部组件，如下图所示：

  然后在模版内放置注册的子组件，如下图所示：

3.组件路由

  每个视图模型默认是不加入路由表的（sys.Home例外是默认的主页），如果在运行时需要通过浏览器地址栏直接访问视图模型，必须将视图模型加入路由表，如下图所示：

• Tip1: 自定义路径如果为空，则使用默认路径，如http://地址/app/index.html#/sys/EmploeeList；不为空则为http://地址/app/index.html#/{自定义路径}；
• Tip2: 自定义名称支持多级，如: PersonInfo/Address。

4.服务集成

  框架支持两种方式调用服务模型进行业务逻辑处理：

4.1 异步await方式：

4.2 异步Promise方式：

export default class Home extends Vue {
onclick() {
sys.Services.HelloService.SayHello().then(res => {
this.$message.info(res);
}).catch(err => {
this.$message.error(err);
});
}
}


5.组件调试

  本想跟服务模型一样在服务端跑一个调试进程，但考虑实现复杂暂直接利用浏览器的调试功能。另由于作者的半吊子Web前端水平，暂没有搞定sourcemap，所以浏览器调试器内显示的源码是视图设计器编译转换过后的，比较丑陋，具体参考下图所示：

• Tip: 在调试器Sources面板快捷键CMD+p然后输入{应用名}.{视图名}如sys.Home.js可以快速定位编译转换后的源码。

三.本篇小结

  目前实现的部分用来开发网站、中后台系统、微信公众号之类的应用是没有问题的，待将来Google开源了Hummingbird后作者还想在IDE内实现移动App的用户界面开发。目标很远大，道路还很漫长，待作者整理好前端工程的代码后将率先开源，希望感兴趣的同志共同参与。如果您有问题或Bug报告，请留言或在Github提交Issue。