算盘 app 的基本概念
上篇文章我们介绍了，算盘就是一个开发环境，低代码开发平台。底层基于自研高效混合流计算引擎，向上提供基于组件、拖拉拽图形化的编程方式。这里简要说明下几个基本的概念。
当拖动组件（内置组件或自定义的组件等）到编辑面板后，这些组件就实例化成了节点，这些节点可以单独修改配置或各种参数，即组件是静态的模板，节点是实例化后的组件，类似于你在操作系统上安装后的静态程序（组件）和运行后的进程（节点）之间的关系。但是有时我们也称这些节点为组件，因为这些词语本身意思就很接近，我们平常生活中交流都是广义狭义概念不分的，明白当时场景的上下文指的是啥就可以了。
另外，整个编辑面板所有组件（节点）的集合就是所谓的算盘应用（app）了，它其实本身也是静态的模板，算盘平台保存的 app 其实都是一些文本信息的静态集合，当你部署项目（启动 app）后，它就是动态的进程集合了。见下面小节介绍的 app 运行机制。
算盘 app 的运行机制
如上图所示，每个启动的 app 都是这样的逻辑：当部署 app 后，算盘平台就会启动一个所谓的【启动器】进程，它会拉起【混合流计算引擎】以及所有需要启动的节点进程。节点间的消息并不是直接路由到对应的下游节点，而是全部路由到【混合流计引擎】中，由它完成消息到下游节点的路由转发，在这里【混合流计算引擎】所启的作用类似于网络设备中路由器的角色。
算盘中的组件是有类型区分的，不同类型的组件有不同的启动逻辑以及消息路由逻辑的，这也是【启动器】和【混合流计算引擎】2个重要的基础服务组件所要完成的功能。
后面板举例
这个 app 很简单，搭建不再赘述。注意底下的日志栏可以看到应用以及每个节点的 logkit（告警）日志，点击日志信息可以跳转到更加详细的应用输出（标准输出流）日志。开启实时数据，还可以看到流向每个节点的实时消息等。
前面板举例01
后面板是通过组件连线编排实现数据流计算、调度、控制，即你的应用的功能逻辑，数据业务逻辑。前面板是人机界面设计区，通过图表、表单、页面元素等组件拼装成可访问的Web页面。在编辑区域右下角可以随时切换后面板和前面板区域，进行前、后面板同时编辑。
比如，在上述 app 的基础上，我们定制化一个前面板。
拖动了2个【文本】控件到前面板，版式如上图所示，一个位置为上左，一个位置为下右，然后回到后面板编辑区中，我们会看到多出来2个【显示文本】节点，这是你在前面板编辑时动态生成的节点，这种节点我们称作前面板节点。
为什么前面板节点也在后面板编辑呢？那是因为在前面板编辑的是“所见即所得”的最终展示页面，主要针对排版样式，而每个前端控件元素的数据来源于哪呢，最终还是来源于产生数据的后面板节点，所以，还需要在后面板编辑前面板节点，决定每个不同的前面板节点的数据源来自于什么地方。
如上，运行 app 后，点击右上角【预览前面板】，即可看到 app 的前端页面排版样式就是我们在前面板编辑时的版式，而且显示的文本内容就是 app 中它们的上游节点【字符串】发出的消息数据。
前面板举例02
前面板提供的是一个人机交互页面，不仅只有展示功能，而且还有交互输入功能等。在上面的例子基础上，我们丰富下场景。在前面板编辑区左侧【表单】栏下，拖动一个【文本域】元素，并且在后面板编辑区，将【文本域】前面板节点连接到其中一个【显示文本】前面板节点。
当启动 app 后，预览前面板，你会发现，当你在【文本域】前端元素输入框中输入不同的文本内容时，后面那个【显示文本】前端元素处会同步显示一样的文本内容，逻辑正常，因为中间并没有其它节点对消息数据进行修改或替换。
那么这种前、后面板不同的节点是如何一起工作的呢？
如上所示，算盘是一个 electron 应用，页面都是普通的浏览器页面。当前面板编辑排版完页面后，算盘只是保存了对应的 html、jss、css 等前端包到数据仓库中。当成功启动 app 后，通过预览前面板即可浏览到网页内容，这其中的本质逻辑是，算盘把保存的 html、jss、css 等资源包传到了前端浏览器。所以，前面板节点都是虚的，每个前面板节点都会一一对应到前端资源包的一部分。那么前、后面板的节点间的数据传递是如何实现的呢？
既然前面板本质的逻辑就是浏览器网页，那么数据传递的链路也就比较明确了。只能是浏览器中的 js 代码部分与后面的【混合流计算引擎】进行交互了。后面节点的数据通过【混合流计算引擎】路由到前端的控件元素进行展示，前端表单数据的提交通过【混合流计算引擎】路由到后面的节点中。这就是算盘的前面板节点与后面板节点协同组合起来的整个 app 的运行机制。
注意事项
前面板节点主要是交互用的，编辑模板时一般不是放到后面作为展示元素，就是放到前面作为输入元素，不要把前面板节点当作后面板节点一样参与消息数据的逻辑处理。
