Download - Android Day 2013 - Mobile Web App Design
![Page 1: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/1.jpg)
Mobile Web App DesignAndroid Day 2013
SJ
![Page 3: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/3.jpg)
Mobile App 兩大開發陣營
● Native App速度快、功能強、不跨平台
● Web App效能不佳、功能不強、跨平台
http://dukeland.hk/2012/07/26/webapp-vs-native-app/
![Page 4: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/4.jpg)
Web App 的定義!?
使用 Web 技術實作的 App
![Page 5: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/5.jpg)
可能對 Web App 的誤解
![Page 6: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/6.jpg)
App 使用瀏覽器開啟 WebSite?這叫做內嵌網頁!
![Page 7: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/7.jpg)
App 使用瀏覽器開啟 Responsive WebSite?比上面的好一些,但還是內嵌網頁!
![Page 8: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/8.jpg)
App Store Review Guidelines 2.12
Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may
be rejected.
![Page 9: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/9.jpg)
Web App 與 Web Site 是兩回事
別用 Web Site 的思維設計 Web App
![Page 10: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/10.jpg)
近年 HTML5 Web App 崛起
Why
![Page 11: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/11.jpg)
Flash 已死
2012.06 Adobe Flash Google Play 下架iOS 拒絕支援 Flash 外掛程式
![Page 12: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/12.jpg)
2010 年 Steve Jobs 的槍響
http://blog.toright.com/archives/1994
![Page 13: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/13.jpg)
行動上網裝置數量倍增
為了滿足各種平台,App 開發者做到手軟!
![Page 14: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/14.jpg)
Web App 與 Web Site 執行環境的差異
Web Site 無法限定使用者瀏覽器,但 Web App 可以!
![Page 15: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/15.jpg)
於是 HTML5 紅了!
![Page 16: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/16.jpg)
Web App 的優點!
● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純
![Page 17: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/17.jpg)
看來 Web App 是一片藍海
但事實上...
![Page 18: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/18.jpg)
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術 (實際上各方瀏覽器實作不一、且 API 根本不夠強)
● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純
![Page 19: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/19.jpg)
HTML5 Test (Web Site)
![Page 20: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/20.jpg)
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術 (實際上各方瀏覽器實作不一)
● Web 擁有跨平台能力 (HTML5 都不怎麼跨平台了、還有 CSS3 怎麼辦!)
● 適合 Web Designer 快速開發● 開發環境單純
![Page 21: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/21.jpg)
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發 (需要熟
悉 CSS3, JavaScript, HTML5 API, UI Framework, JS Bridge...等等)
● 開發環境單純
![Page 22: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/22.jpg)
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純 (我們忘了硬體環境不單
純!)
![Page 23: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/23.jpg)
Android 碎片化問題
http://chinese.engadget.com/tag/fragmentation/
![Page 24: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/24.jpg)
重新思考
我們適合採用 Web App 開發模式嗎?
![Page 25: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/25.jpg)
Web App Features
● 透過用全螢幕瀏覽器來執行● 採用 Web 技術實現 (HTML5 + CSS3)● 跑的比較慢!● 用起來怪怪的,使用者體驗不佳!● HTML5 API 功能有限,成不了大器!
![Page 26: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/26.jpg)
Native App 不跨平台!Web App 太弱!
我們還有其他選擇嗎?
![Page 27: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/27.jpg)
Hybird AppWeb + Native
![Page 28: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/28.jpg)
JavaScript Bridge建立 Browser 與 Native 之間溝通橋樑
![Page 29: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/29.jpg)
典型 Web App 架構
![Page 30: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/30.jpg)
Web App Architectural Style
● Multi-page Application, MPAHTML 靜態 DOMjQuery MobilePage Reload, UX NG!
● Single-page Application, SPAJavaScript 動態處理 DOMExt / Sencha TouchEvent-based, Animation, UX Good!Memory Leak
![Page 31: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/31.jpg)
Hybrid App 的最大貢獻
拉近 Web 與 Native 之間的距離
![Page 32: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/32.jpg)
Web App Skills
● HTML5 API● CSS3● JavaScript● JavaScript Bridge + Native Coding● UI Framework / Library
![Page 33: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/33.jpg)
Web App PerformanceWeb App 真的很慢嗎?
![Page 34: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/34.jpg)
2012Facebook 開了 HTML5 一槍
Building Facebook’s mobile app on HTML5 was the biggest strategic mistake we've ever made.
http://www.inside.com.tw/2012/09/12/mark-zuckerberg-disrupt
![Page 35: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/35.jpg)
Sencha Touch 注入強心針
Fastbook vs FacebookVideo http://vimeo.com/55486684#
Demo http://fb.html5isready.com/
![Page 36: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/36.jpg)
錯的不是 HTML5,而是技術與思維!
● Animation Queue (requestAnimationFrame)
● HTML5 + AJAX Request● Task Queue (DOM Layout)
![Page 37: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/37.jpg)
Web App Performance Issues
● DOM Layout Render 效率● JavaScript 執行速度● CSS 渲染效率
滑動列表是 Web App 的最大罩門
![Page 38: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/38.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 39: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/39.jpg)
Web View Hardware Acceleration
Base on Android 3.0 (API Level 11)<application android:hardwareAccelerated="true" ...>
![Page 40: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/40.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 41: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/41.jpg)
DOM 優化技巧
DOM 減肥減少 Repaint, Reflow
![Page 42: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/42.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 43: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/43.jpg)
透過開發工具尋找 CSS Query Hotspot
http://blog.toright.com
![Page 44: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/44.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 46: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/46.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 47: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/47.jpg)
抓住瀏覽器重繪的時間
setTimeout 改用 requestAnimationFrame// 傳統作法
var handle = setTimeout(renderFn, PERIOD);// 改善作法
var handle = requestAnimationFrame(renderFn);
![Page 48: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/48.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 49: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/49.jpg)
利用 CSS Image Sprites 合併圖片 目的:減少 Request 發送
#home{ background:url('img_navsprites.gif') 0 0; }
#prev{ background:url('img_navsprites.gif') -47px 0; }
#next{ background:url('img_navsprites.gif') -91px 0; }
![Page 50: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/50.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 51: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/51.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache
![Page 52: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/52.jpg)
利用 LocalStorage 進行資料快取
目的:減少 Request 發送與網路延遲
http://blog.toright.com
![Page 53: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/53.jpg)
Android 如何改善 Web App 效能?
● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Request Cache● HTML5 Local Storage● HTML5 Application Cache
![Page 54: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/54.jpg)
HTML5 Application CacheOffline + Cache
http://blog.toright.com
![Page 55: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/55.jpg)
Web App 也應該要重視 UX別閉門造車,善用現成的 UI Framework
![Page 56: Android Day 2013 - Mobile Web App Design](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c8205d4a795926648b456c/html5/thumbnails/56.jpg)
開發 Web App 需要信念
Web App 也能像 Native App 一樣優異