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。