About Mobile Web Development Thing

關於 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 LinkedIn used Node.js and HTML5 to build a better, faster app"

Linkedin App 的故事 2013 版

source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/

"Why LinkedIn dumped HTML5 & went native for its mobile apps"

但是...

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

V.S

挑戰的複雜度

手機 X 瀏覽器 X OS 版本 X ...

OS版本

Android

目前我們行動網頁的目標

iOS Mobile Safari

AndroidAndroid Browser

Chrome BrowserWindows Phone 8 (在不久的將來)

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

從螢幕尺寸來看

一種解法 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 與 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/

挑戰 + 1:效能

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

降低 Page Load 時間

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


Nodejs 解決方案

a. Async.js https://github.com/caolan/async

b. Memcached https://github.com/3rd-Eden/node-memcached


JS/CSS 解決方案

yuglify https://github.com/yui/yuglify

> npm -g install yuglify> yuglify ./lib/*.js

如果使用 Mojito 開發

也可以試試延伸套件 Mojito-Shakerhttp://developer.yahoo.com/cocktails/shaker/

效能提升方案

大量運算時 - 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/

效能提升方案

硬體加速-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/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/

網路資源

http://developer.yahoo.com/yslow/https://developers.google.

com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com

Thanks!

Technology

About Mobile Web Development Thing