包括 HTML、CSS 和 JavsScript 的 Web 技術正被 Metro 風格的程式采納為視窗程式中首類（first-class）的開發技術。比較起來，JavaScript 不像傳統 Web 伺服器那樣部署在一張又一張的頁面上，Metro App 是本地安裝在客戶機器上的。這點很像傳統的 Win 程式，但是直接可以使用 JavaScript 通路所在的底層 API，還能和其他程式相溝通。
在本教程中我們将會為您介紹如何透過 JavaScrip 來建構 Metro 風格的程式。通過 HTML5、層疊樣式表（CSS3）和 JavaScript 這些技術，與您一起打造一個輕型的 RSS 用戶端，并且盡量使得這個程式更好地彰顯個性化（that conveys the right personality）。我們将引入包括控件、功能、布局、模闆、資料綁定以及 JS 庫這些核心的内容，而且，所述的這些技術已經在 Metro App 開發中都得到優化，可放心使用。根據此教程，閣下學習完畢後，應已具備初步開發
JS 版 Metro App 的能力。教程劃分為三小節，估計20分鐘閱讀完一小節，當然，如果做好每個習題的話，時間可能會稍長一點。
跟 web 頁面那樣，得先有一份 HTML 檔案去寫 Metro App。
如果把這 HTML 放在浏覽器中運作，肯定沒啥意思。不用多說，如果在 Metro App 中執行，則又是另外一番天地，當然您的客戶，一般不會在乎那究竟是浏覽器還是 Metro App。隻不過，有明顯不同，就是 Metro App 會安裝在 Window Store 中，跟其他 Win 程式一樣。再者，若說單張 Web 頁面，根本算不上叫做完整的程式，哪怕涉及樣式、代碼、圖檔資源的那些。現在，Metro App 不但包括這些，而且還提格為标準的應用程式，于是将有中繼資料和程式資源檔案的出現：
用于描述程式本身的清單檔案（manifest），包括程式名稱、簡介、啟動頁等等。
用于外觀的圖檔檔案或者圖示檔案。
用于Windows Store顯示的圖示 logo。
用于你程式啟動時歡迎螢幕（a splash screen）。
程式清單（manifest）是一份名為 appxmanifest.xml 的 XML 檔案。該檔案包括了諸如程式名稱、程式描述、圖檔引用等的詳細情況，其中一項當屬最重要的是指定程式的啟動頁。Microsoft Visual Studio 11 Express for Windows Developer Preview 可以自動導出程式清單，而還可以幫助你透過 JavaScript 來完成一系列任務，這些任務就是建立、編輯、打包、啟動與調試您的 Metro 風格應用程式。
Microsoft Visual Studio 為開發視窗程式的工具，也是開發 Metro式程式的第一個工具。它不但提供了 HTML、CSS、JavaScript、圖檔編輯，以及用 JavaScript 來編輯程式清單等等此類一般開發任務，還包括整個開發周期的項目管理，涉及到源碼管理、整合建構（build）以及部署等的許多過程。有幾種 VS 版本的制定，我們這裡拿來使用的是免費的 Visual Studio 11 Express for Windows Developer Preview 預覽版本，在
Windows Software Development Kit (SDK) for MetroApp 就有。安裝一遍後就等于安裝好了編譯、打包、部署的那些工具。VisualStudio 11 Express for Windows Developer Preview 本身提供若幹模闆，如下圖所示：
最簡單的項目模闆就是 Blank Application。運作之後生成 Visual Studio 11 Express for WindowsDeveloper Preview Metro style app using JavaScript 項目專屬檔案（.wwaproj ）。
現在打開預設的 default.html 的話，你會發現這幾乎全是空的内容，打開 js 目錄下的 default.js 也同樣如是。明顯這裡提供的是主幹檔案，等着你創造些内容添加進去。
欲進行調試，你點選“Debug > StartDebugging”就可以，它提供了開發者所熟悉的幾項調試工具：
調試器，打斷點、步進和監視 JS 資料和行為。
JS 控制台視窗（JavaScript ConsoleWindow），與JS對象指令行互動的地方。
DOM浏覽器視窗，觀察 HTML Document Object Model 或者元素樣式的地方。
模拟器（Simulator），在開發環境中模拟相關裝置的事件。
采用 JavaScript 編寫的 MetroApp，除卻文法，在通路 Windows 底層平台的時候與其他語言無異。但根據 JavaScript 程式員的某些特性又應該有一些盡量預設的包，可以反複使用的設計，也就是說，Windows 類庫針對 JavaScript 特定提供了一組可複用的 JS 和 CSS 檔案，以便在此基礎上更好地展現 Windows 新特性。VS 模闆中已經包含了一系列的 CSS 樣式規則表，以便提供劃一的 WinApp 的風格感官（look& feel）。最簡捷的方式就是通過項目模闆檔案引入，它會自動包含
WinJS 所需的檔案。
Blank Application 項目檔案雖說空無一物的，卻已包含有一定的樣式在内。Metro 風格之是以稱“風格”，應該說對樣式有一點要求的。樣式本身固然不是說要統一一緻，因為許多情況下有你需要特定的布局、動作個性化的設計。我們這裡就會舉一個例子。實際上，盡管所謂 Metro 風格的程式是新鮮事物，但過往的經驗仍值得學習研究。這裡為大家介紹 Window 項目組裡的一位精于此道的開發人員，Raymond Chen。陳先生是一本優秀圖書《The Old New Thing》的作者，同時他還是 Weblog
的作者。
陳先生的主要成果在于看到了一般人不容易看到 Win 平台上的缺失之處，或曰美中不足，并且将文字連同示例 Sample 資源積極地發表在他部落格上。這樣，都是 Win 的程式，我們可以通過這些素材展示新的構造方式。
由此，我們需要在他博文下載下傳資料，才可以清楚哪些地方放置代碼。
項目模闆生成的 default.html 檔案預設加載 WinJS 所需最低要求的 JS 和 CSS 檔案：
加入我們自己的内容：
<dl><dt>上面分别是一标題和兩個 div 元素用于容器（placeholder）的作用，一個表示 RSS 下載下傳時的狀态如何；另一個為我們擷取好 RSS 内容将來顯示的地方。别忘了，我們要用到陳兄的那些樣式檔案：</dt></dl>
為了使得 MetroApp 與其他應用程式之間整合，Windows 提供了一組程式級别（app-level）的消息事件，均由 WinJS 完備封裝。那份 default.js 檔案内就訂閱了（或登記了）程式的加載事件，程式于是開啟時便會執行：
首先你必須留意的一件事是，上述代碼都是處在一個自動執行的匿名函數中去運作的。這個是一個避免污染全局空間的 JavaScript 實踐方法，也是常常被人推薦的技巧。第二請留意<code>Debug</code> 命名空間下調用的<code>enableFirstChanceException</code> 方法。取消注釋的話就會向VS的調試器報告初期的 JavaScript 異常，确實十分友善的說。
前期工作完畢後，由 WinJS 命名空間下得到的對象，此時此刻，代碼就會訂閱在程式及其資源（如default.html）都已經加載好了才會觸發的事件。這是一個執行初始化絕佳的地方和時刻，待會我們會見到。對于觸發任何程式事件，你一定要讓程式曉得你已經準備好介紹消息了，也就是要執行方法是怎樣。onmainwindowactivated 的事件處理器（event handler）就是我們接着将要下載下傳陳先生部落格的絕佳之地。
WinJS 命名空間下 xhr 函數提供一系列的可選項，以備下載下傳來自 HTTP 協定的資料，普通文本和 XML 的都可以。xhr 為 XMLHttpRequest 的意思。WinJS 裡的 xhr 是一個包裝器，可送入許多參數，包括 HTTP 動詞（預設 GET）、HTTP 頭（預設 none ）和擷取資料的源位址 URL。
與 XMLHttpRequest 對象可選擇資料同步（synchronously）或異步（asynchronously）通訊的方式不同，WinJs.xhr()隻能選擇異步方式的通訊，其考量是為了防止同步通信而造成的UI阻塞。異步模式下編碼模型，能夠幫助你編寫更靈敏響應的應用程式。該例子中，我們不知道請求花去多少時間，于是，我們安排一個 div 來作為回報下載下傳狀态 downloadStatus 的 UI 容器。
WinJS 對象下的異步函數稱作“允諾 promise”，表示将來發生的結果。Promise 對象暴露了then 函數，即 success 函數、failure 函數和 prgress 函數。調用 xhr() 立刻傳回promise 對象，于是我們設定這三個函數的具體情形。
當調用 HTTP 請求完畢，我們接着執行 processPosts 函數，其參數請求對象（a request object）一如 XMLHttpRequest 的那樣子，好比我們所關心的 responseXML 屬性，這個就是我們所請求的結果，也就是 RSS 資料。RSS 本身也是一份标準的 XML 文檔，于是我們可用XPath表達式選取 RSSfeed 裡面的節點，提取每項條目的标題、pubDta 和内容等等，最後渲染到 div 元素中。對于既往的 “TheOld New Thing”
讀者，看到程式輸出的樣子也會覺得是相似的。
有人會問，是否 xhr 函數會工作，因為 web 伺服器的生産的頁面可能會失敗的。可以工作起來的原因在于使用 JavaScript Metro 式程式是運作在一個本地而且安全的上下文環境中，僅僅隻能使用程式所列明的請求和使用者所限定的功能。