about mobile web development thing
DESCRIPTION
Slide @ JSDC.tw 2013TRANSCRIPT
![Page 1: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/1.jpg)
關於 Mobile Web 開發 二三事Eric Chuang
![Page 2: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/2.jpg)
自我介紹
Eric Chuang
@Yahoo!
Blog @ http://cire.pixnet.net
![Page 3: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/3.jpg)
先問一個問題
你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
![Page 4: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/4.jpg)
一些統計數據
http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
![Page 5: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/5.jpg)
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"
![Page 6: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/6.jpg)
Linkedin App 的故事 2013 版
source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
"Why LinkedIn dumped HTML5 & went native for its mobile apps"
![Page 7: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/7.jpg)
但是...
我們仍然想要提供給使用者良好的行動網頁經驗!
![Page 8: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/8.jpg)
V.S
![Page 9: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/9.jpg)
挑戰的複雜度
手機 X 瀏覽器 X OS 版本 X ...
![Page 10: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/10.jpg)
OS版本
Android
![Page 11: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/11.jpg)
目前我們行動網頁的目標
iOS Mobile Safari
AndroidAndroid Browser
Chrome BrowserWindows Phone 8 (在不久的將來)
![Page 12: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/12.jpg)
iPhone1136 x 640960 x 640480 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
從螢幕尺寸來看
![Page 13: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/13.jpg)
一種解法 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_queries
![Page 14: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/14.jpg)
別忘了設定 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
![Page 15: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/15.jpg)
還可以優化的方法
針對不同螢幕回應適當的 template 與 asset
Tempate way: Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.
html#views
Cookie way:http://blog.keithclark.co.uk/responsive-images-using-cookies/
![Page 16: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/16.jpg)
挑戰 + 1:效能
![Page 17: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/17.jpg)
Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
![Page 18: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/18.jpg)
降低 Page Load 時間
1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
![Page 19: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/19.jpg)
降低 Page Load 時間
Nodejs 解決方案
a. Async.js https://github.com/caolan/async
b. Memcached https://github.com/3rd-Eden/node-memcached
![Page 20: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/20.jpg)
降低 Page Load 時間
JS/CSS 解決方案
yuglify https://github.com/yui/yuglify
> npm -g install yuglify> yuglify ./lib/*.js
如果使用 Mojito 開發
也可以試試延伸套件 Mojito-Shakerhttp://developer.yahoo.com/cocktails/shaker/
![Page 21: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/21.jpg)
效能提升方案
大量運算時 - 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 workerworker.postMessage({
foo: bar });
REF: http://code.flickr.net/2012/06/06/web-workers-and-yui/
![Page 22: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/22.jpg)
效能提升方案
硬體加速-webkit-transform:translate3d(0, 0, 0);
![Page 23: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/23.jpg)
效能提升方案
視覺化的欺敵戰術
![Page 24: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/24.jpg)
效能提升方案
gzip"Content-Encoding gzip"
cdnlazy loadajax cache header
"Cache-Control max-age=300"
![Page 25: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/25.jpg)
網址優化方案
http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.
yahoo.com
![Page 26: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/26.jpg)
讓開發容易點
共用且統一的 liberror handleajaxi18Napi call handle
![Page 27: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/27.jpg)
使用的框架
我們使用 YUI
也用 LESSLESS extends CSS with dynamic behavior such as variables,
mixins, operations and functions.http://lesscss.org/
![Page 28: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/28.jpg)
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/
![Page 29: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/29.jpg)
來談談測試
![Page 30: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/30.jpg)
遠端除錯
Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8r
Android Chrome + Android SDK + Chromehttps://developers.google.com/chrome-developer-tools/docs/remote-debugging
androVMhttp://androvm.org/blog/
Android Emulatorhttp://developer.android.com/develop/index.html
weinrehttp://people.apache.org/~pmuellr/weinre/docs/latest/
![Page 31: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/31.jpg)
網路資源
http://developer.yahoo.com/yslow/https://developers.google.
com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com
![Page 32: About Mobile Web Development Thing](https://reader034.vdocuments.net/reader034/viewer/2022042815/55621dedd8b42ad44d8b4928/html5/thumbnails/32.jpg)
Thanks!