Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android_Day_2013_-_Mobile_Web_App_Design.pdf

SJ Chou
January 16, 2014

 Android_Day_2013_-_Mobile_Web_App_Design.pdf

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

SJ Chou

January 16, 2014
Tweet

More Decks by SJ Chou

Other Decks in Technology

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
    [email protected]
    http://blog.toright.com

    View Slide