android day 2013 - mobile web app design

Mobile Web App DesignAndroid Day 2013

SJ

自我介紹

姓名：SJBlog：http://blog.toright.com專長：程式設計、軟體架構、軟體工程

現職：旭聯科技研發副理

http://blog.toright.com

Mobile App 兩大開發陣營

● Native App速度快、功能強、不跨平台

● Web App效能不佳、功能不強、跨平台

http://dukeland.hk/2012/07/26/webapp-vs-native-app/



Web App 的定義！？

使用 Web 技術實作的 App

可能對 Web App 的誤解

App 使用瀏覽器開啟 WebSite？這叫做內嵌網頁！

App 使用瀏覽器開啟 Responsive WebSite？比上面的好一些，但還是內嵌網頁！

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.

Web App 與 Web Site 是兩回事

別用 Web Site 的思維設計 Web App

近年 HTML5 Web App 崛起

Why

Flash 已死

2012.06 Adobe Flash Google Play 下架iOS 拒絕支援 Flash 外掛程式

2010 年 Steve Jobs 的槍響

http://blog.toright.com/archives/1994



行動上網裝置數量倍增

為了滿足各種平台，App 開發者做到手軟！

Web App 與 Web Site 執行環境的差異

Web Site 無法限定使用者瀏覽器，但 Web App 可以！

於是 HTML5 紅了！

Web App 的優點！

● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純

看來 Web App 是一片藍海

但事實上...

別誤解 Web App 的優點！

● 使用標準化 HTML5 技術 (實際上各方瀏覽器實作不一、且 API 根本不夠強)

● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純

HTML5 Test (Web Site)


● 使用標準化 HTML5 技術 (實際上各方瀏覽器實作不一)

● Web 擁有跨平台能力 (HTML5 都不怎麼跨平台了、還有 CSS3 怎麼辦！)

● 適合 Web Designer 快速開發● 開發環境單純


● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發 (需要熟

悉 CSS3, JavaScript, HTML5 API, UI Framework, JS Bridge...等等)

● 開發環境單純


● 使用標準化 HTML5 技術● Web 擁有跨平台能力● 適合 Web Designer 快速開發● 開發環境單純 (我們忘了硬體環境不單

純！)

Android 碎片化問題

http://chinese.engadget.com/tag/fragmentation/



重新思考

我們適合採用 Web App 開發模式嗎？

Web App Features

● 透過用全螢幕瀏覽器來執行● 採用 Web 技術實現 (HTML5 + CSS3)● 跑的比較慢！● 用起來怪怪的，使用者體驗不佳！● HTML5 API 功能有限，成不了大器！

Native App 不跨平台！Web App 太弱！

我們還有其他選擇嗎？

Hybird AppWeb + Native

JavaScript Bridge建立 Browser 與 Native 之間溝通橋樑

典型 Web App 架構

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

Hybrid App 的最大貢獻

拉近 Web 與 Native 之間的距離

Web App Skills

● HTML5 API● CSS3● JavaScript● JavaScript Bridge + Native Coding● UI Framework / Library

Web App PerformanceWeb App 真的很慢嗎？

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



Sencha Touch 注入強心針

Fastbook vs FacebookVideo http://vimeo.com/55486684#

Demo http://fb.html5isready.com/

http://vimeo.com/55486684#

http://fb.html5isready.com/

錯的不是 HTML5，而是技術與思維！

● Animation Queue (requestAnimationFrame)

● HTML5 + AJAX Request● Task Queue (DOM Layout)

Web App Performance Issues

● DOM Layout Render 效率● JavaScript 執行速度● CSS 渲染效率

滑動列表是 Web App 的最大罩門

Android 如何改善 Web App 效能？

● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Caching● HTML5 Local Storage● HTML5 Application Cache

Web View Hardware Acceleration

Base on Android 3.0 (API Level 11)<application android:hardwareAccelerated="true" ...>

DOM 優化技巧

DOM 減肥減少 Repaint, Reflow

透過開發工具尋找 CSS Query Hotspot


http://blog.toright.com/


JavaScript 壓縮與合併




抓住瀏覽器重繪的時間

setTimeout 改用 requestAnimationFrame// 傳統作法

var handle = setTimeout(renderFn, PERIOD);// 改善作法

var handle = requestAnimationFrame(renderFn);

利用 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; }

利用 LocalStorage 進行資料快取

目的：減少 Request 發送與網路延遲





● 利用硬體加速● DOM 優化● CSS 優化● JavaScript Minify● Animation Frame● CSS Image Sprites● HTTP Request Cache● HTML5 Local Storage● HTML5 Application Cache

HTML5 Application CacheOffline + Cache




Web App 也應該要重視 UX別閉門造車，善用現成的 UI Framework

開發 Web App 需要信念

Web App 也能像 Native App 一樣優異

感謝各位的聆聽

Q & A

[email protected]://blog.toright.com

android day 2013 - mobile web app design

Technology