Tweet
Tweet

Slide 1

Slide 1 text

Mobile Web App Design Android Day 2013 SJ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

可能對 Web App 的誤解

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

近年 HTML5 Web App 崛起 Why

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

於是 HTML5 紅了！

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

HTML5 Test (Web Site)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Hybird App Web + Native

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

典型 Web App 架構

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Web App Performance Web App 真的很慢嗎？

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

感謝各位的聆聽 Q & A [email protected] http://blog.toright.com