使用 Famo.us 和 ManifoldJS 创建移动应用

Dave_Voyles

5.00/5 (4投票s)

2015年7月2日

CPOL

10分钟阅读

21058

简而言之，我想确定 Famo.us 是否真的具有出色的移动性能，并了解将我的 Web 应用程序打包成移动应用程序的过程有多么直接。

在过去的几个月里，自从我看了他们 2014 年 10 月的发布会后，我一直想深入研究这个新的 JavaScript 框架。Famo.us 包含一个开源的 3D 布局引擎，该引擎与 3D 物理动画引擎完全集成，可以渲染到 DOM、Canvas 或 WebGL。简而言之，您可以从 Web 应用程序中获得原生性能，这在很大程度上归功于 Famo.us 处理其内容渲染的方式。

Web Platform 播客的 Jenn Simmons 最近邀请了 Famou.us 的 CEO Steve Newcomb 参加播客，讨论了移动性能和他们即将推出的混合模式。这是完美的时机，因为微软刚刚发布了 ManifoldJS，这是一个允许您将 Web 体验打包为 Android、iOS 和 Windows 上原生应用程序的工具。我想对这两种技术进行测试。

简而言之，我想确定 Famo.us 是否真的具有出色的移动性能，并了解将我的 Web 应用程序打包成移动应用程序的过程有多么直接。

这两样东西解决了什么问题？

Web 并不一定以创建高性能应用程序而闻名，这很可惜，因为它确实能够创建闪电般的交互式应用程序，但遗憾的是，它一直受到 DOM 的困扰。借助 HTML5 canvas、WebGL 和 asm.js 等技术，浏览器确实可以成为前沿交互的游乐场。Famo.us 旨在解决这个问题，绕过大多数 Web 应用程序的瓶颈——即 DOM，并利用 WebGL 将您的工作与 DOM 分离开。稍后将对此进行更详细的介绍。

ManifoldJS 旨在通过利用 Web 应用清单，使移动开发者的生活比以往任何时候都更轻松，这允许网站声明类应用程序属性。ManifoldJS 对支持它的平台使用该标准，但对不支持的平台则回退到 Cordova。Cordova 非常好，但 W3C 还考虑了在 Mozilla（Firefox Open Web Apps）、Google（Chrome Hosted Apps）和 Microsoft（Windows 8 曾有本地 Web 应用，Windows 10 扩展到托管 Web 应用）完成的工作。有了这个，我们现在可以封装网站并创建混合应用程序，这些应用程序可以部署在各种应用商店中，同时仍然可以利用每个设备的许多原生功能（联系人、日历、文件存储、陀螺仪、GPS 等）。

当我们结合使用这两种技术时，我们可以以原生速度创建应用程序，并将其部署在多个应用商店中，并且主要使用一个代码库。移动开发没有一劳永逸的解决方案，但这无疑使过程变得更加容易。

开始使用 Famo.us

Famo.us 有一个大学页面，它是理解框架工作原理的绝佳起点，并提供了一些示例项目。我完成了大学网站上的所有课程，并对框架的工作原理有了相当清晰的了解。他们还与其他库（如 Angular）集成了，但我还没有时间深入研究。

接下来，我点击了页面右上角的链接，下载了他们的指南和两个示例项目包。这与在他们的 GitHub 上找到的内容不同。

我打开了 famous-starter-kit 文件夹，导航到 /reference-tutorials，找到了 /slideshow 和 /timbre 文件夹。Slideshow 非常巧妙；它从 Picasa 获取图像，并将它们绘制到屏幕上，就像它们是刚从宝丽来相机中取出的一样。您可以在我的网站上找到此版本的在线版本。

不过，开箱即用时，它并不能正常工作。

但我很快就意识到了问题所在。他们的示例指向了一个无效的 Picasa URL。自该示例发布以来已经过去了六个月，所以我希望它现在应该已经更正了，因为我认为这会阻碍许多人学习使用这个非常棒的框架。

一旦我在 SlideData.js 文件中更改了 URL，一切就正常了。该项目从 Picasa 相册获取图像并将其绘制到屏幕上。每次点击，相机都会丢弃当前图像，然后一幅新的图像从相机前面弹出，并在您眼前快速曝光，同时还应用了一些漂亮的物理效果来模拟图像的来回摆动。

创建此项目的分步说明可在此处找到.

/timbre 文件夹中还有另一个项目，但我也没能让它正常工作。不过您可以在此处找到相关的教程，至少可以逐步了解其构建过程。

Famo.us 是如何工作的？

我不会在这里花太多时间详细介绍 Famo.us，但如果您真的想深入了解，这篇 Medium 文章是一个很好的概述。

来自 Famo.us 网站

与 DOM 交互充满了性能问题。Famo.us 抽象了 DOM 管理 [...] 如果您检查运行 Famo.us 的网站，您会发现 DOM 非常扁平：大多数元素都是彼此的同级元素 [...] 开发人员习惯于嵌套 HTML 元素，因为这是获得相对定位、事件冒泡和语义结构*的*方法。然而，这都有代价：相对定位会导致动画内容在页面重排时变慢；当事件传播未仔细管理时，事件冒泡会非常耗时；在 HTML 中，语义结构与视觉渲染并未很好地分离。

Famo.us 承诺提供丰富的 60 FPS 体验，为此，我们需要规避这些低效率。

通过利用 CSS3 原语 -webkit-transform: matrix3d 以及它提供的硬件加速，我们可以获得比仅仅调整 DOM 更好的性能。任何时候您触碰 DOM，都会非常耗时。Nicole Sullivan，一位因其 CSS 工作而闻名的优秀 Web 开发人员，对浏览器内的重排和重绘及其避免这些问题的方法进行了出色的解释。幸运的是，Famo.us 将所有这些都抽象掉了。

与编写任何 HTML 代码相反，我们所有的 Famo.us 代码都将在 JavaScript 中完成。看看他们在 CodePen 上的一些示例，以便更好地了解您实际编写的 HTML（无）以及 JavaScript 的样子。在即将发布的教程中，我将比在这里更深入地探讨 Famo.us。

这下说到点子上了！浏览器中的一些高性能应用程序！

ManifoldJS 是如何工作的？

ManifoldJS 的安装过程非常直接。查看他们的 GitHub 获取更多信息。Jeff Burtoft 还在 ThisHereWeb.com 上指导您创建托管 Web 应用程序的过程。

该项目将在未来几个月内不断发展。仅在上周，我就看到了几项新增功能。在本地支持 Web 应用程序的平台上，如 Windows 10、Chrome OS 和 Firefox OS，ManifoldJS 将创建原生包。在 iOS 和 Android 等平台上，将使用 Cordova，这允许开发人员编写 Web 应用程序，但仍可以通过 Cordova 本身或活跃的插件社区访问许多设备的本机功能。

Jeff Burtoft 在他的博客或最近的//BUILD/ 演示文稿中很好地解释了托管 Web 应用程序。

来自 //BUILD 2015 的这段视频展示了您可以使用这项技术做些什么

我的设置

我正在使用运行 Yosemite 10.10.3 的 Mac Book Pro、Visual Studio Code 作为我的 IDE 和 MAMP 作为我的本地 Web 服务器来完成此教程。然后，我使用 Source Tree 作为我选择的 Git 工具，并将我的开源代码托管在GitHub 上，我将通过 Xcode 部署到 iOS。

我知道，一个微软的技术传道士使用苹果产品并告诉您有关开源工具的信息。世界怎么了？

整合所有内容

我做的第一件事是从他们的网站下载了 Famo.us 示例。如前所述，我对他们的 SlideData.js 文件进行了适当的更改，以便我的项目能够从中提取 Picasa 的信息流。我已经将其上传到 GitHub，以便您有一个立即就能正常工作的示例。在此处查看在线站点，并前往 GitHub下载正常工作的项目。

之后，我登录了 Azure 并创建了一个新网站。您可以在此处获得价值 200 美元的 Azure 试用积分，或者联系我获取免费的 BizSpark 会员资格（供您自己或您的初创公司使用），可获得每月 150 美元的 Web 主机托管。然后，我将这个新的 Azure 网站指向我的 GitHub 仓库。Scott Hanselman 在几步中解释了如何做到这一点。从那里开始，我让 Azure 监控我的 GitHub 仓库中的项目，任何我推送到该仓库的更改都会立即被 Azure picked up，并且最新的更改可以立即在网站和 Manifest 项目中查看。

生成应用清单

接下来，我们需要使用 ManifoldJS 来“封装”我们的 Web 应用，以便我们可以将其部署到各种应用商店。Firefox OS 和 Chrome 原生支持此功能，但对于 iOS、Android 和 Windows 8 或 10，我们需要使用 Cordova。ManifoldJS 将为我们生成一个应用清单文件，其中包含应用商店成功启动我们的项目所需的所有信息。

这里有两个选项：使用Manifold Web 应用生成器，它将提供图形用户界面和分步说明，或者通过命令行运行它。

或者，对于命令行，您需要先安装 ManifoldJS。请确保您已安装 NPM，然后运行

npm install -g manifoldjs/manifoldjs

到目前为止跟我来了吗？现在我们可以调用 Manifold，让它为我们生成一个包含各个平台项目的文件夹。在终端中，我输入了

ManifoldJS -d /Users/DaveVoyles/Documents/FamousManifold
http://famous-camera-app.azurewebsites.net/final/

-d 后面的路径告诉 ManifoldJS 我希望它存储到的目录。很快，您应该会看到终端在您眼前构建项目。

导航到您存储该项目的位置，您会发现那里有一系列文件夹。然后我导航到 cordova/platforms/iOS 并查找以 xcodeproj 结尾的文件，因为我想在 iOS 模拟器中测试它。双击该图标以在 Xcode 中打开项目。

这样，我们就得到了一个 Famo.us 应用程序，它在 iOS 上的 Cordova 中运行。

总结

我计划在我的下一个演示中尝试 Angular + Famo.us，并将其封装在 Manifold 中以在 iOS 上测试性能。如果您想调试这些应用程序，我是否可以建议查看 VorlonJS？它与平台无关，设置起来只需要一分钟，在上面的链接中，我说明了如何在桌面浏览器和移动设备上测试应用程序。

我真的很想对移动浏览器在结合 Famo.us 和 Cordova 等框架时的能力进行压力测试，所以请期待一个涉及这两者的示例。随着 Web 的不断发展，微软将继续更新其dev.modern.ie/platform/status网站，以反映新 Edge 浏览器的变化。对我来说，最令人兴奋的公告是 asm.js 最近从“开发中”标签切换到了“Edge”标签。很快我们就能在浏览器中运行原生应用程序了——这是从事 Web 开发的激动人心的时代。