第一次為Window8開發(fā)Web Apps
免責聲明：以下內(nèi)容乃我個人觀點，并不代表我公司的意見。我作為一個獨立的開發(fā)人員，所開發(fā)的App屬共享資源。
在之前的一篇文章里，我提到過Windows8版的TrialTool。TrialTool是一款基于web的應用，這款應用充分展示了各種Javascript接口的兼容性。它就像是一個接口的容器，任憑你瀏覽、修改和運行示例。這個版本的TrialTool特別展示了各種Windows8接口。
1. 背景
這個應用程序是在Windows 8開發(fā)者預覽版的Visual Studio 11特別版上開發(fā)的。整個應用程序的開發(fā)使用了HTML5，CSS和JavaScript等語言。這個工具還沒有涵蓋所有的API，但是用到這些接口是Windows8中編程模型的很好的代表。
2. 開發(fā)環(huán)境
我的主要IDE是Eclipse或Cloud9，實際上這是我***次使用VisulStudiio專門去開發(fā)一個端對端的項目。
首先，在VisualStudio中選擇一個預定義的項目類型或者是一個單一空白JS模板。這個模板在創(chuàng)建框架和填充代碼上做的很好。正如框架一樣，對于一個新手來說，很難一下瀏覽大量的文件，這些文件是模板的一部分。一旦你知道關(guān)于文件和其部分編輯方式，這個模板都是不錯的。不幸的是，看上去，目前Visual Studio是我惟一的選擇。因為我找不到任何能夠用Eclipse或者Notepad++來創(chuàng)建、打包或者部署的命令行應用程序。
3. 寫代碼
創(chuàng)建一個空白項目跟從頭寫一個網(wǎng)頁是一樣的。首先我們用到的模板是Metro Style UI。TrialTool使用Grid布局模板，此模板是從一個顯示項目清單的“索引”頁面開始。通過點擊每個細目可以將我們帶到下一層“細節(jié)”頁面。
JavaScript 文件是通過模板創(chuàng)建的，我推薦使用嚴格的方式。
3.1單頁面應用程序
APP的創(chuàng)建本質(zhì)上相當于一個單頁網(wǎng)站。使用導航瀏覽網(wǎng)頁的時候，從“索引”頁面到“細節(jié)”頁面，導致細節(jié)內(nèi)容作為DOM的一部分被加載。加載和卸載事件使得我們能夠控制每個操作顯示的內(nèi)容。WinJS模塊定義的事件，讓我們訪問這個操作或DOM的片段作為導航加載事件，除此之外還有事件的布局變化(畫出平板美化模式，調(diào)整大小，等等)，我注意到，在默認情況下，HTML，CSS和JS的文件類型各含有一個目錄。我更喜歡通過模塊而不是文件類型來給文件分類，文件類型根據(jù)他們的擴展來進行區(qū)分。
3.2 CSS網(wǎng)格
使用ms-grid來定義metro UI非常棒。CSS網(wǎng)格布局的仍需改進。Tiles是一個主要的metro UI,并且ms-gri的實現(xiàn)使得在MetroUI中創(chuàng)建平鋪的樣式更加簡單。
3.3 數(shù)據(jù)綁定
該模板也支持數(shù)據(jù)綁定。通過在HTML標簽中，使用data-win-*屬性使得視圖可以被定義。這些渲染視圖可以定義具體的控件(如 ListView)，和這些控件的選擇。通過AJAX和使用這些“itemRenderers”，JSON數(shù)據(jù)可以被加載。
這里用到的思想類似于框架，例如Backbone。然而，不像BockBone，當數(shù)據(jù)改變時自動改變視圖這樣類似的功能，需要明確的編碼。把itemRender指向URL的方式會更好。
另一個我非常喜歡的功能是，能夠在item render中聲明格式。目前，模型中的數(shù)據(jù)可以被轉(zhuǎn)換，但這看起來像人為的。使用特定元素的data-win-option來指定格式也非常棒。
3.4 Promises
所有異步操作(如AJAX,讀取文件等等)似乎都返回promise。對互動事件驅(qū)動應用程序來說，這肯定是很好的，在C#中“async”也是一樣的。
我們可以得到更好的承諾文件，看起來，文件是為C#和安裝JavaScript寫的.例如，像FilePicker這樣的操作，返回值是一個promise。然而，看看實際傳遞給 promise.then() method的參數(shù)，你可以導航到“GetResults”方法。
4.windows8的接口
開發(fā)win8應用的最主要原因就是我可以使用win8接口，另外一個原因就是，這個App也是MetroIE能夠打開的一個網(wǎng)站。
在JavaScript中添加本地win8接口，跟用本地DOM方法調(diào)用DOM是一樣的。Windows8彈窗和調(diào)用本地警示窗口時一樣的。使用本地文件接口，或者加密都是非常簡單明了的。
有關(guān)Windows Runtime的接口的文檔非常詳盡，但是如果他們分組的更好，并且***個列表有高等級的類別(像Storage)，這樣你就可以深入了解特定的API(Bulk Access或File properties)，這樣的情況我會覺得很舒服。自從很多API有了共同的概念之后，這對我們看特定的API是很有幫助的。
我發(fā)現(xiàn)另外一個問題是，在Javascript 語言中API所需的功能都沒有。舉個例子，讀取文件的內(nèi)容返回一個 InputStream ，這時似乎并沒有顯示任何Javascript的API。實際上DataReader可以用來讀取數(shù)據(jù)，這點上并不是很清楚。
我希望這些API可以成為類似HTML5 FILE/Blob的API。
5.調(diào)試
使用Visual Studio進行調(diào)試非常棒，以至于你真的忽視Firebug和Web Developer了。從類似于支持記錄斷點這樣的基本功能到察看HTML源代碼，調(diào)試器都非常強大。為了有更好的經(jīng)驗我會推薦一個雙顯示器設(shè)置。
我發(fā)現(xiàn)其中一個不足的功能是，配置(如Speed Trace)Javascript APP來解決其性能問題的方式。添加意向單也是調(diào)試應用程序的一種手段，(例如Opera dragonfly，這也是我喜歡的一個IE的功能)。遠程調(diào)試證明在平板案例中很有用。
通過console.log打印帶來的煩惱仍然存在。如果我們在產(chǎn)品部署中，能把console.log和Windows應用或系統(tǒng)日志整合在一起會更好。
6.打包和部署
雖然VisualStudio中有一個存儲菜單，但是看上去存儲功能并不可用。現(xiàn)在唯一可用的選擇是創(chuàng)建一個本地App。把這個App打包成一個appx文件，一個壓縮文件和一個驗證文件。用Admin身份執(zhí)行這個壓縮文件安裝這個應用。
7.結(jié)論
對于web開發(fā)者來說，選擇用HTML、CSS或者JS來開發(fā)windows8應用非常有吸引力。現(xiàn)有的web開發(fā)知識可以用在這，但是為了平衡操作系統(tǒng)的，***熟悉windows8提供的接口。
總的來說，這是一個非常強大的方法，把web開發(fā)變成本地應用。希望對于web開發(fā)者來說，開發(fā)Android和iOS也這樣簡單。
原文：http://dotnet.dzone.com/articles/developing-apps-windows-8
譯文：http://www.webapptrend.com/2012/01/1566.html
【編輯推薦】
