$30 off During Our Annual Pro Sale. View Details »

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

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

2012 微軟開發者日

Ping-Yen Tsai

June 20, 2012
Tweet

More Decks by Ping-Yen Tsai

Other Decks in Technology

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