Mobile Web App Design
Android Day 2013
SJ
自我介紹
姓名:SJ
Blog: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
pr...
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)
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術 (實際上各方
瀏覽器實作不一)
● Web 擁有跨平台能力 (HTML5 都不怎
麼跨平台了、還有 CSS3 怎麼辦!)
● 適合 Web Designer 快速開發
● 開發...
別誤解 Web App 的優點!
● 使用標準化 HTML5 技術
● Web 擁有跨平台能力
● 適合 Web Designer 快速開發 (需要熟
悉 CSS3, JavaScript, HTML5 API, UI
Framework, J...
別誤解 Web App 的優點!
●
●
●
●

使用標準化 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 App
Web + Native
JavaScript Bridge
建立 Browser 與 Native 之間溝通橋樑
典型 Web App 架構
Web App Architectural Style
● Multi-page Application, MPA
HTML 靜態 DOM
jQuery Mobile
Page Reload, UX NG!

● Single-page App...
Hybrid App 的最大貢獻
拉近 Web 與 Native 之間的距離
Web App Skills
●
●
●
●
●

HTML5 API
CSS3
JavaScript
JavaScript Bridge + Native Coding
UI Framework / Library
Web App Performance
Web App 真的很慢嗎?
2012
Facebook 開了 HTML5 一槍
Building Facebook’s mobile app on HTML5 was the
biggest strategic mistake we've ever made.

http...
Sencha Touch 注入強心針
Fastbook vs Facebook
Video http://vimeo.com/55486684#
Demo 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 ...
Web View Hardware
Acceleration
Base on Android 3.0 (API Level 11)
<application android:hardwareAccelerated="true" ...>
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
DOM 優化技巧
DOM 減肥
減少 Repaint, Reflow
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
透過開發工具尋找 CSS Query Hotspot

http://blog.toright.com
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
JavaScript 壓縮與合併

http://blog.toright.com
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
抓住瀏覽器重繪的時間
setTimeout 改用 requestAnimationFrame
// 傳統作法
var handle = setTimeout(renderFn, PERIOD);
// 改善作法
var handle = req...
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
利用 CSS Image Sprites 合併圖片
目的:減少 Request 發送

#home{ background:url('img_navsprites.gif') 0 0; }
#prev{ background:url('img_...
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
利用 LocalStorage 進行資料快取
目的:減少 Request 發送與網路延遲

http://blog.toright.com
Android 如何改善 Web App 效能?
●
●
●
●
●
●
●
●
●

利用硬體加速
DOM 優化
CSS 優化
JavaScript Minify
Animation Frame
CSS Image Sprites
HTTP ...
HTML5 Application Cache
Offline + Cache

http://blog.toright.com
Web App 也應該要重視 UX
別閉門造車,善用現成的 UI Framework
開發 Web App 需要信念
Web App 也能像 Native App 一樣優異
感謝各位的聆聽
Q&A

sj@toright.com
http://blog.toright.com
Upcoming SlideShare
Loading in...5
×

Android Day 2013 - Mobile Web App Design

1,147

Published on

軟體最大的價值在於複製與重用,近年來標準化與跨平台的開發方式受到極度重視,但為何 Web App 總是讓開發者退卻?我們將介紹 Web App 的開發經驗與心路歷程,從實務的角度剖析各種開發方式與優缺點。分享如何在 Mobile 效能有限的窘境下,透過開發/除錯工具與效能最佳化等等手段,創造出重視使用者體驗的 Web App,藉此獲得 Web App 所帶來的跨平台效益。

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,147
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Android Day 2013 - Mobile Web App Design

  1. 1. Mobile Web App Design Android Day 2013 SJ
  2. 2. 自我介紹 姓名:SJ Blog:http://blog.toright.com 專長:程式設計、軟體架構、軟體工程 現職:旭聯科技 研發副理
  3. 3. Mobile App 兩大開發陣營 ● Native App 速度快、功能強、不跨平台 ● Web App 效能不佳、功能不強、跨平台 http://dukeland.hk/2012/07/26/webapp-vs-native-app/
  4. 4. Web App 的定義!? 使用 Web 技術實作的 App
  5. 5. 可能對 Web App 的誤解
  6. 6. App 使用瀏覽器開啟 WebSite? 這叫做內嵌網頁!
  7. 7. App 使用瀏覽器開啟 Responsive WebSite? 比上面的好一些,但還是內嵌網頁!
  8. 8. 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.
  9. 9. Web App 與 Web Site 是兩回事 別用 Web Site 的思維設計 Web App
  10. 10. 近年 HTML5 Web App 崛起 Why
  11. 11. Flash 已死 2012.06 Adobe Flash Google Play 下架 iOS 拒絕支援 Flash 外掛程式
  12. 12. 2010 年 Steve Jobs 的槍響 http://blog.toright.com/archives/1994
  13. 13. 行動上網裝置數量倍增 為了滿足各種平台,App 開發者做到手軟!
  14. 14. Web App 與 Web Site 執行 環境的差異 Web Site 無法限定使用者瀏覽器,但 Web App 可以!
  15. 15. 於是 HTML5 紅了!
  16. 16. Web App 的優點! ● ● ● ● 使用標準化 HTML5 技術 Web 擁有跨平台能力 適合 Web Designer 快速開發 開發環境單純
  17. 17. 看來 Web App 是一片藍海 但事實上...
  18. 18. 別誤解 Web App 的優點! ● 使用標準化 HTML5 技術 (實際上各方 瀏覽器實作不一、且 API 根本不夠強) ● Web 擁有跨平台能力 ● 適合 Web Designer 快速開發 ● 開發環境單純
  19. 19. HTML5 Test (Web Site)
  20. 20. 別誤解 Web App 的優點! ● 使用標準化 HTML5 技術 (實際上各方 瀏覽器實作不一) ● Web 擁有跨平台能力 (HTML5 都不怎 麼跨平台了、還有 CSS3 怎麼辦!) ● 適合 Web Designer 快速開發 ● 開發環境單純
  21. 21. 別誤解 Web App 的優點! ● 使用標準化 HTML5 技術 ● Web 擁有跨平台能力 ● 適合 Web Designer 快速開發 (需要熟 悉 CSS3, JavaScript, HTML5 API, UI Framework, JS Bridge...等等) ● 開發環境單純
  22. 22. 別誤解 Web App 的優點! ● ● ● ● 使用標準化 HTML5 技術 Web 擁有跨平台能力 適合 Web Designer 快速開發 開發環境單純 (我們忘了硬體環境不單 純!)
  23. 23. Android 碎片化問題 http://chinese.engadget.com/tag/fragmentation/
  24. 24. 重新思考 我們適合採用 Web App 開發模式嗎?
  25. 25. Web App Features ● ● ● ● ● 透過用全螢幕瀏覽器來執行 採用 Web 技術實現 (HTML5 + CSS3) 跑的比較慢! 用起來怪怪的,使用者體驗不佳! HTML5 API 功能有限,成不了大器!
  26. 26. Native App 不跨平台! Web App 太弱! 我們還有其他選擇嗎?
  27. 27. Hybird App Web + Native
  28. 28. JavaScript Bridge 建立 Browser 與 Native 之間溝通橋樑
  29. 29. 典型 Web App 架構
  30. 30. Web App Architectural Style ● Multi-page Application, MPA HTML 靜態 DOM jQuery Mobile Page Reload, UX NG! ● Single-page Application, SPA JavaScript 動態處理 DOM Ext / Sencha Touch Event-based, Animation, UX Good! Memory Leak
  31. 31. Hybrid App 的最大貢獻 拉近 Web 與 Native 之間的距離
  32. 32. Web App Skills ● ● ● ● ● HTML5 API CSS3 JavaScript JavaScript Bridge + Native Coding UI Framework / Library
  33. 33. Web App Performance Web App 真的很慢嗎?
  34. 34. 2012 Facebook 開了 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
  35. 35. Sencha Touch 注入強心針 Fastbook vs Facebook Video http://vimeo.com/55486684# Demo http://fb.html5isready.com/
  36. 36. 錯的不是 HTML5,而是技術與思維! ● Animation Queue (requestAnimationFrame) ● HTML5 + AJAX Request ● Task Queue (DOM Layout)
  37. 37. Web App Performance Issues ● DOM Layout Render 效率 ● JavaScript 執行速度 ● CSS 渲染效率 滑動列表是 Web App 的最大罩門
  38. 38. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  39. 39. Web View Hardware Acceleration Base on Android 3.0 (API Level 11) <application android:hardwareAccelerated="true" ...>
  40. 40. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  41. 41. DOM 優化技巧 DOM 減肥 減少 Repaint, Reflow
  42. 42. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  43. 43. 透過開發工具尋找 CSS Query Hotspot http://blog.toright.com
  44. 44. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  45. 45. JavaScript 壓縮與合併 http://blog.toright.com
  46. 46. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  47. 47. 抓住瀏覽器重繪的時間 setTimeout 改用 requestAnimationFrame // 傳統作法 var handle = setTimeout(renderFn, PERIOD); // 改善作法 var handle = requestAnimationFrame(renderFn);
  48. 48. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  49. 49. 利用 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; }
  50. 50. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  51. 51. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Caching HTML5 Local Storage HTML5 Application Cache
  52. 52. 利用 LocalStorage 進行資料快取 目的:減少 Request 發送與網路延遲 http://blog.toright.com
  53. 53. Android 如何改善 Web App 效能? ● ● ● ● ● ● ● ● ● 利用硬體加速 DOM 優化 CSS 優化 JavaScript Minify Animation Frame CSS Image Sprites HTTP Request Cache HTML5 Local Storage HTML5 Application Cache
  54. 54. HTML5 Application Cache Offline + Cache http://blog.toright.com
  55. 55. Web App 也應該要重視 UX 別閉門造車,善用現成的 UI Framework
  56. 56. 開發 Web App 需要信念 Web App 也能像 Native App 一樣優異
  57. 57. 感謝各位的聆聽 Q&A sj@toright.com http://blog.toright.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×