* 这么复杂的 demo 在 MI4 以及配置以上性能很好，流畅度无限接近于 native，比较理想。
* 对比过 G+ 的 Android 应用，G+ 的 App 从动画上比 Flipboard 提供的的 demo 还「卡」些。
* 在小米 Note 上的动画流畅度已秒掉 iPhone 6，非常赞。

按照摩尔定律，可以预计明年 Note 的标配的 CPU 和 GPU 配置会成为主流。

而现在用 canvas UI 框架用在 MI4 以下机器仍然比较慢。而 2015 年 H5 开发 App，对很多公司来说只是 plan B 计划，大公司甚至 plan B 都不是。所以，如果一定要在纯 H5 上搞牛逼动画，还是再等等吧。

布局系统 css layout.

说回到 Canvas Component framework，回到我上面画的这张图：

UI 组件基于「文本」与「图像」。但 framework，除了 UI 组件本身以外，还需要有 Layout，而 css 只适用于浏览器本身的 layout 而无法适用于 Canvas 画布。

要给开发者好且排版可控的方案，那就要开发一个用 JavaScript 实现类似 CSS 的布局子集的框架。

否则 UI 的组件在画布上没有 layout 就无意义。

这个布局框架实现成本（简单实现）理论上并不大，大的是在于未来增加新 Feature 并相互组合时与浏览器本身有差异，需要有完整的 unit test。
正好最近 facebook 也开源了一个用 JavaScript 写 css layout 子集的解决方案，实现了：

* padding
* width
* margin
* border
* flex
* position( relative/absolute )

等等 Feature。

github 地址：https://github.com/facebook/css-layout

这些 css 布局子集基本能满足我们前期开发预期。

开发框架.

用 css-layout 再加上 UI 管理层，就可以比较清晰的实现出 canvas 的 UI 组件框架了。
那么，剩下的事就是：

* 应用开发框架的选择，如：选择 React/MVC 框架。
* 模拟 DOM 层次，即图层管理。

并且，让我非常欣喜的是，Flipboard 在 2 月已经完成了构建，基于 React 框架。

https://github.com/Flipboard/react-canvas

基于 css-layout + React 基础上整合而成。

## Canvas UI 框架不足与风险

看上去 Canvas 框架这么牛逼，但有很多缺陷。

* 对开发人员的要求较高。需要用 JavaScript 实现一些浏览器基本的布局、图层管理。
* 第三方使用者学习成本高。不象是用传统「标签」就可以实现 UI 在浏览器的输出。
* 开发者是否买账，对于框架的开发易用性有「很大」的挑战。
* 对开发质量提出新要求。由于所有的 UI 组件与交互都在画布 Canvas 里，所以调试成本比较高，需要有较为完整的 Logging 与 Debugging 方案。

* 用户可用性会受影响。例如：* 语音无法识别 Canvas 里的文字。* 无法象 WebView 里一样将画布里的文字选中并复制出来。

总结.

Canvas UI 框架作为柳暗花明又一村的技术。https://github.com/Flipboard/react-canvas 短短一周多，已经近 4K 的 star。确实很赞。
与其看 FB 开源 react native，不如好好研究 react-canvas 吧。