【初体验】为Window8开发Web Apps

免责声明：以下内容乃我个人观点，并不代表我公司的意见。我作为一个独立的开发人员，所开发的App属共享资源。

在之前的一篇文章里，我提到过Windows8 版的 TrialTool 。 TrialTool 是一款基于 web 的应用，这款应用充分展示了各种 Javascript 接口的兼容性。它就像是一个接口的容器，任凭你浏览、修改和运行示例。这个版本的 TrialTool 特别展示了各种 Windows8 接口。

1. 背景

这 个应用程序是在Windows 8开发者预览版的Visual Studio 11特别版上开发的。整个应用程序的开发使用了HTML5，CSS和 JavaScript等语言。这个工具还没有涵盖所有的API，但是用到这些接口是Windows8中编程模型的很好的代表。

 2. 开发环境

我的主要IDE是Eclipse或Cloud9，实际上这是我第一次使用VisulStudiio专门去开发一个端对端的项目。

首 先，在VisualStudio中选择一个预定义的项目类型或者是一个单一空白JS模板。这个模板在创建框架和填充代码上做的很好。正如框架一样，对于一 个新手来说，很难一下浏览大量的文件，这些文件是模板的一部分。一旦你知道关于文件和其部分编辑方式，这个模板都是不错的。不幸的是，看上去，目前 Visual Studio是我惟一的选择。因为我找不到任何能够用Eclipse或者Notepad++来创建、打包或者部署的命令行应用程序。

 3. 写代码

创建一个空白项目跟从头写一个网页是一样的。首先我们用到的模板是Metro Style UI 。TrialTool 使用Grid布局模板，此模板是从一个显示项目清单的“索引”页面开始。通过点击每个细目可以将我们带到下一层“细节”页面。

JavaScript 文件是通过模板创建的，我推荐使用严格的方式。

 3.1单页面应用程序

APP 的创建本质上相当于一个单页网站。使用导航浏览网页的时候，从“索引”页面到“细节”页面，导致细节内容作为DOM的一部分被加载。加载和卸载事件使得我 们能够控制每个操作显示的内容。WinJS模块定义的事件，让我们访问这个操作或DOM的片段作为导航加载事件，除此之外还有事件的布局变化（画出平板美 化模式，调整大小，等等），我注意到，在默认情况下，HTML，CSS和JS的文件类型各含有一个目录。我更喜欢通过模块而不是文件类型来给文件分类，文 件类型根据他们的扩展来进行区分。

 3.2 CSS网格

使用ms-grid来定义metro UI非常棒。CSS 网 格布局的仍需改进。Tiles是一个主要的metro UI,并且 ms-gri的实现使得在MetroUI中创建平铺的样式更加简单。

 3.3 数据绑定

该模板也支持数据绑定。通过在HTML标签中，使用data-win-*属性使得视图可以被定义。这些渲染视图可以定义具体的控件（如 ListView），和这些控件的选择。通过AJAX和使用这些“itemRenderers”，JSON数据可以被加载。

这里用到的思想类似于框架，例如Backbone。然而，不像BockBone，当数据改变时自动改变视图这样类似的功能，需要明确的编码。把itemRender指向URL的方式会更好。

另一个我非常喜欢的功能是，能够在item render中声明格式。目前，模型中的数据可以被转换，但这看起来像人为的。使用特定元素的data-win-option来指定格式也非常棒。

3.4 Promises

所有异步操作（如AJAX,读取文件等等）似乎都返回promise。对互动事件驱动应用程序来说，这肯定是很好的，在C#中“async”也是一样的。

我们可以得到更好的承诺文件，看起来，文件是为C#和安装JavaScript写的.例如，像FilePicker这样的操作，返回值是一个promise。然而，看看实际传递给 promise.then() method的参数，你可以导航到“GetResults ”方法。

 4.windows8的接口

开发win8 应用的最主要原因就是我可以使用 win8 接口，另外一个原因就是，这个 App 也是 MetroIE 能够打开的一个网站。

在JavaScript 中添加本地 win8 接口，跟用本地 DOM 方法调用 DOM 是一样的。 Windows8 弹窗和调用本地警示窗口时一样的。使用本地文件接口，或者加密都是非常简单明了的。

有关Windows Runtime 的接口的文档非常详尽，但是如果他们分组的更好，并且第一个列表有高等级的类别（像 Storage ），这样你就可以深入了解特定的 API （ Bulk Access 或 File properties ），这样的情况我会觉得很舒服。自从很多 API 有了共同的概念之后，这对我们看特定的 API 是很有帮助的。

我发现另外一个问题是，在Javascript  语言中 API 所需的功能都没有。举个例子，读取文件的内容返回一个  InputStream  ，这时似乎并没有显示任何Javascript 的 API 。实际上 DataReader 可以用来读取数据，这点上并不是很清楚。

我希望这些API 可以成为类似 HTML5 FILE/Blob 的 API 。

5.调试

使用Visual Studio 进行调试非常棒，以至于你真的忽视 Firebug 和 Web Developer 了。从类似于支持记录断点这样的基本功能到察看 HTML 源代码，调试器都非常强大。为了有更好的经验我会推荐一个双显示器设置。

我发现其中一个不足的功能是，配置（如Speed Trace ） Javascript APP来 解决其性能问题的方式。添加意向单也是调试应用程序的一种手段，（例如 Opera dragonfly ，这也是我喜欢的一个 IE 的功能）。远程调试证明在平板案例中很有用。

通过console.log 打印带来的烦恼仍然存在。如果我们在产品部署中，能把 console.log 和 Windows 应用或系统日志整合在一起会更好。

6.打包和部署

虽然VisualStudio 中有一个存储菜单，但是看上去存储功能并不可用。现在唯一可用的选择是创建一个本地 App 。把这个 App 打包成一个 appx 文件，一个压缩文件和一个验证文件。用 Admin 身份执行这个压缩文件安装这个应用。

7.结论

对于web 开发者来说，选择用 HTML 、 CSS 或者 JS 来开发 windows8 应用非常有吸引力。现有的 web 开发知识可以用在这，但是为了平衡操作系统的，最后熟悉 windows8 提供的接口。

总的来说，这是一个非常强大的方法，把web 开发变成本地应用。希望对于 web 开发者来说，开发 Android 和 iOS 也这样简单。

原文链接：Developing Apps for Windows 8

 

译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博 @WebAppTrend，关注我们的腾讯微博@WebAppTrend，欢迎加入我们的Q Q群：193775364