本文探讨了Famo.us和ManifoldJS如何解决移动性能问题，帮助开发者构建高性能、跨平台的移动应用。Famo.us是一个JavaScript框架，提供3D布局引擎和物理动画，以提升Web应用的性能。而ManifoldJS则简化了Web体验打包成跨平台原生应用的过程。作者通过实验验证了这两个工具的结合，可以创建以本机速度运行且易于部署的应用。
自从我在2014年10月看到发布活动以来，最近几个月我一直想深入了解这个新JavaScript框架。Famo.us包括一个完全与可渲染的3D物理动画引擎集成的开源3D布局引擎。到DOM，Canvas或WebGL。 简而言之，您可以从Web应用程序中获得本机性能，这在很大程度上是由于Famo.us处理其内容呈现的方式。
Web平台Podcast的Jenn Simmons 最近与Famo.us首席执行官Steve Newcomb一起在播客中讨论了移动性能及其即将推出的混合模式。 这是一个完美的时机，因为Microsoft刚刚发布了ManifoldJS ，该工具可让您将Web体验打包为跨Android，iOS和Windows的本机应用程序。 我想对这两种技术进行测试。
简而言之，我想确定Famo.us是否确实具有出色的移动性能，并了解将Web应用程序打包为移动应用程序的过程有多简单。
这两件事解决了什么问题？
Web不一定因创建高性能应用程序而闻名，这很可惜，因为它确实能够开发出快速交互的应用程序，但可悲的是DOM困扰了它。 借助HTML5 canvas，WebGL和asm.js之类的技术，该浏览器确实可以成为尖端交互性的游乐场。 Famo.us旨在解决此问题，解决大多数Web应用程序（即DOM）的瓶颈，并利用WebGL从DOM中提取您的工作。 稍后再详细介绍。
ManifoldJS的目的是通过利用Web App Manifests来使移动开发人员的生活比以往更加轻松，允许网站声明类似于app的属性。 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页面上的内容 。
我打开了著名的入门工具包文件夹，然后导航到/ reference-tutorials并找到了/ slideshow和/ timbre的文件夹。 幻灯片非常聪明； 它会从Picasa抓取图像并将其绘制到屏幕上，就像它们是由宝丽来相机拍摄的一样。 您可以在我的网站上找到此版本的实时版本 。
开箱即用，但是没有用。
我很快意识到了问题所在。 他们的样本指向无效的Picasa URL 。 该示例发布以来已经过去了六个多月，所以我希望现在可以对其进行更正，因为我想这对于许多学习使用此其他出色框架的人来说是一个阻碍。
一旦更改了SlideData.js文件中的URL，一切都很好。 该项目要做的是从Picasa相册中抓取图像并将其绘制到屏幕上。 每次单击，相机都会放下当前图像，然后从相机正面弹出一幅新图像，并在您的眼前Swift暴露出来，同时将一些不错的物理效果应用于图像的来回摇摆。 可在Famo.us网站上找到有关创建此项目的分步说明。
/ timbre文件夹中还有另一个项目，但是我也无法使它正常工作。 不过，您可以在Famo.us网站上找到相关的教程，并且至少逐步完成自己构建它的过程。
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）是一位出色的Web开发人员，以她CSS工作而闻名，他很好地解释了浏览器内部的重排和重绘 ，以及如何避免这些问题。 幸运的是，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 /演讲中很好地解释了托管网络应用。 // BUILD 2015的视频完全展示了您可以使用此技术执行的操作。
我的设定
我正在使用运行Yosemite 10.10.3，将Visual Studio Code作为我的IDE和将MAMP作为我的本地Web服务器的MacBook Pro进行本教程。 然后，我将Source Tree用作我选择的Git工具，并将开源代码托管在GitHub上 ，然后将通过Xcode部署到iOS。
我知道，微软的技术传播者使用Apple产品并向您介绍了开源工具。 世界将走向何方？
放在一起
我所做的第一件事是从他们的网站下载Famo.us示例。 如上所述，我对他们的SlideData.js文件进行了适当的更改，以便我的项目能够从Picasa提取提要。 我已将其上传到GitHub，以便您有一个可以立即使用的示例。 查看实时站点 ，并前往GitHub 下载工作项目 。
之后，我登录到Azure并创建了一个新网站。 您可以获得价值200美元的Azure试用信用 ，或者与您联系或免费获得BizSpark会员资格，以获取您自己或您的创业公司的费用，每月可获赠150美元的虚拟主机。
然后，我将这个新的Azure网站指向我的GitHub存储库。 斯科特·汉塞尔曼（Scott Hanselman）只需几个步骤，便会说明如何做到这一点。 从那里，我让Azure监视此项目的GitHub存储库，并且我推送到该存储库的任何更改都将被AzureSwift接收，并且可以在网站上立即查看最新更改并清单项目。
生成应用清单
接下来，我们需要使用ManifoldJS来“包装”我们的Web应用程序，以便我们可以将其部署到各种应用程序商店中。 Firefox OS和Chrome本身支持此功能，但对于iOS，Android和Windows 8或10，我们需要使用Cordova。 ManifoldJS将为我们生成一个应用清单文件，其中包含应用商店存储的所有信息，以使我们的项目得以开展。
您在这里有两个选择：使用Manifold Web App Generator ，它将提供GUI和分步说明，或者通过命令行运行它。
另外，对于命令行，您需要先安装ManifoldJS。 确保已安装NPM ，然后运行：
npm install -g manifoldjs/manifoldjs到目前为止和我在一起？ 现在我们可以调用ManifoldJS并为我们为每个平台的项目生成一个文件夹。 在终端中，我输入：
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，并将其包装在ManifoldJS中以测试iOS上的性能。 如果您想调试这些应用程序，我是否建议您查看VorlonJS ？ 它与平台无关，需要花费一分钟的时间进行设置，并且在上面的链接中，我说明了如何在台式机浏览器以及移动设备上测试应用程序。
我真的很想强调测试将Famo.us和Cordova之类的框架组合在一起时移动浏览器的功能，因此请尽快查找涉及这两者的示例。 随着网络的不断发展，Microsoft将继续更新其dev.modern.ie/platform/status/网站，以反映对新Edge浏览器的更改。 不过，对我而言，最令人激动的公告是asm.js从“正在开发”标签更改为“处于边缘”标签。 不久，我们将能够在浏览器内部运行本机应用程序 。 在网络上工作真是令人兴奋。
使用JavaScript进行更多操作
这可能会让您感到有些惊讶，但是Microsoft在许多开源JavaScript主题上有大量免费的学习知识，并且我们的使命是使用Microsoft Edge创建更多的东西。
以下是我的团队和同事的一些宝贵资源：
- 托管的Web应用程序和WebPlatform创新 ：深入研究诸如歧管
- Microsoft Edge Web Summit2015 ：全新的浏览器，新的Web平台功能以及社区来宾演讲者的完整期望系列
- // BUILD /和Windows 10的精华 ：包括适用于网站和应用程序的新JavaScript引擎
- 在不中断网络的情况下推进JavaScript ：Christian Heilmann最近的主题演讲
- 实用的性能技巧，使您HTML / JavaScript更快 ：从响应设计到休闲游戏到性能优化的七部分系列
- 现代Web平台快速入门 ：HTML，CSS和JavaScript的基础
还有一些免费的入门工具： Visual Studio Code ， Azure试用版和跨浏览器测试工具 -均适用于Mac，Linux或Windows。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享 Microsoft Edge 和新的 EdgeHTML渲染引擎 。 获取免费的虚拟机或在Mac，iOS，Android或Windows设备上@ http://dev.modern.ie/ 进行远程测试 。
2321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
