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