$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. 想⽤用 JavaScript 統治世界 nodeJS
 
 WebOS B2G Tizen PhoneGap Titanium


    
 WebView
 .NET Qt GTK+
 
 Chrome Firefox Extension / App
  2. Chrome / Firefox App JavaScript API 不⾜足 Chrome -> Native

    Client (C++) Firefox -> NPAPI (C++) UX 先開瀏覽器 e.g., SQLite Manager
  3. Metro style App using JavaScript
 in IE10 sandbox 沒有 same

    origin policy
 
 多 Windows 物件
 
 多 WinJS 物件
 
 少⼀一些函式 …
  4. Windows 物件 不是 window 物件
 
 Windows Runtime API WinRT

    API C++ C# VB JavaScript 共通
 
 使⽤用同⼀一般 JavaScript 物件
 Windows.Storage.KnownFolders.musicLibrary
  5. WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成 jQuery

    100% JavaScript 寫成
 YUI 100% JavaScript 寫成
 WinJS 100% JavaScript 寫成 看不懂可以看原始碼
  6. WinJS.Promise 
 
 超過 0.5 秒 ⾮非同步 吐回 Promise 物件


    
 IO readText() 、 PickSingleFileAsync()
 
 AJAX WinJS.xhr()
 
 與 callback 相⽐比 語意清晰
  7. 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();
  8. 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() { // ... });
  9. IE10 CSS3 transition transform animation
 
 Grid Layout
 dev.w3.org
 2010

    年微軟提出
 
 display : -ms-grid;
 -ms-grid-columns
 -ms-grid-column
 -ms-grid-column-span
  10. Controls HTML5 有的
 ⽤用 HTML 寫 
 HTML5 沒有的
 <div

    
 data-win-control="…"
 data-win-options="{ … }" >
 </div>
  11. HTML5 有的 Controls <button>A Button</button> 
 
 <video controls="controls" >


    <source src="video.mp4" type="..." > </video> 
 <canvas /> 
 
 …
  12. 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();
  13. 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>
  14. UX Metro® is a design language
 
 Guideline Guideline Guideline


    
 對使⽤用者⼀一定是好事 對開發者和美術呢?
 
 Windows store 上架審核?
  15. single-page navigation Grid App
 
 點下 item 怎麼沒換⾴頁?
 只有網⾴頁中間換內容?
 


    把 <a> 預設動作
 ⽤用 e.preventDefault() 擋掉!
 
 WinJS.UI.Pages & navigation.js