About Mobile Web Development Thing
Upcoming SlideShare
Loading in...5
×
 

About Mobile Web Development Thing

on

  • 1,978 views

Slide @ JSDC.tw 2013

Slide @ JSDC.tw 2013

Statistics

Views

Total Views
1,978
Views on SlideShare
1,655
Embed Views
323

Actions

Likes
17
Downloads
54
Comments
0

3 Embeds 323

http://cire.pixnet.net 316
http://www.linkedin.com 6
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

About Mobile Web Development Thing About Mobile Web Development Thing Presentation Transcript

  • 關於 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 HTML5 tobuild a better, faster app"
  • Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & went native forits mobile apps"
  • 但是...我們仍然想要提供給使用者良好的行動網頁經驗!
  • 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.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從螢幕尺寸來看
  • 一種解法 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
  • 別忘了設定 viewport<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  • 還可以優化的方法針對不同螢幕回應適當的 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/
  • 挑戰 + 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 開發也可以試試延伸套件 Mojito-Shakerhttp://developer.yahoo.com/cocktails/shaker/
  • 效能提升方案大量運算時 - 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/
  • 效能提升方案硬體加速-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://lesscss.org/
  • 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/
  • 來談談測試
  • 遠端除錯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/
  • 網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com
  • Thanks!