界面开发系统组成

pc端，手机客户端，浏览器端的界面开发，可以说是前端开发。他们共同的地方都是使用标准化的UI生成系统，比如window开发，android开发，html/css的开发。他们的UI都会有自己的特点。底层也都是使用了opengl/directX等类似的图形库操作显卡，并展示图形。

同时，通常的界面开发也会同时提供一种非标准化的图形开发方式，让开发人员可以直接通过opengl等底层的图形api画图形，这种方式基本被游戏引擎所采用。我们可以看到游戏里的图形界面基本风格是明显区别于windows 应用软件, android/iOS app,html/css网站的。

基本一个界面开发系统，应该包含基本两部分：

1. 标准化的图形构建方式，比如android的界面的xml生成，各种layout, 组件等，以及浏览器的html/css。 这种适用于构建各种app及网站。

2. 提供直接操作底层图形api的方式，比如android的 GLSurfaceView, 可以在上面直接操作opengl画UI，我们可以看到，android使用相机进行预览时，也是使用了GLSurfaceView，因为相机捕获到的图像是非标准化的。而且大部分游戏也是一样的。对于浏览器来讲，可以使用webgl，及canvas来画更灵活的UI，比如地图，h5游戏等。

标准化界面原理

我们知道，图形界面可以通过xml来描述，比如android及html, 系统解析的基本流程是：

1. 解析xml, 生成抽象语法树。

2. 图形后端根据语法树生成页面。

这个流程有点类似于编译，比如：

1. c语言编译器对c文件进行词法分析，生成抽象语法树。

2. 编译器后端历遍这个语法树，生成汇编指令，汇编指令与机器指令可以直接转换。

平时我们看到的h5界面长按截图的功能，有一部分是使用了html2canvas这个工具来把html/css页面转换成canvas， 实际上就是通过解析抽象语法树并转换成UI的原理来完成的。