騰訊廣告平臺產品團隊談PhoneGap使用

趙客點評:

貌似現在談HTML 5,必然談及Flash。本來這是【騰訊廣告平臺產品團隊談PhoneGap使用】,但InfoQ還是“順便”問了一下騰訊廣告事業部設計中心總監董霙,如何看待Flash和HTML5的發展和應用現狀?對於這兩種技術的適用領域有哪些建議?

 

而他關於Flash的回答是:

 

“自從蘋果禁止Flash在其iOS瀏覽器上運行以後,很多人說“Flash已退出舞臺,HTML5纔是未來”。但當前的事實是Flash依舊有很強的生命力。直到今天可以說,包括iOS平臺在內,Flash對於各個平臺的支持都是最佳的。最近2年,我們除了看到Flash在桌面瀏覽器優勢依舊以外,還目睹了許多利用 AIR開發的優秀移動原生APP 和利用 Stage3D API 建立的強大3D 應用。相信Flash在移動應用開發和 Web3D領域上未來會做得更好。”

 

“Flash 理應不斷提高 AIR 移動原生APP 的運行效率,同時降低APP的能耗,並且開發出更好的移動應用組件給開發者使用,從而繼續保持其在移動原生APP上的優勢。在 Web-3D 領域內繼續深化 Stage3D API,優化與提高3D引擎的功能與性能,同時希望在flash ide工具中增加有關3D操作的組件,讓開發者能更高效地創建出畫面更炫、性能更佳的 3D 應用。”

 

的確非常客觀,也非常有見地!


 

作者 水羽哲 發佈於 2013年1月22日


“HTML5狀況及發展形勢報告”回顧了2012年HTML5的發展歷程,並預測了2013年的趨勢,就報告看來HTML5在移動終端領域將會有大的發展。在進行跨移動終端的應用設計時,開發者普遍會選擇一些框架來處理業務無關的技術細節,本期我們採訪到了騰訊廣告事業部設計中心總監董霙,請他和他的團隊談下在使用移動開發框架PhoneGap時的感受。

 

InfoQ:首先請介紹下團隊背景和成員?

 

董霙:我們的團隊隸屬於騰訊OMG網絡媒體事業羣下的廣告平臺產品部,主要負責騰訊網平臺上的日常廣告項目設計工作,以及新廣告產品的研發。 目前團隊擁有13個成員,分散於北京,上海,廣州三地。其中設計師10人,程序員3人,雖然平均年齡不到30歲,但大部分人都有8-10年的互聯網設計或開發經驗,算是一個經驗豐富又充滿活力的集體。

 

InfoQ:目前團隊中PhoneGap的應用現狀是怎樣的?

 

董霙:我們的團隊平均每年產出300多個互動創意廣告作品以及3-5款新APP產品。2012年我們嘗試使用PhoneGap開發了多款移動客戶端的APP,其中2款已應用於商業活動中,分別是“北大青鳥我是博士後-互動問答遊戲應用”與“萬聖節更衣室應用“。後者的案例我們在12年的中國廣告長城獎中獲得銅獎,並在《PhoneGap實戰》一書中寫了完整的項目開發介紹,2013年,我們計劃加大移動客戶端的互動創意推廣力度,PhoneGap也必將在未來一年對我們的工作貢獻更大的力量。

 

InfoQ:選擇PhoneGap做移動產品開發的技術選型方案是如何確定的?它和其他的框架對比有哪些優勢?

 

董霙:技術選型方案上主要依據以下2點:

 

  • 學習與開發成本:PhoneGap 使用的核心語言是JS,團隊裏的程序員都有JS經驗,這對於他們來說學習成本無疑降低了很多。開發一個簡單功能APP,從設計到開發完成,一般只需用到半個月時間左右。
  • 平臺兼容性:PhoneGap開發的APP只需編寫一次APP的功能核心代碼,即可發佈到多個平臺。真正實現多平臺全面覆蓋。
     

它和其他的框架對比有哪些優勢:

 

  • 支撐平臺數量最多: PhoneGap 支持當前大多數的主流平臺除了 iPhone,Android 外還支持 BlackBerry,Symbian,Palm,Window Phone。
  • 代碼可操控性較高:PhoneGap 採用了 HTML + CSS + JavaScript 作爲其編程語言,同時對 HTML5 和 CSS3 提供了相應的支持。除此PhoneGap 包含了DOM特性,PhoneGap 可以用jQuery等第三方庫。
  • 發展前景明朗:PhoneGap被 Adobe 收購後,無疑有了更強大的技術支持後盾,相信未來會有更好的發展。
     

InfoQ:在使用PhoneGap開發產品的過程中遇到哪些令人抓狂的地方?是如何解決的?

 

董霙:提高性能:

PhoneGap的性能主要依賴於webkit瀏覽器的內核解析能力,所以它的運行效率必定弱於原生。同時webview無法釋放佔用內存的問題也是一個導致性能較差的重要原因。爲了提高APP性能,優化JS是必須要做的工作,主要依靠以下2方面進行優化:

 

首先選擇較小的框架-XUI,XUI與 jQuery比較,文件更小,效率較高,語法與 jQuery 接近。

 

其次通過對選擇器的各種語法的性能分析進行測試後,我們發現,最快的選擇器是id選擇器和元素標籤選擇器;較慢的選擇器是class選擇器;最慢的選擇器是僞類選擇器和屬性選擇器。所以在對DOM操作的時候一定要選擇最快的id或者標籤選擇器。

 

通過以上2點,可從 JS 上入手優化APP的性能。

 

另外說一個小技巧直接在APP內打開外網URL,而不是用系統默認瀏覽器打開:

 

PhoneGap APP 頁面中如果嘗試訪問的是外網鏈接,系統會使用默認瀏覽器打開,如何直接在APP頁面打開?除了使用ajax外,可以採用在 res/xml/cordova.xml 中配置 URL 白名單,在該文件內配置後,就都可以實現在APP頁中直接跳轉。配置規則範例,如下:

<!-- <access origin="https://example.com" /> 允許訪問example.com 域名下的鏈接-->
<!-- <access origin="https://example.com" subdomains="true" /> 同上,但包括子域,例如www -->
<!-- <access origin=".*"/> 允許訪問任何域名,建議只在開發中才用-->

InfoQ:我們看到團隊最近出了一本書《PhoneGap實戰》,寫這本書的目的是怎樣的?這本書主要關注哪些方面的內容?

 

董霙:寫這本書的主要目的有兩個,一方面是通過寫作這種方式細緻的梳理一遍PhongGap的功能和開發技巧,對我們過去的工作進行一次總結;另一方面,考慮到移動互聯網的快速發展,大家迫切希望瞭解更多的移動產品設計研發技巧,我們認爲PhoneGap作爲一款強大的工具值得推薦給同行們,希望通過這本書跟更多的開發者進行交流。

 

這本書相對與市面上的其他PhoneGap教材的最大特點,也是我們在寫作過程中一直在着力突出的點就是“接地氣”。我們不光要介紹基本的功能點,解釋用法,告訴大家“PhoneGap是什麼”,而且要通過大量豐富而生動的例子來告訴幫助大家學會實際項目中“怎麼用”。這些實例有的是爲本書專門製作的,有的就直接是我們在過去一年中爲廣告主量身定做的真實案例,希望初接觸PhoneGAP的人通過閱讀相關的章節,能對移動端的產品開發有一些直觀的認識。另外本書非常適合想掌握移動應用開發技術的設計師學習和參考,通過使用Adobe Edge Animate和phonegap可以在很短的時間內上手移動應用的開發。

 

InfoQ:團隊內部是如何做移動產品開發的?有哪些標準和規範?請針對重點的考量指標進行介紹。

 

董霙:移動端的產品開發,既是對傳統PC端的產品開發方法的繼承,也有一定的個性特點。宏觀來看,還是遵循調研-原型-成品的順序,在實際項目進行過程中,我們會更加關注用戶在移動設備上的操作體驗優化,移動端設備在這個方面給我們的產品提出了更高的要求,同時也提供了更多可能。針對不同的平臺和設備需要在產品規劃上有全面考慮。Phonegap在這點上非常有優勢,結合響應式佈局可以很快速的實現多終端多設備的適配。

 

InfoQ:在開發的項目中,有很多用到了PhoneGap和Air的結合,對於Air,希望看到哪些方面的改進和提升?可以列舉3-5點。

 

董霙:之前團隊使用 AIR 開發了基於 iOS 平臺 iPad設備上運行的電子雜誌APP。現在正使用AIR 開發一款廣告產品APP。通過一段時期對AIR的開發使用,我們覺得 AIR 整體上已相當出色。AIR 繼承了 Flash 在桌面平臺上的易用、高效的特點。它在移動設備原生特性支持上亦相當給力,iOS 和 Android 平臺上常用的原生特性基本支持(未支持特性可通過ANE進行拓展),同時 AIR 3.6 的最新版本,在運行效率上也比之前的版本有了很大提高。但也有一定的改進空間,以下幾方面的改進和提升還是非常希望能儘快看到:

 

  • 加快 iOS APP 的標準打包速度。
  • 更好地支持使用 Retina 屏幕分辨率所開發的APP。
  • 增強 StageWebView 和air內部的通信及交互功能以及提升StageWebView渲染外部網頁的性能。
  • 基於 ActionScript 手機項目開發的APP能提供更多接近原生UI的交互組件,例如:下拉更新功能組件;Swipe 滑動及拖動組件。
     

InfoQ: 如何看待Flash和HTML5的發展和應用現狀?對於這兩種技術的適用領域有哪些建議?

 

董霙:Flash和HTML5的發展和應用現狀?

 

自從蘋果禁止Flash在其iOS瀏覽器上運行以後,很多人說“Flash已退出舞臺,HTML5纔是未來”。但當前的事實是Flash依舊有很強的生命力。直到今天可以說,包括iOS平臺在內,Flash對於各個平臺的支持都是最佳的。最近2年,我們除了看到Flash在桌面瀏覽器優勢依舊以外,還目睹了許多利用 AIR開發的優秀移動原生APP 和利用 Stage3D API 建立的強大3D 應用。相信Flash在移動應用開發和 Web3D領域上未來會做得更好。

 

而HTML5作爲新一代的WEB規範,定義了新的元素標籤讓Html代碼更加規範;可以直接在 HTML 代碼中嵌入音頻和視頻;包含全新的 API,可以輕鬆實現拖放、文件編輯、繪圖等功能;對移動設備的支持能力越來越高。同時它得到了各大IT公司的鼎力支持,在未來也會有廣闊的發展前景。

 

對於這兩種技術的適用領域有哪些建議?

 

Flash 理應不斷提高 AIR 移動原生APP 的運行效率,同時降低APP的能耗,並且開發出更好的移動應用組件給開發者使用,從而繼續保持其在移動原生APP上的優勢。在 Web-3D 領域內繼續深化 Stage3D API,優化與提高3D引擎的功能與性能,同時希望在flash ide工具中增加有關3D操作的組件,讓開發者能更高效地創建出畫面更炫、性能更佳的 3D 應用。

 

HTML5對移動特性的支持力度也越來越強,在iOS5以上的設備上運行性能也有了明顯提升。當前移動瀏覽器開始更多地支持這些新特性,例如觸摸事件、加速度、地理位置等移動原生特性。但由於HTML5基於Open Web的出現,這導致不同瀏覽器對於 HTML5 的兼容性與支持性都會有差異,同時老式的桌面瀏覽器對 HTML5 的支持很弱,淘汰還需要一個漫長的過程。基於兼容性的原因,目前團隊主要利用HTML5來設計與開發基於移動瀏覽器上的網頁與應用。在最近的項目中,團隊利用HTML5、CSS3結合響應式網頁設計技術爲某品牌汽車創建了響應式的互動活動網站,響應式網頁設計能讓網頁在不同分辨率大小的設備上呈現最佳的視覺效果。同時有着較好的向下兼容特性,隨着HTML5在移動瀏覽器的平臺上越走越好, 我們相信基於HTML5 與 CSS3技術的響應式網頁設計也會使用的更加普遍,可以說它將會是網頁設計的一個趨勢。另外我們瞭解到Adobe正在開發基於響應式網站的全新制作工具,也期待可以儘早使用上,提升效率。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章