About Mobile Web Development Thing
22 likes2,562 views
该文档探讨了移动Web开发的挑战，特别是在不同设备和浏览器之间提供良好用户体验的重要性。它讨论了如何优化移动网页的性能，提供了多种技术方案和工具，包括使用CSS媒体查询、Node.js、Web Workers和压缩技术。文档还提到了测试和调试移动网站的多种方法及资源。
About Mobile Web Development Thing
- 1. 關於 Mobile Web 開發 二三事 Eric Chuang
- 2. 自我介紹 Eric Chuang @Yahoo! Blog @ http://cire.pixnet.net
- 3. 先問一個問題 你喜歡使用 Mobile Web ? 還是喜歡用 Mobile App ?
- 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"
- 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:效能
- 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/
- 23. 效能提升方案 視覺化的欺敵戰術
- 24. 效能提升方案 gzip "Content-Encoding gzip" cdn lazy load ajax cache header "Cache-Control max-age=300"
- 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/
- 32. Thanks!