Slide @ JSDC.tw 2013

1. 關於 Mobile Web 開發 二三事
Eric Chuang

2. 自我介紹
Eric Chuang
@Yahoo!
Blog @ http://cire.pixnet.net

3. 先問一個問題
你喜歡使用 Mobile Web ?
還是喜歡用 Mobile App ?

4. 一些統計數據
http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It

5. Linkedin App 的故事 2011 版
source: http://venturebeat.com/2011/08/16/linkedin-
node/
"Exclusive: How LinkedIn
used Node.js and HTML5 to
build a better, faster app"

6. Linkedin App 的故事 2013 版
source: http://venturebeat.com/2013/04/17/linkedin-
mobile-web-breakup/
"Why LinkedIn dumped
HTML5 & went native for
its mobile apps"

7. 但是...
我們仍然想要提供給使用者
良好的行動網頁經驗！

8. V.
S

9. 挑戰的複雜度
手機 X 瀏覽器 X OS 版本 X ...

10. OS版本
Android

11. 目前我們行動網頁的目標
iOS
Mobile Safari
Android
Android Browser
Chrome Browser
Windows Phone 8 (在不久的將來)

12. iPhone
1136 x 640
960 x 640
480 x 320
Android
好多好多!
以三星為例: 1.5, 1.8, 1.9, 2, 2.2, 2.3,
2.4, 2.8, 3, 3.1, 3.2, 3.5, 3.7, 4, 4.3,
4.5, 4.7, 4.8, 5.0, 5.3, 5.5, 5.8, 7.0,
7.7, 8.9, and 10.1.
from http://www.pcmag.com/article2/0,2817,2408689,00.asp
從螢幕尺寸來看

13. 一種解法 CSS Media Query
@media (min-width: 320px) {
width: 50%;
}
@media (min-width: 480px) {
width: 33.3333333%;
}
@media (min-width: 680px) {
width: 25%;
}
Ref: https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Media_que
ries

14. 別忘了設定 viewport
<meta name="viewport" content="
width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.
0, user-scalable=no">

15. 還可以優化的方法
針對不同螢幕回應適當的 template 與
asset
Tempate way:
Mojito MVC Framework
http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.
html#views
Cookie way:
http://blog.keithclark.co.uk/responsive-images-using-cookies/

16. 挑戰 + 1:效能

17. Source: http://visual.ly/mobile-page-load-time-vs-user-expectations

18. 降低 Page Load 時間
1. 減少 HTTP requests 數量.
2. 減少頁面大小.
3. 縮圖可以在伺服器上做.
4. 後端要夠力.

19. 降低 Page Load 時間
Nodejs 解決方案
a. Async.js https://github.com/caolan/async
b. Memcached https://github.com/3rd-Eden/node-
memcached

20. 降低 Page Load 時間
JS/CSS 解決方案
yuglify https://github.com/yui/yuglify
> npm -g install yuglify
> yuglify ./lib/*.js
如果使用 Mojito 開發
也可以試試延伸套件 Mojito-Shaker
http://developer.yahoo.com/cocktails/shaker/

21. 效能提升方案
大量運算時 - Webworker
var worker = new Worker('my_file.js');
worker.addEventListener('message', function (e)
{
// do something with the message from the
// worker
});
// pass some data into the worker
worker.postMessage({
foo: bar
});
REF: http://code.flickr.net/2012/06/06/web-workers-and-yui/

22. 效能提升方案
硬體加速
-webkit-transform:translate3d(0, 0, 0);

23. 效能提升方案
視覺化的欺敵戰術

24. 效能提升方案
gzip
"Content-Encoding gzip"
cdn
lazy load
ajax cache header
"Cache-Control max-age=300"

25. 網址優化方案
http://us.yahoo.com
http://tw.bid.yahoo.com <-> http://m.tw.bid.
yahoo.com

26. 讓開發容易點
共用且統一的 lib
error handle
ajax
i18N
api call handle

27. 使用的框架
我們使用 YUI
也用 LESS
LESS extends CSS with dynamic behavior such as variables,
mixins, operations and functions.
http://lesscss.org/

28. Bottle
這是一個提供 Mobile-friendly 元件庫
它是 YUI Gallery
自己開發自用
http://zordius.github.com/yui3-gallery/gallery-bottle/
http://www.yuiblog.com/blog/2013/01/07/yuiconf-2012talk-bottle-
mobile-ui-library-with-montie-tsai-and-zordius-chen/

29. 來談談測試

30. 遠端除錯
Safari Developer tools + Mobile Safari
http://tinyurl.com/arzbq8r
Android Chrome + Android SDK + Chrome
https://developers.google.com/chrome-developer-
tools/docs/remote-debugging
androVM
http://androvm.org/blog/
Android Emulator
http://developer.android.com/develop/index.html
weinre
http://people.apache.org/~pmuellr/weinre/docs/latest/

31. 網路資源
http://developer.yahoo.com/yslow/
https://developers.google.
com/speed/pagespeed/insights
http://mobilehtml5.org
http://caniuse.com

32. Thanks!