iPhoneWebApp開發雜感

iPhone的SDK還需要兩個月才出來……現在要給iPhone開發app的話，唯一的官方推薦方式就是走web app的道路……


水果牌的魅力無窮……即便有browser的侷限，還是有不少精彩的iphone web app浮現……


Facebook的iPhone版本，簡直就做得跟原生程式無異……當之無愧的Best iPhone Web App……


這或許也是iPhone上的Mobile Safari夠強……它真的很強悍……現代瀏覽器該支援的它都有……若要挑剔的話，我可以說它js的執行速度太慢……但這是處理器的問題，非戰之罪……

只要有足夠想象足夠技術，iPhone能夠提供一個相當美好的舞臺……而Google的手機平臺Adroid使用的瀏覽器與iPhone亦是同核心……明年底，GPhone出來後，iPhone Web App應該都能夠搖身一變成為GPhone Web App才對……

手機原生程式固然可以享受到各種Web App無法做到的東西……比方說3D，本地儲存等等……但這是有代價的……Windows Mobile / Sybiam / iPhone / Adroid，難道我們需要維護四個程式版本？而Web App的話，相信未來幾年內就能夠將他們全部一網打盡……

瀏覽器內的世界已經可以很精彩了……偶個人對Web App的發展還是非常有信心的……

扯遠了……

開發iPhone Web App時，偶大部分的時間都是十分開心……因為我只需要照顧好MobileSafari一個瀏覽器就夠了……我可以毫不猶豫的使用-webkit-border-image這樣酷的CSS效果……

但MobileSafari也是有bug的……最納悶的一個CSS bug就是它無法在頁面上固定位置顯示一個東西……比方說選單……而偏偏在頁面上顯示固定元素做導航在iPhone上面對使用者互動是十分關鍵的……CSS搞不定，javascript呢？很悲慘的是使用者拖動頁面這個事件根本拿不到……應該有別的js奇技可以搞定這個……但是，這個是bug……相信這個bug會水果牌會很快搞定的……我個人是覺得投入精力去繞過這麼個bug很划不來……至少，facebook也沒有……

facebook是家偉大的公司……它的iPhone版很酷……而其開發者Joe Hewitt（不認識？Firebug作者是也！）把facebook iPhone版頁面切換引擎iui給開源了……iui很好，很強大~ ?

---

因為開發的web app包括IM，使用AJAX是必然的了……實際上，偶使用了超大量的Ajax……

在選擇Ajax庫的時候，著實費了一番功夫……最終是選擇了jQuery……主要原因是在普通web上用慣了……轉其他庫的話，重新上手需要時間……

一開始猶豫主要是擔心jQuery太龐大……怕iPhone抗不住……可實際測試的結果……MobilSafari執行jQuery遊刃有餘……

另一方面的衡量是對於OO的支援……jQuery代表的是Event Base的開發哲學……OO並不是jQuery的選擇……這點在jQuery作者John Resig的一個演講中有提到……

偶的Web App相對比較複雜……不遵循OO的話，很擔心程式碼後期的維護以及擴充套件……不過後來也就釋然了……不是非OO不可……程式碼好壞最重要的還是看程式設計師本身的功力……如果說OO是神刀的話……有的人 “即便有神刀在手，亦無法成為刀中之神”……而且，也不是說用了jQuery就不能OO……我完全可以從別的庫如Prototype / Mootools等挖出他們對OO支援的部分來用……至於$，還是覺得jQuery的爽~

如果不是jQuery用慣了的話，我很可能會選擇mootools……因為它夠輕量……

號稱對iPhone有特別支援的js庫是Dojo……而Dojo亦對Comet有支援……Cometd便是Dojo基金會那夥人搞出來的……偶做的Web App有包含Web IM，本來看上去Dojo會是合適的選擇……但最終還是放棄了……它太龐大了……如果我用上Dojo的話，可能以後所有的東西都得基於Dojo……就算伺服器端不用它的Cometd，我還是需要去使用使用它的bayeux協議……bayeux協議看了就很暈……這條賊船太大……上去了就下不來……所以，Dojo反倒是偶最先排除的js庫……

不算UI設計……整個Web App開發了大概是2個人月……但，優化、修改又用去2.5個人月……

iPhone跑JS是很慢的……雖然開發的時候已經有小心注意效率……但第一版出來的結果不理想……主要原因是大家第一次做這麼複雜的Web App，欠缺經驗……所以，狠下一番功夫去做優化，若干模組幾乎就是重寫了……

jQuery的$對CSS selector是很強悍……但是功能強大並不代表它快……一開始做的時候甚至有時select了一堆Element出來，然後使用each……慢就一個字……後來全部另外想方法重寫了……效率前後相差可達數十倍……

在UI上，則是開心了使用了iui……iui跟jQuery共存得很好……

 

---

整體上來說，開發iPhone Web App最大的問題在於使用者操作上……實際上，這也是Apple提供的開發指南中首先強調的一點……Understand User-iPhone interaction……

它的可顯示面積最多隻有320×396……然後，還有橫屏、豎屏……MobileSafari位址列顯示、隱藏……輸入鍵盤開啟、關閉……設計時必須考慮到這種種情況……如果說要在使用者輸入時做動態提示……那麼需要記得使用者輸入的時候鍵盤是開啟的，千萬不要把提示放在被鍵盤蓋住的地方……

純手指觸控式螢幕操作……這意味著螢幕上的所有可點選元素（按鈕等）都必須夠大，最好還要相隔夠遠……一行最好只有一個……不然，使用者很容易點錯……

當然，我們也可以完全選擇按照iPhone它自己的UI風格去做……頂部一個標題，標題旁最多兩個按鈕……然後正式內容再採用那個List風格…… 但問題是，iPhone本身有一個Home按鈕可以用……Web App沒有，Home一按，就直接退出Safari了……另一個關鍵問題是MobileSafari的頁面滾動預設是整個頁面的滾動……你無法讓使用者只滾動頁面中的一個Div/iframe，而保持其他部分不動……（Well，實際上，是可以只滾動一個Div，只是需要用兩個手指！）……

這就意味如果Web App夠複雜（比方說偶開發的這個），就不能照搬Apple的風格了……

總的來說，開發iPhone Web App是件很有挑戰性，也可以是很愜意的事情……Web + 手機是當下以及下來一兩年內最熱門的開發話題……時勢如此，英雄又是在哪裡呢？

本文轉自 Wuvist 51CTO部落格，原文連結:http://blog.51cto.com/wuvist/847736