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

2012 微軟開發者日

Transcript

1. View Slide

2. 從前端⼯工程師觀點看

   Metro Style App 開發
   蔡秉諺 Vexed
   中華電信隨意窩 Xuite
   

   View Slide

3. JavaScript
   

   View Slide

4. JavaScript
   

   View Slide

5. ⼀一切的根源
   JavaScript
   跟其他語⾔言太不⼀一樣了
   

   Prototype based inheritance
   Weak typing
   Functions are objects
   Closure
   

   View Slide

6. 出現了兩種⼈人
   想把 JavaScript 變成他會的語⾔言

   

   想⽤用 JavaScript 統治世界
   

   View Slide

7. 想把 JavaScript 變成他會的語⾔言
   Google Web Toolkit
   Java -> JavaScript
   

   CoffeeScript
   CoffeeScript -> JavaScript

   Ruby
   

   View Slide

8. 想⽤用 JavaScript 統治世界
   nodeJS

   

   WebOS B2G Tizen PhoneGap Titanium

   

   WebView

   .NET Qt GTK+

   

   Chrome Firefox
   Extension / App
   

   View Slide

9. SQLite Manager :: Firefox Add-on
   

   View Slide

10. Secure Shell - Chrome App
    

    View Slide

11. Chrome / Firefox App
    JavaScript API 不⾜足
    Chrome -> Native Client (C++)
    Firefox -> NPAPI (C++)
    UX 先開瀏覽器
    e.g., SQLite Manager
    

    View Slide

12. View Slide

13. View Slide

14. 謝天謝地
    微軟站在
    ⽤用 JavaScript 統治世界
    這邊
    

    View Slide

15. Windows 8 開發架構圖
    

    View Slide

16. 幾乎是 Windows 7

    版本號碼 6.2

    Windows on ARM 不可安裝第三⽅方程式與外掛

    不可安裝 FLASH ActiveX
    

    View Slide

17. (Server +) Client

    sandbox

    same origin policy
    

    View Slide

18. on IE10
    Client / Browser 經驗
    Debug 、 第三⽅方 Library
    jQuery YUI Knockout Backbone
    

    View Slide

19. DOM Explorer
    

    View Slide

20. JavaScript Console
    

    View Slide

21. Metro style App using JavaScript

    in IE10 sandbox
    沒有 same origin policy

    

    多 Windows 物件

    

    多 WinJS 物件

    

    少⼀一些函式 …
    

    View Slide

22. Windows 物件
    不是 window 物件

    

    Windows Runtime API
    WinRT API
    C++ C# VB JavaScript 共通

    

    使⽤用同⼀一般 JavaScript 物件

    Windows.Storage.KnownFolders.musicLibrary
    

    View Slide

23. JavaScript API 充⾜足
    

    View Slide

24. Windows 物件不夠⽤用？
    ⾃自⼰己寫 WinRT Component

    C++ C# VB
    

    View Slide

25. WinJS 物件
    Windows Library for JavaScript
    100% JavaScript 寫成
    jQuery 100% JavaScript 寫成

    YUI 100% JavaScript 寫成

    WinJS 100% JavaScript 寫成
    看不懂可以看原始碼
    

    View Slide

26. WinJS 100% JavaScript 寫成
    base.js
    WinJS
    ui.js
    WinJS.UI
    

    View Slide

27. WinJS.Promise
    

    

    超過 0.5 秒 ⾮非同步 吐回 Promise 物件

    

    IO readText() 、 PickSingleFileAsync()

    

    AJAX WinJS.xhr()

    

    與 callback 相⽐比 語意清晰
    

    View Slide

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();
    

    View Slide

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() {
    // ...
    });
    

    View Slide

30. AJAX a.php b.php c.php 同時送出
    等三者皆完成

    

    再下⼀一步

    不⽤用 Promise
    

    View Slide

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() {
    // ...
    });
    

    View Slide

32. 還多了什麼？
    Live Connect API

    

    DOM

    MSApp

    MSProtocol

    MSProtocolsCollection
    

    View Slide

33. 少了什麼？
    alert() confirm() prompt()
    請⽤用 Windows.UI.Popups.MessageDialog …
    window
    .open() .close()

    .moveBy() .moveTo()

    .resizeBy() .resizeTo()
    …
    

    View Slide

34. IE10 ECMAScript 5
    "use strict";

    

    [].map()

    

    Object getter setter
    WinJS.Binding.as
    

    View Slide

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
    

    View Slide

36. Controls
    HTML5 有的

    ⽤用 HTML 寫
    

    HTML5 沒有的

    data-win-control="…"

    data-win-options="{ … }" >

    
    

    View Slide

37. HTML5 有的 Controls
    A Button 

    

    

    
    

    

    

    …
    

    View Slide

38. HTML5 沒有的 Controls
    DatePicker Rating ListView FlipView …

    

    data-win-control="WinJS.UI.DatePicker"
    data-win-options="{ current: '2/20/2011' }" >

    

    

    App 開啟時或 DOMContentLoaded 時

    執⾏行 WinJS.UI.processAll();
    

    View Slide

39. Template
    data
    {
    title: "Banana",
    text: "Banana Frozen Yogurt",
    picture: "images/banana.jpg"
    }
    

    View Slide

40. Template
    HTML
    
    
    
    
    
    
    
    

    View Slide

41. Application lifecycle
    沒有關閉 App
    Suspened -> NotRunning 不會通知你
    

    View Slide

42. Charms & Contracts
    

    View Slide

43. Charms & Contracts
    

    View Slide

44. Charms & Contracts
    

    View Slide

45. 考量各種檢視尺⼨寸
    最⼩小 1024 * 768

    

    最佳 1366 * 768

    

    Snap View
    320 * 768

    1024 * 768
    

    View Slide

46. UX
    Metro® is a design language

    

    Guideline Guideline Guideline

    

    對使⽤用者⼀一定是好事
    對開發者和美術呢？

    

    Windows store 上架審核？
    

    View Slide

47. single-page navigation
    Grid App

    

    點下 item 怎麼沒換⾴頁？

    只有網⾴頁中間換內容？

    

    把 預設動作

    ⽤用 e.preventDefault() 擋掉！

    

    WinJS.UI.Pages & navigation.js
    

    View Slide

48. dev.windows.com
    MSDN

    

    Sample
    

    View Slide

49. 謝謝
    

    View Slide