JavaScript 开发人员社区热烈祝贺 开源 UI 呈现框架的公共 beta 版于 2014 年春季发布。Famo.us 承诺解决一些最新的瓶颈问题，这些问题让 JavaScript 和 Web 技术无法统治移动开发领域：缓慢的 UI 和较差的用户体验 (UX)。
Famo.us 的目标是利用移动设备上的硬件图形处理单元 (GPU)，以实现最高的呈现帧速率；为了实现赏心悦目的 UX，它还添加了一个复杂的物理引擎。为移动应用创建 UI 时，JavaScript 开发人员与 Objective-C、Swift 或 Java™ 开发人员相比不再处于劣势。
本文介绍了 Famo.us 的基本概念并探讨了其设计情况。然后，我们还介绍了多个工作示例，包括一个典型的移动应用 UI，您在使用 Famo.us 进行开发时可将其用作应用程序模板（参见 部分，以便获得完整的示例代码。）
Famo.us 的工作原理我们通过快速显示连续的页面（帧）来创建动画，当然这些页面中的元素会发生变化。帧速率 是指每秒显示的帧数。较高的帧速率可以在人的视觉中实现运动的错觉，因为人眼有一种 “视觉暂留” 特性（电影也运用了相同的原理）。为了在 Web 页面上实现动画效果，每一帧中各种元素的风格属性（位置、颜色和不透明度）都要进行更改。这些属性的更新速度最终决定了 UI 的最大帧速率。为了与 Web 应用程序进行交互，60 帧/秒 (fps) 是平滑的、类似于本机应用程序 UX 的最优速率。如果无法始终实现 60 fps 的速率，则会出现令人不快的 UX 效果，如动画呈现抽筋状 (jerkiness) 和丢帧（统称为 Jank）。
rAF 现代浏览器通过 rAF 机制支持各种动画库。requestAnimationFrame() 将回调函数作为一个参数。浏览器在下一个屏幕更新前调入回调函数，通常是在 60 fps 所对应的 16.7 ms 时间窗内完成该工作。动画库实现必须在 rAF 处理期间再次调用 rAF，以便设置下一帧的回调。不同浏览器之间对 rAF 的支持也不尽一致。Chrome 和 Firefox 现在默认支持 rAF。Safari rAF 支持需要在代码中使用一个特殊的厂商前缀。Famo.us 在内部使用一个 polyfill shim 解决方案来适应这些差异。
Famo.us 的核心是一个跨浏览器的高性能 UI 布局，并且使用其自己的动画和物理引擎优化了库，这些引擎是用 JavaScript 编写的。Famo.us 已进行了优化，可在最可能短的时间/帧内完成其工作（最近的 Famo.us 基准测试表明，Famo.us 只会占用每个 16.7 ms 帧的 1 到 2 ms，同时可处理典型的动画并且没有其他任何性能开销。）然后就能用最佳的帧速率来呈现目标 UI，这个最佳的帧速率通常最低是 60 fps。Famo.us 项目已承诺在所有后续版本中会保持或提高此 fps 性能。
在操作方面，Famo.us 将典型的以 DOM 为中心的布局操作以及 2D 或 3D 动画替换为自己的高性能替代物。图 1 展示了 Famo.us 的内部工作原理。通过浏览器的 回调函数为每个帧调用 Famo.us 引擎（一个单例 [singleton]对象）。每秒 60 次与 60 fps 或 1/60s (16.7 ms)/帧相对应。在 Famo.us 中，每次回调都被称为一次引擎 运作 (tick)。
图 1. Famo.us 库的运行原理 Famo.us APIFamo.us API 为开发人员提供了其自己的一组高级可组合对象，比如 表面 (surfaces)、视图 (views) 和 widget。您的 Famo.us 代码会创建要呈现的场景图（目前在 Famo.us 中称为呈现树）、连接事件处理，并指挥或安排各种动画。
Famo.us 场景图中的每个节点都是一个呈现节点。期间会按照呈现规范 和构建规范 来处理场景图，而 Famo.us 呈现组件会在内部使用它们，让目标的更新工作更高效。
呈现组件会以受支持的帧速率（目前是 60 fps）来评估场景图，并向浏览器的 DOM、Canvas 元素或 WebGL 输出所需的更新（Famo.us 的 beta 实现只将浏览器的 DOM 作为目标）。Famo.us 的设计宗旨是向任何支持的目标输出内容，甚至可以同时向多个目标输出内容（支持多模式操作)，只要它们在同一个屏幕上。
表面和可呈现对象在 Famo.us 中，您要组合各种可呈现对象 并为其制作动画。最低级的常见可呈现对象是 Surface。在浏览器的 DOM 中显示的 Surface 是一个 <div> 元素。（如果检查 Famo.us Surface，就可以看到 <div>。）Famo.us 中其他特殊类型的 Surface 则通过其他 HTML5 元素来表示：
- Surface 是一个 <div>。
- VideoSurface 是一个 <video>。
- ImageSurface 是一个 <img>。
- InputSurface 是一个 <input>。
- CanvasSurface 是一个 <canvas>。
Surface 类有一个 content 字段。您要在该字段中添加在 Surface（在底层的 <div> 中）上呈现的 HTML。
Famo.us 并不干预您如何或者在何处获得此 content，这是一个字符串，将呈现为 HTML。该字符串是任何模板、数据源或数据绑定技术的一个天然集成点。另外，您还可以操纵微型 DOM，这是通过 HTML 在被呈现的 Surface 上形成的，但布局、容纳或动画工作除外，这些工作应该通过该 Famo.us 来完成。
“使用 Famo.us 进行编程时，在性能和呈现灵活性方面可能会获益匪浅，代价是用直接的立即模式操纵页面的 DOM。”
立即模式与保留模式Famo.us 本身是个保留模式 库。基本上，您可以用声明的方式描述对象场景图（树）的外观和行为。Famo.us 引擎构建一个内存型的表示，然后指出如何有效地更新 DOM（一次一帧）来显示它。但是，目前的 Web 开发人员更熟悉立即模式的 DOM 操作（就像在 jQuery 中一样），因为您的代码可以直接添加或删除元素并修改属性，从而实现 UI。使用 Famo.us 进行编程时，可在性能和呈现灵活性方面获益匪浅，代价是用直接的立即模式操纵页面的 DOM。
比较各个 3D 呈现库Famo.us 的这种架构类似于 WebGL 3D-呈现 JavaScript 库，包括 Three.js 和 SceneJS。了解它们的相似之处和差别有助于快速跟踪对 Famo.us 的掌握情况：
- 在两种架构中，帧呈现是通过浏览器 rAF 触发的。
- 在 3D 呈现库中，您可在场景图中定位并放置三角形和 2D 对象（如墙壁或地板）以及更高级别的 3D 几何图形（如棱锥、球体、立方体或多边形网格）。在 Famo.us 中，您可在场景图中定位并放置 2D 表面或更高级别的对象，如视图或 widget。
- 在 3D 呈现库中可转换一个对象，方法是在场景图中添加和链接转换节点，其中该对象是一个叶对象。在 Famo.us 中，可在场景图中添加和链接修饰符 (modifier) 节点，其中一个表面或其他可呈现对象是叶对象。
- 在 SceneJS 中，您可使用 JSON 指定复杂的场景图，并通过图节点上的 ID 属性来修改它。Famo.us 有一个 Scene 组件，您可使用它通过 JSON 来构建复杂的场景图；可通过呈现节点上的 ID 属性来修改它。
- 在 3D 库中，根据 rAF 回调为对象属性设置动画和补间。在 Famo.us 中，会根据 Famo.us 引擎 的每次运作 (tick) 来更新和补间表面（更常用的是可呈现对象）的属性，这些引擎运作是通过浏览器的 rAF 回调来驱动的。
- 3D 库通常包括一个物理引擎，让动画更为真实。Famo.us 则包含一个全面的物理引擎，让动画对用户而言更直观。
- 即使一个 3D 场景中的所有对象都由三角形组成，开发人员也很少需要处理各个三角形，因为 3D 呈现库通常会包括常用的几何形状网格，如球体和棱锥。即使 Famo.us 中的基本可呈现对象是表面，您也很少使用单个表面，因为库中包含了很多预先制作的高级 UI 视图和 widget。
- HTML 在 3D 库中不承担任何角色，除了 Canvas 元素，因为 3D 视口要在该元素上呈现。在 Famo.us 中，HTML 是您在表面上呈现的内容，但是 HTML 不再定义 UI 页面的结构；该结构是通过 JavaScript 代码来指定的。无需再管理大量的 < <div> 或 <table> 标记来控制布局；并且所用的 CSS 只影响元素风格，不会影响布局。（HTML 仍很重要，因为目标为 DOM 时所有视觉元素都是 HTML 元素。）
- 3D 库的呈现组件通常将 Canvas、WebGL 和 SVG 输出作为目标 — 我更喜欢 WebGL，因为它几乎可以直接访问底层的 3D-呈现 GPU 硬件。Famo.us 呈现组件的目标是 Canvas、DOM 和 WebGL。Famo.us 有一个 DOM updater，它使用领先浏览器提供的已知 GPU 优化来实现其性能目标。
|
