UI 层和逻辑层的划分

YIS 采取了类似小程序的架构，分为逻辑层和UI层。UI 层运行在 WebView 中，而逻辑层运行在独立的 JS 引擎中。相应地，整个应用的代码，也分为两个大的部分，一部分运行在 WebView 中，一部分运行在JS引擎中。JS引擎计算DOM结构输出给WebView，WebView转发用户的点击事件给JS引擎。

以一个Button组件为例：需要在 WebView 端响应用户的点击，并且转给 JS 引擎中 onTouchTap 的回调；当 JS 引擎中修改 Button 的文本后，会输出一份新的 DOM 给 WebView。

开发一个这样的Button至少需要写三个文件：

1. 一个 css 样式表；
2. 一个 WebView 初始化 touch 事件的文件；
3. 一个 JS 引擎中执行业务回调逻辑的文件。

显然编写这样的组件比编写React组件要费劲很多。不过并不是所有的组件都需要这样编写。因为：

1. 页面上并非所有的组件都是交互性质的；
2. 可以通过组装现有组件来形成新的组件；

也就是说只有开发比较基础的组件的时候，才会需要这样写。大部分情况下，你只需要编写 JS 引擎中的逻辑回调即可。这就和 React 组件开发的体验一致了。

比如说，当我需要一个 Dialog 组件的时候，就可以借用 Button 已有的功能，只需要编写 JS 引擎侧的逻辑即可。

另外 YIS 内置了一些常用的基础组件，所以大部分情况下都可以保持 React 的开发体验。