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

Transcript

1. None

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
12. None
13. None

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. 謝謝