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

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

2012 微軟開發者日

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

June 20, 2012
Tweet

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