Android_Day_2013_-_Mobile_Web_App_Design.pdf

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

Transcript

1. Mobile Web App Design
   Android Day 2013
   SJ
   

   View Slide

2. 自我介紹
   姓名：SJ
   Blog：http://blog.toright.com
   專長：程式設計、軟體架構、軟體工程
   現職：旭聯科技 研發副理
   

   View Slide

3. Mobile App 兩大開發陣營
   ● Native App
   速度快、功能強、不跨平台
   ● Web App
   效能不佳、功能不強、跨平台
   http://dukeland.hk/2012/07/26/webapp-vs-native-app/
   

   View Slide

4. Web App 的定義！？
   使用 Web 技術實作的 App
   

   View Slide

5. 可能對 Web App 的誤解
   

   View Slide

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

   View Slide

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

   View Slide

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.
   

   View Slide

9. Web App 與 Web Site 是兩回事
   別用 Web Site 的思維設計 Web App
   

   View Slide

10. 近年 HTML5 Web App 崛起
    Why
    

    View Slide

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

    View Slide

12. 2010 年 Steve Jobs 的槍響
    http://blog.toright.com/archives/1994
    

    View Slide

13. 行動上網裝置數量倍增
    為了滿足各種平台，App 開發者做到手軟！
    

    View Slide

14. Web App 與 Web Site 執行
    環境的差異
    Web Site 無法限定使用者瀏覽器，但 Web
    App 可以！
    

    View Slide

15. 於是 HTML5 紅了！
    

    View Slide

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

    View Slide

17. 看來 Web App 是一片藍海
    但事實上...
    

    View Slide

18. 別誤解 Web App 的優點！
    ● 使用標準化 HTML5 技術 (實際上各方
    瀏覽器實作不一、且 API 根本不夠強)
    ● Web 擁有跨平台能力
    ● 適合 Web Designer 快速開發
    ● 開發環境單純
    

    View Slide

19. HTML5 Test (Web Site)
    

    View Slide

20. 別誤解 Web App 的優點！
    ● 使用標準化 HTML5 技術 (實際上各方
    瀏覽器實作不一)
    ● Web 擁有跨平台能力 (HTML5 都不怎
    麼跨平台了、還有 CSS3 怎麼辦！)
    ● 適合 Web Designer 快速開發
    ● 開發環境單純
    

    View Slide

21. 別誤解 Web App 的優點！
    ● 使用標準化 HTML5 技術
    ● Web 擁有跨平台能力
    ● 適合 Web Designer 快速開發 (需要熟
    悉 CSS3, JavaScript, HTML5 API, UI
    Framework, JS Bridge...等等)
    ● 開發環境單純
    

    View Slide

22. 別誤解 Web App 的優點！
    ● 使用標準化 HTML5 技術
    ● Web 擁有跨平台能力
    ● 適合 Web Designer 快速開發
    ● 開發環境單純 (我們忘了硬體環境不單
    純！)
    

    View Slide

23. Android 碎片化問題
    http://chinese.engadget.com/tag/fragmentation/
    

    View Slide

24. 重新思考
    我們適合採用 Web App 開發模式嗎？
    

    View Slide

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

    View Slide

26. Native App 不跨平台！
    Web App 太弱！
    我們還有其他選擇嗎？
    

    View Slide

27. Hybird App
    Web + Native
    

    View Slide

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

    View Slide

29. 典型 Web App 架構
    

    View Slide

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
    

    View Slide

31. Hybrid App 的最大貢獻
    拉近 Web 與 Native 之間的距離
    

    View Slide

32. Web App Skills
    ● HTML5 API
    ● CSS3
    ● JavaScript
    ● JavaScript Bridge + Native Coding
    ● UI Framework / Library
    

    View Slide

33. Web App Performance
    Web App 真的很慢嗎？
    

    View Slide

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
    

    View Slide

35. Sencha Touch 注入強心針
    Fastbook vs Facebook
    Video http://vimeo.com/55486684#
    Demo http://fb.html5isready.com/
    

    View Slide

36. 錯的不是 HTML5，而是技術與思維！
    ● Animation Queue
    (requestAnimationFrame)
    ● HTML5 + AJAX Request
    ● Task Queue (DOM Layout)
    

    View Slide

37. Web App Performance Issues
    ● DOM Layout Render 效率
    ● JavaScript 執行速度
    ● CSS 渲染效率
    滑動列表是 Web App 的最大罩門
    

    View Slide

38. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

39. Web View Hardware
    Acceleration
    Base on Android 3.0 (API Level 11)
    
    

    View Slide

40. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

41. DOM 優化技巧
    DOM 減肥
    減少 Repaint, Reflow
    

    View Slide

42. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

43. 透過開發工具尋找 CSS Query Hotspot
    http://blog.toright.com
    

    View Slide

44. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

45. JavaScript 壓縮與合併
    http://blog.toright.com
    

    View Slide

46. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

47. 抓住瀏覽器重繪的時間
    setTimeout 改用 requestAnimationFrame
    // 傳統作法
    var handle = setTimeout(renderFn, PERIOD);
    // 改善作法
    var handle = requestAnimationFrame(renderFn);
    

    View Slide

48. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

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

    View Slide

50. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

51. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Caching
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

52. 利用 LocalStorage 進行資料快取
    目的：減少 Request 發送與網路延遲
    http://blog.toright.com
    

    View Slide

53. Android 如何改善 Web App 效能？
    ● 利用硬體加速
    ● DOM 優化
    ● CSS 優化
    ● JavaScript Minify
    ● Animation Frame
    ● CSS Image Sprites
    ● HTTP Request Cache
    ● HTML5 Local Storage
    ● HTML5 Application Cache
    

    View Slide

54. HTML5 Application Cache
    Offline + Cache
    http://blog.toright.com
    

    View Slide

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

    View Slide

56. 開發 Web App 需要信念
    Web App 也能像 Native App 一樣優異
    

    View Slide

57. 感謝各位的聆聽
    Q & A
    sj@toright.com
    http://blog.toright.com
    

    View Slide