關於 Mobile Web 開發 二三事Eric Chuang
自我介紹Eric Chuang@Yahoo!Blog @ http://cire.pixnet.net
先問一個問題你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
一些統計數據http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
Linkedin App 的故事 2011 版source: http://venturebeat.com/2011/08/16/linkedin-node/"Exclusive: How LinkedInused Node.js and HT...
Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & w...
但是...我們仍然想要提供給使用者良好的行動網頁經驗!
V.S
挑戰的複雜度手機 X 瀏覽器 X OS 版本 X ...
OS版本Android
目前我們行動網頁的目標iOSMobile SafariAndroidAndroid BrowserChrome BrowserWindows Phone 8 (在不久的將來)
iPhone1136 x 640960 x 640480 x 320Android好多好多!以三星為例: 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....
一種解法 CSS Media Query@media (min-width: 320px) {width: 50%;}@media (min-width: 480px) {width: 33.3333333%;}@media (min-widt...
別忘了設定 viewport<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, u...
還可以優化的方法針對不同螢幕回應適當的 template 與assetTempate way:Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/...
挑戰 + 1:效能
Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
降低 Page Load 時間1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
降低 Page Load 時間Nodejs 解決方案a. Async.js https://github.com/caolan/asyncb. Memcached https://github.com/3rd-Eden/node-memcached
降低 Page Load 時間JS/CSS 解決方案yuglify https://github.com/yui/yuglify> npm -g install yuglify> yuglify ./lib/*.js如果使用 Mojito 開發...
效能提升方案大量運算時 - Webworkervar worker = new Worker(my_file.js);worker.addEventListener(message, function (e){// do something w...
效能提升方案硬體加速-webkit-transform:translate3d(0, 0, 0);
效能提升方案視覺化的欺敵戰術
效能提升方案gzip"Content-Encoding gzip"cdnlazy loadajax cache header"Cache-Control max-age=300"
網址優化方案http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.yahoo.com
讓開發容易點共用且統一的 liberror handleajaxi18Napi call handle
使用的框架我們使用 YUI也用 LESSLESS extends CSS with dynamic behavior such as variables,mixins, operations and functions.http://lessc...
Bottle這是一個提供 Mobile-friendly 元件庫它是 YUI Gallery自己開發自用http://zordius.github.com/yui3-gallery/gallery-bottle/http://www.yuibl...
來談談測試
遠端除錯Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8rAndroid Chrome + Android SDK + Chromehttps://developer...
網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://ca...
Thanks!
Upcoming SlideShare
Loading in …5
×

About Mobile Web Development Thing

2,178 views

Published on

Slide @ JSDC.tw 2013

Published in: Technology, Design
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,178
On SlideShare
0
From Embeds
0
Number of Embeds
348
Actions
Shares
0
Downloads
58
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

About Mobile Web Development Thing

  1. 1. 關於 Mobile Web 開發 二三事Eric Chuang
  2. 2. 自我介紹Eric Chuang@Yahoo!Blog @ http://cire.pixnet.net
  3. 3. 先問一個問題你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
  4. 4. 一些統計數據http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
  5. 5. Linkedin App 的故事 2011 版source: http://venturebeat.com/2011/08/16/linkedin-node/"Exclusive: How LinkedInused Node.js and HTML5 tobuild a better, faster app"
  6. 6. Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & went native forits mobile apps"
  7. 7. 但是...我們仍然想要提供給使用者良好的行動網頁經驗!
  8. 8. V.S
  9. 9. 挑戰的複雜度手機 X 瀏覽器 X OS 版本 X ...
  10. 10. OS版本Android
  11. 11. 目前我們行動網頁的目標iOSMobile SafariAndroidAndroid BrowserChrome BrowserWindows Phone 8 (在不久的將來)
  12. 12. iPhone1136 x 640960 x 640480 x 320Android好多好多!以三星為例: 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. 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_queries
  14. 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. 15. 還可以優化的方法針對不同螢幕回應適當的 template 與assetTempate way:Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.html#viewsCookie way:http://blog.keithclark.co.uk/responsive-images-using-cookies/
  16. 16. 挑戰 + 1:效能
  17. 17. Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
  18. 18. 降低 Page Load 時間1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
  19. 19. 降低 Page Load 時間Nodejs 解決方案a. Async.js https://github.com/caolan/asyncb. Memcached https://github.com/3rd-Eden/node-memcached
  20. 20. 降低 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/
  21. 21. 效能提升方案大量運算時 - Webworkervar 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/
  22. 22. 效能提升方案硬體加速-webkit-transform:translate3d(0, 0, 0);
  23. 23. 效能提升方案視覺化的欺敵戰術
  24. 24. 效能提升方案gzip"Content-Encoding gzip"cdnlazy loadajax cache header"Cache-Control max-age=300"
  25. 25. 網址優化方案http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.yahoo.com
  26. 26. 讓開發容易點共用且統一的 liberror handleajaxi18Napi call handle
  27. 27. 使用的框架我們使用 YUI也用 LESSLESS extends CSS with dynamic behavior such as variables,mixins, operations and functions.http://lesscss.org/
  28. 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. 29. 來談談測試
  30. 30. 遠端除錯Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8rAndroid Chrome + Android SDK + Chromehttps://developers.google.com/chrome-developer-tools/docs/remote-debuggingandroVMhttp://androvm.org/blog/Android Emulatorhttp://developer.android.com/develop/index.htmlweinrehttp://people.apache.org/~pmuellr/weinre/docs/latest/
  31. 31. 網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com
  32. 32. Thanks!

×