动态插件化前端开发

首先，是主引擎（/index.html) 异步加载一个动态JS 配置信息。

然后，通过配置信息去动态加载插件。每个插件都可以通过window.xxx与主程序互动。

最后，后端为不同的应用提供数据服务，前端得到数据后可以选择性加载不同的插件。

插件分类

插件可以分为数据源插件，面板插件。

数据源插件主要是完成数据的访问和状态管理。

面板插件主要完成数据的展现。

配置

创建一个应用，后端负责所有配置信息的保存，前端可以通过UI，修改配置。

增加 面板 ，配置面板的设置，比如名称，数据源。

实现

页面的定义

页面就是html，通过文档对象模型（DOM)来实现页面元素的管理。 从开发者的角度看，页面就是元素的结构，样式和数据组成。即：

webpage = html + css + js;

页面的组件化

使用web commponents 实现功能的封装从而使用页面内容可以复用。

从Vue.js前端开发者来看，页面是由组件树构成，这些组件 维护着自身的html, css 和js 组件通过props获取外部传入的数据。

搭建

首先需要对页面的内容进行分类，然后根据不同类型给予约定或约束。通过有编辑模式和显示模式。模板组成方式，组件接入方式，数据集成方式等。 理想的数据集成方式为Json。数据的描述可以使用 Json Schema。这样可以支持表单的动态生成和数据校验等。 组件需要充分利用js动态加载特性。把生成元素结构，样式和数据的逻辑都在Js约定的接口中实现。 Vue.js前端开发者可以使用 Vue动态components技术实现。 模板的目标是减少重复代码，简化开发配置流程。

参考

page-pipeline 和 iceworks