本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
自从我在2014年10月看到发布活动以来，最近几个月我一直想深入了解这个新JavaScript框架。Famo.us包含一个完全集成了3D物理动画引擎的开源3D布局引擎，该引擎可以渲染为DOM，Canvas或WebGL简而言之，您可以从Web应用程序中获得本机性能，这在很大程度上是由于Famo.us处理其内容呈现的方式。
Web平台播客的Jenn Simmons 最近与Famou.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来使移动开发人员的生活比以往更加轻松，该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上找到的内容 。
我打开了famous-starter-kit文件夹，然后导航到/reference-tutorials并找到了/slideshow和/timbre文件夹。 幻灯片非常聪明； 它会从Picasa抓取图像，然后将它们绘制到屏幕上，就像它们是来自宝丽来相机一样。 您可以在我的网站上找到此版本的实时版本。
开箱即用，它没有用。
我很快意识到了问题所在。 他们的样本指向无效的Picasa URL 。 该示例发布以来已经过去了六个月，所以我希望现在可以对其进行更正，因为我想这会对许多学习使用该原本出色的框架的人造成不利影响。
一旦更改了SlideData.js文件中的URL，一切都很好。 该项目要做的是从Picasa相册中抓取图像并将其绘制到屏幕上。 每次单击，相机都会放下当前图像，然后从相机正面弹出一幅新图像，并在您的眼前Swift暴露出来，同时将一些不错的物理效果应用于图像的来回摇摆。
/timbre文件夹中还有另一个项目，但是我也无法使它正常工作。 不过 ， 您可以在此处找到相关的教程 ，至少可以逐步完成自己构建它的过程。
Famo.us如何工作？
在这里，我不会花太多时间来介绍Famo.us的细节，但是，如果您真的想深入研究，那么Medium上的这篇文章是一个很好的概述 。
从Famo.us网站：
与DOM交互时充满了性能问题。 Famo.us抽象化DOM管理[…]如果检查运行Famo.us的网站，您会发现DOM非常平坦：大多数元素都是彼此的同级。 [...]开发用于嵌套HTML元素，因为这是获得相对定位，事件冒泡，和语义结构的方式。 但是，这一切都有代价：相对定位会导致动画内容的页面重排缓慢； 如果不仔细管理事件传播，则事件冒泡是昂贵的； 并且语义结构与HTML中的视觉呈现没有很好的分离。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
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应用程序，但仍可以通过rdova本身或活动的插件社区访问设备的许多本机功能。
Jeff Burtoft 在他的博客或最近的// BUILD /演讲中很好地解释了托管网络应用。
// BUILD 2015的这段视频完全展示了您可以使用此技术做什么
我的设定
我正在从运行Yosemite 10.10.3， Visual Studio Code作为我的IDE和MAMP作为我的本地Web服务器的Mac Book Pro上完成本教程。 然后，我使用Source Tree作为我选择的Git工具，并将开放源代码托管在GitHub上 ，然后将通过Xcode部署到iOS。
我知道– Microsoft的技术推广人员使用Apple产品并向您介绍了开源工具。 世界将走向何方？
放在一起
我所做的第一件事是从他们的网站下载Famo.us示例。 如上所述，我对他们的SlideData.js文件做了适当的更改，
这样我的项目就可以从Picasa提取供稿。 我已将其上传到GitHub，以便您有一个可以立即使用的示例。 在此处查看实时站点，并前往GitHub 下载工作项目 。
之后，我登录到Azure并创建了一个新网站。 您可以在此处获得价值200美元的Azure试用信用，或者与您联系或免费获得BizSpark会员资格，以获取您自己或您的创业公司的费用，每月可获得150美元的虚拟主机。 然后，我将这个新的Azure网站指向我的GitHub存储库。 斯科特·汉塞尔曼（Scott Hanselman）只需几个步骤，便会说明如何做到这一点。
从那里，我让Azure监视此项目的GitHub存储库，并且我推送到该存储库的任何更改都将被Azure立即接收，并且可以在网站和Manifest项目上立即查看最新更改。
生成应用清单
接下来，我们需要使用ManifoldJS来“包装”我们的Web应用程序，以便我们可以将其部署到各种应用程序商店中。 Firefox OS和Chrome本身支持此功能，但对于iOS，Android和Windows 8或10，我们需要使用Cordova。 ManifoldJS将为我们生成一个App Manifest文件，其中包含应用商店存储的所有信息，以使我们的项目继续进行。
您在这里有两个选择：使用Manifold Web App Generator ，它将提供GUI和分步说明，或者通过命令行运行它。
另外，对于命令行，您需要先安装ManifoldJS。 确保已安装npm ，然后运行：
npm install -g manifoldjs/manifoldjs到目前为止和我在一起？ 现在，我们可以调用Manifold并为其生成一个文件夹，其中包含每个平台的项目。 在终端中，我输入：
ManifoldJS -d /Users/DaveVoyles/Documents/FamousManifold
-d后面的路径告诉ManifoldJS我希望将其存储在哪个目录中。 之后不久，您应该在终端上构建项目。
导航到该项目的存储位置，您将在其中找到一系列文件夹。 然后，我导航到cordova / platforms / iOS，并寻找以xcodeproj,结尾的文件xcodeproj,因为我想在iOS模拟器中进行测试。 双击该图标以Xcode打开项目。
我们有了它，一个Famo.us应用程序在iOS的Cordova内部运行。
包装全部
我计划在我即将发布的演示中试用Angular + Famo.us，并将其包装在Manifold中以测试iOS上的性能。 如果您要调试这些应用程序，我是否建议您查看VorlonJS？ 它与平台无关，需要花费一分钟的时间设置，并且在上面的链接中，我说明了如何在台式机浏览器以及移动设备上测试应用程序。
我真的很想强调测试在组合Famo.us和Cordova之类的框架时移动浏览器的功能，因此请尽快查找涉及这两个示例。 随着网络的不断发展，Microsoft将继续更新其状态。modern.ie 网站以反映对新Edge浏览器的更改。 不过，最令我兴奋的公告是asm.js从“开发中”标签转换为“边缘”标签。 很快，我们将能够在浏览器内部运行本机应用程序 –这是在Web上工作的激动人心的时刻。
JavaScript的更多动手实践
这可能会让您感到有些惊讶，但是Microsoft在许多开源JavaScript主题上有大量免费的学习知识，并且我们的使命是使用Microsoft Edge创建更多内容。
或我的团队和同事：
- 托管的Web应用程序和Web平台创新 （深入研究诸如歧管JS之类的主题
- Microsoft Edge Web Summit 2015 （有关新浏览器，新Web平台功能和社区来宾演讲者的完整预期系列）
- // BUILD /和Windows 10的构建 （包括用于站点和应用程序的新JavaScript引擎）
- 在不中断网络的情况下推进JavaScript （Christian Heilmann最近的主题演讲）
- 使您HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的7个系列文章）
- 现代Web平台JumpStart （HTML，CSS和JS的基础知识）
还有一些免费的入门工具： Visual Studio Code ， Azure试用版和跨浏览器测试工具 -均可在Mac，Linux或Windows上使用。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 免费获得虚拟机或在Mac，iOS，Android或Windows设备上进行远程测试， 网址为http://dev.modern.ie/
翻译自: https://www.sitepoint.com/creating-mobile-app-famo-us-manifold-js/
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
