從前端工程師觀點看 Metro Style App 開發

2012 微軟開發者日

Transcript

2. 從前端⼯工程師觀點看
 Metro Style App 開發 蔡秉諺 Vexed 中華電信隨意窩 Xuite
3. JavaScript
4. JavaScript
5. ⼀一切的根源 JavaScript 跟其他語⾔言太不⼀一樣了 
 Prototype based inheritance Weak typing Functions are objects Closure
6. 出現了兩種⼈人 想把 JavaScript 變成他會的語⾔言
 
 想⽤用 JavaScript 統治世界
7. 想把 JavaScript 變成他會的語⾔言 Google Web Toolkit Java -> JavaScript 
 CoffeeScript CoffeeScript -> JavaScript
 Ruby
8. 想⽤用 JavaScript 統治世界 nodeJS
 
 WebOS B2G Tizen PhoneGap Titanium
 
 WebView
 .NET Qt GTK+
 
 Chrome Firefox Extension / App
9. SQLite Manager :: Firefox Add-on
10. Secure Shell - Chrome App
11. Chrome / Firefox App JavaScript API 不⾜足 Chrome -> Native Client (C++) Firefox -> NPAPI (C++) UX 先開瀏覽器 e.g., SQLite Manager
14. 謝天謝地 微軟站在 ⽤用 JavaScript 統治世界 這邊
15. Windows 8 開發架構圖
16. 幾乎是 Windows 7
 版本號碼 6.2
 Windows on ARM 不可安裝第三⽅方程式與外掛
 不可安裝 FLASH ActiveX
17. (Server +) Client
 sandbox
 same origin policy
18. on IE10 Client / Browser 經驗 Debug 、 第三⽅方 Library jQuery YUI Knockout Backbone
19. DOM Explorer
20. JavaScript Console
21. Metro style App using JavaScript
 in IE10 sandbox 沒有 same origin policy
 
 多 Windows 物件
 
 多 WinJS 物件
 
 少⼀一些函式 …
22. Windows 物件 不是 window 物件
 
 Windows Runtime API WinRT API C++ C# VB JavaScript 共通
 
 使⽤用同⼀一般 JavaScript 物件
 Windows.Storage.KnownFolders.musicLibrary
23. JavaScript API 充⾜足
24. Windows 物件不夠⽤用？ ⾃自⼰己寫 WinRT Component
 C++ C# VB
25. WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成 jQuery 100% JavaScript 寫成
 YUI 100% JavaScript 寫成
 WinJS 100% JavaScript 寫成 看不懂可以看原始碼
26. WinJS 100% JavaScript 寫成 base.js WinJS ui.js WinJS.UI
27. WinJS.Promise 
 
 超過 0.5 秒 ⾮非同步 吐回 Promise 物件
 
 IO readText() 、 PickSingleFileAsync()
 
 AJAX WinJS.xhr()
 
 與 callback 相⽐比 語意清晰
28. AJAX a.php -> b.php -> c.php var xhr = new XMLHttpRequest(); xhr.open('GET', 'a.php', true); xhr.onreadystatechange(function() { if(http.readyState == 4 && http.status == 200) { xhr.open('GET', 'b.php', true); xhr.onreadystatechange(function() { if(http.readyState == 4 && http.status == 200) { xhr.open('GET', 'c.php', true); xhr.onreadystatechange(function() { if(http.readyState == 4 && http.status == 200) { // ... } } xhr.send(); } } xhr.send(); } }); xhr.send();
29. AJAX a.php -> b.php -> c.php WinJS.xhr('a.php')
 .then(function() { return WinJS.xhr('b.php'); })
 .then(function() { return WinJS.xhr('c.php'); })
 .done(function() { // ... });
30. AJAX a.php b.php c.php 同時送出 等三者皆完成
 
 再下⼀一步
 不⽤用 Promise
31. AJAX a.php b.php c.php 同時送出 WinJS.Promise.join([
 WinJS.xhr('a.php'),
 WinJS.xhr('b.php'),
 WinJS.xhr('c.php')])
 .done(function() { // ... });
32. 還多了什麼？ Live Connect API
 
 DOM
 MSApp
 MSProtocol
 MSProtocolsCollection
33. 少了什麼？ alert() confirm() prompt() 請⽤用 Windows.UI.Popups.MessageDialog … window .open() .close()
 .moveBy() .moveTo()
 .resizeBy() .resizeTo() …
34. IE10 ECMAScript 5 "use strict";
 
 [].map()
 
 Object getter setter WinJS.Binding.as
35. IE10 CSS3 transition transform animation
 
 Grid Layout
 dev.w3.org
 2010 年微軟提出
 
 display : -ms-grid;
 -ms-grid-columns
 -ms-grid-column
 -ms-grid-column-span
36. Controls HTML5 有的
 ⽤用 HTML 寫 
 HTML5 沒有的
 <div 
 data-win-control="…"
 data-win-options="{ … }" >
 </div>
37. HTML5 有的 Controls <button>A Button</button> 
 
 <video controls="controls" >
 <source src="video.mp4" type="..." > </video> 
 <canvas /> 
 
 …
38. HTML5 沒有的 Controls DatePicker Rating ListView FlipView …
 
 <div
 data-win-control="WinJS.UI.DatePicker" data-win-options="{ current: '2/20/2011' }" >
 </div>
 
 App 開啟時或 DOMContentLoaded 時
 執⾏行 WinJS.UI.processAll();
39. Template data { title: "Banana", text: "Banana Frozen Yogurt", picture: "images/banana.jpg" }
40. Template HTML <div data-win-control="WinJS.Binding.Template"> <div> <img data-win-bind="alt: title; src: picture" /> <h4 data-win-bind="innerText: title" ></h4> <h6 data-win-bind="innerText: text" ></h6> </div> </div>
41. Application lifecycle 沒有關閉 App Suspened -> NotRunning 不會通知你
42. Charms & Contracts
43. Charms & Contracts
44. Charms & Contracts
45. 考量各種檢視尺⼨寸 最⼩小 1024 * 768
 
 最佳 1366 * 768
 
 Snap View 320 * 768
 1024 * 768
46. UX Metro® is a design language
 
 Guideline Guideline Guideline
 
 對使⽤用者⼀一定是好事 對開發者和美術呢？
 
 Windows store 上架審核？
47. single-page navigation Grid App
 
 點下 item 怎麼沒換⾴頁？
 只有網⾴頁中間換內容？
 
 把 <a> 預設動作
 ⽤用 e.preventDefault() 擋掉！
 
 WinJS.UI.Pages & navigation.js
48. dev.windows.com MSDN
 
 Sample
49. 謝謝