Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
從前端工程師觀點看 Metro Style App 開發
Ping-Yen Tsai
June 20, 2012
Technology
0
54
從前端工程師觀點看 Metro Style App 開發
2012 微軟開發者日
Ping-Yen Tsai
June 20, 2012
Tweet
Share
More Decks by Ping-Yen Tsai
See All by Ping-Yen Tsai
「台灣報紙新聞」與「台灣即時新聞」
pingyen
0
62
我的工作經驗 (到目前為止)
pingyen
2
370
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
63
JavaScript Closure
pingyen
1
69
HTML5 Sectioning Elements
pingyen
0
35
次世代搜尋引擎戰爭
pingyen
0
51
進階 JavaScript
pingyen
0
210
jQuery 入門
pingyen
0
44
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
68
Other Decks in Technology
See All in Technology
スタートアップと技術選定と AWS
track3jyo
PRO
2
330
Power AutomateでのAdaptive Cards-基本編
miyakemito
1
280
インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033
sorami
2
210
What's Data Lake ? Azure Data Lake best practice
ryomaru0825
2
740
2022年度新卒技術研修「良いコードの書き方」講義
excitejp
PRO
0
300
【toranoana.deno#7】Denoからwasmを呼び出す基礎
toranoana
0
110
Oracle Cloud Infrastructure:2022年6月度サービス・アップデート
oracle4engineer
PRO
0
100
oakのミドルウェアを書くときの技のらしきもの
toranoana
0
110
Custom GitHub Actions by Java
kazamori
0
280
オンラインでのサーバー切替事例紹介/ColoplTech-05-01
colopl
0
200
インフラのCI/CDはGitHub Actionsに任せた
mihyon
0
110
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1.1k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Atom: Resistance is Futile
akmur
255
20k
Adopting Sorbet at Scale
ufuk
63
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
Navigating Team Friction
lara
175
11k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
Transcript
None
從前端⼯工程師觀點看 Metro Style App 開發 蔡秉諺 Vexed 中華電信隨意窩 Xuite
JavaScript
JavaScript
⼀一切的根源 JavaScript 跟其他語⾔言太不⼀一樣了 Prototype based inheritance Weak typing Functions
are objects Closure
出現了兩種⼈人 想把 JavaScript 變成他會的語⾔言 想⽤用 JavaScript 統治世界
想把 JavaScript 變成他會的語⾔言 Google Web Toolkit Java -> JavaScript
CoffeeScript CoffeeScript -> JavaScript Ruby
想⽤用 JavaScript 統治世界 nodeJS WebOS B2G Tizen PhoneGap Titanium
WebView .NET Qt GTK+ Chrome Firefox Extension / App
SQLite Manager :: Firefox Add-on
Secure Shell - Chrome App
Chrome / Firefox App JavaScript API 不⾜足 Chrome -> Native
Client (C++) Firefox -> NPAPI (C++) UX 先開瀏覽器 e.g., SQLite Manager
None
None
謝天謝地 微軟站在 ⽤用 JavaScript 統治世界 這邊
Windows 8 開發架構圖
幾乎是 Windows 7 版本號碼 6.2 Windows on ARM 不可安裝第三⽅方程式與外掛 不可安裝
FLASH ActiveX
(Server +) Client sandbox same origin policy
on IE10 Client / Browser 經驗 Debug 、 第三⽅方 Library
jQuery YUI Knockout Backbone
DOM Explorer
JavaScript Console
Metro style App using JavaScript in IE10 sandbox 沒有 same
origin policy 多 Windows 物件 多 WinJS 物件 少⼀一些函式 …
Windows 物件 不是 window 物件 Windows Runtime API WinRT
API C++ C# VB JavaScript 共通 使⽤用同⼀一般 JavaScript 物件 Windows.Storage.KnownFolders.musicLibrary
JavaScript API 充⾜足
Windows 物件不夠⽤用? ⾃自⼰己寫 WinRT Component C++ C# VB
WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成 jQuery
100% JavaScript 寫成 YUI 100% JavaScript 寫成 WinJS 100% JavaScript 寫成 看不懂可以看原始碼
WinJS 100% JavaScript 寫成 base.js WinJS ui.js WinJS.UI
WinJS.Promise 超過 0.5 秒 ⾮非同步 吐回 Promise 物件
IO readText() 、 PickSingleFileAsync() AJAX WinJS.xhr() 與 callback 相⽐比 語意清晰
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();
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() { // ... });
AJAX a.php b.php c.php 同時送出 等三者皆完成 再下⼀一步 不⽤用 Promise
AJAX a.php b.php c.php 同時送出 WinJS.Promise.join([ WinJS.xhr('a.php'), WinJS.xhr('b.php'), WinJS.xhr('c.php')]) .done(function()
{ // ... });
還多了什麼? Live Connect API DOM MSApp MSProtocol MSProtocolsCollection
少了什麼? alert() confirm() prompt() 請⽤用 Windows.UI.Popups.MessageDialog … window .open() .close()
.moveBy() .moveTo() .resizeBy() .resizeTo() …
IE10 ECMAScript 5 "use strict"; [].map() Object getter
setter WinJS.Binding.as
IE10 CSS3 transition transform animation Grid Layout dev.w3.org 2010
年微軟提出 display : -ms-grid; -ms-grid-columns -ms-grid-column -ms-grid-column-span
Controls HTML5 有的 ⽤用 HTML 寫 HTML5 沒有的 <div
data-win-control="…" data-win-options="{ … }" > </div>
HTML5 有的 Controls <button>A Button</button> <video controls="controls" >
<source src="video.mp4" type="..." > </video> <canvas /> …
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();
Template data { title: "Banana", text: "Banana Frozen Yogurt", picture:
"images/banana.jpg" }
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>
Application lifecycle 沒有關閉 App Suspened -> NotRunning 不會通知你
Charms & Contracts
Charms & Contracts
Charms & Contracts
考量各種檢視尺⼨寸 最⼩小 1024 * 768 最佳 1366 * 768
Snap View 320 * 768 1024 * 768
UX Metro® is a design language Guideline Guideline Guideline
對使⽤用者⼀一定是好事 對開發者和美術呢? Windows store 上架審核?
single-page navigation Grid App 點下 item 怎麼沒換⾴頁? 只有網⾴頁中間換內容?
把 <a> 預設動作 ⽤用 e.preventDefault() 擋掉! WinJS.UI.Pages & navigation.js
dev.windows.com MSDN Sample
謝謝