2008年11月，《連線》雜志主編Chris Anderson一文“Web已死，Internet永生”在移動互聯網大幕拉開之際引起軒然大波。應用交付的轉變註定瞭傳統Web模式已不再滿足用戶的需求與體驗，Web應用向移動終端的滲透變得異常重要。
對於需要吸引不同群體用戶，滿足不同業務需求的應用而言，如何使用一個實用、成本合理，且可支持大量應用的開發方式來實現我們的移動願景？在很多情況下看來，答案是使用Web技術。
伴隨著移動設備與網絡結合緊密度的提升，移動平臺的廣泛支持，以及以HTML5為驅動的Web技術不斷演進發展，以Web為中心的移動應用趨勢愈發明顯。原生應用和移動Web應用的界線也開始逐步縮減。
同時，眾多移動Web開發框架的升級發展也加速瞭Web應用向移動終端的滲透。以國內開源的移動Web開發平臺Rexsee（www.rexsee.com）為例，基於大量的擴展API，通過Javascript實現Web應用對移動終端功能的直接調用，建立起瞭Web應用與移動終端的橋梁。
模糊Web應用與原生應用界線
原生應用，也就是Native App，可以充分的發揮硬件設備和操作系統的功能特性，並可以完全不受網絡限制，運行效率高，且在用戶體驗方面有著突出優勢。但同時，因為技術門檻的原因，原生應用在具體實現上需要面對開發周期較長、成本較高、調試與發佈以及後期管理維護相對復雜的問題。
對比Web應用，雖然在復雜的用戶交互界面效果，以及對硬件功能的實現方面有著明顯劣勢，但使用標準化的Web技術為開發者帶來瞭很大的自由度、廣泛的應用范圍和低廉的成本。
但即便如此，以瀏覽器為平臺的Web應用相較於原生應用仍舊面臨著諸多難以逾越的困境，其中最明顯的則是對網絡的依賴以及對移動終端的功能支持。
補充：出於安全考慮，瀏覽器無法讀取本地資源，對於移動設備的很多功能不能直接調用，比如通訊錄、GPS、藍牙；基於瀏覽器的Web應用嚴重依賴網絡，一旦網絡情況不佳，很多交互無法進行；由於HTTP協議本身的限制，對於消息、推送等功能也會有所影響；……
讓Web應用脫離網絡，超出瀏覽器范圍運行，並可直接調用移動終端功能。基於這樣的價值實現，Rexsee（www.rexsee.com）通過實現一種混合應用的形態，進一步模糊瞭原生應用與Web應用的界線。
Rexsee支持開發者以標準化Web開發模式，即使用HTML5、CSS3和JavaScript開發，並可通過在線編譯生成原生應用客戶端，快速實現移動應用。
以Webkit為內核，在應用中保留瀏覽器元素，強化HTML5在瀏覽器之外的高度交互特性。
基於原生開發，擴展接近2000個API，通過Javascript直接調用移動終端功能。
符合W3C標準，完全兼容Sencha Touch、jQuery Mobile等第三方JavaScript工具包。
提供雲端應用與本地應用的不同展現形態，可完全脫離網絡運行。
跨平臺的取舍價值
iOS和Android的首當其沖，Symbian、黑莓、Meego、WebOS的夾縫求生，多種移動操作系統平臺在當前的移動互聯網中各自有著大批用戶支持。擺脫平臺和硬件環境的差異，讓應用適配於全部平臺，成為瞭移動Web應用一開始就需要承擔的責任。
降低瞭對平臺和底層的學習成本，提高代碼復用以及最終應用交付的適用范圍，這是跨平臺的優勢所在。但是，劣勢同樣明顯：為兼顧不同平臺，開發框架會相對臃腫，開發模式也會被動調整；其次，對於不同硬件功能的調用難免會因為迎合不同功能交集而做出舍棄，無法全面實現。
補充：以當前最受關註的iOS平臺和Android平臺為例。前者由於不支持js調用，原本在Android平臺上最為便捷的開發模式需在iOS變成一種“hack”行為，異步調用也成為瞭讓開發者頭疼而又不得不采取的選擇。
“一次開發，到處運行”成為瞭開發人員期望實現但又難以做到的問題。基於這樣的一個魚與熊掌的取舍，Rexsee選擇深度支持Android平臺，從而保證瞭高效同步的開發方式，以及全面功能的應用交付。截至目前為止，Rexsee提供瞭接近2000個擴展API，覆蓋95%的Android原生功能實現。
同時，針對於目前移動Web開發框架所面對的一個通病，即缺乏對系統原生UI控件的調用能力，難以實現等同於原生應用的界面展現這一問題，Rexsee在最新發佈的2.8版本裡（infoQ報道：http://www.infoq.com/cn/news/2012/02/rexsee2.8-release）擴展多個對象，主要用於創建和管理原生界面元素，支持Android系統的原生UI佈局（目前已支持Android SDK Platform API8的全部佈局）。
開發者可以通過JS直接生成androidSDK中定義的佈局對象和基本對象，對這些對象通過設置樣式屬性可以很靈活的控制其樣式，完全實現等同於原生應用的界面展現與交互體驗。
基於Rexsee的標準化Web開發模式
基於Rexsee的Android應用可以使用標準化的Web開發模式進行開發。所有的Rexsee代碼僅體現在Web前端，放在HTML頁面的<script>標簽內。
編寫Rexsee客戶端，實際上就是編寫Rexsee所能理解、渲染的HTML、CSS和Javascript代碼。與瀏覽器不同，Rexsee這個“瀏覽器”除瞭支持Webkit支持的所有對象外，又擴展瞭100多個Javascript對象及相應的2000個方法和事件。
補充：Rexsee本身具備瞭瀏覽器的所有功能，能夠加載任何網頁代碼，並渲染效果。在此之外，Rexsee提供瞭本地功能的調用接口，可以實現對本地存儲、通訊錄、傳感器、定位信息等本地功能的調用。同時，還提供瞭離線提交、push推送等原生應用功能。而這些，都是普通瀏覽器無法做到的。
界面：Rexsee的頁面設計支持Web佈局和原生佈局兩種形態：針對於原生佈局，可以通過Javascript語言構造出AndroidSDK中的佈局和基本對象，結合相應的觸屏事件，可以有很好的用戶體驗。且支持2D和3D的繪圖功能；針對Web佈局有兩個不同類的對象，一是頁面內對象，一是頁面外對象。
頁面內對象指的是網頁對象，如表格、DIV層、圖片、畫佈等。可以用CSS來控制其樣式，其渲染效果由Webkit引擎負責展現。
頁面外對象是指網頁以外的元素，如各種Bar，對話框（Dialog），彈出窗口等。使用Rexsee的樣式表定義，如該對象的位置、寬、高、透明度、顏色、字體等。頁面外元素的樣式是通過相關對象的樣式設置方法來操作的。
功能調用：同時支持同步和異步兩種調用方式。實現多媒體支持，定位、位置服務，傳感器，存儲，藍牙、wifi，以及推送和通知等功能。
交互：通過Javascript的事件接口、Rexsee的事件接口以及Rexsee私有協議實現。
特別指出，私有協議是通過諸如：rexsee:info；rexsee:about等；
Rexsee的事件接口已經由Rexsee內置註冊，使用時隻需在相應的事件函數中編寫用戶代碼即可，在事件觸發時，用戶代碼會被執行。
調試：和原有的Web前端開發一致。同時，Rexsee本身也提供瞭異常事件，用於捕捉錯誤。
編譯：整個過程其實就是將Rexsee代碼和Rexsee客戶端關聯的過程。
可以體現在B/S架構下，隻需將Rexsee代碼所在的URL和Rexsee客戶端首頁綁定。這種架構下，Rexsee代碼實際上是部署在服務器端，客戶端體積小，無需下載更新即可實現應用升級。
也可以在C/S架構下，需要將Rexsee代碼、資源文件打包進Rexsee客戶端，這種架構模式更加類似於原生應用，完全擺脫網絡束縛，啟動和運行效率較高。
同時，Rexsee還提供瞭B/C/S混合架構模式，即整合B/S和C/S的優勢。
對於開發者而言，隻需在掌握Web前端開發的基礎上，按需選用Rexsee提供的Javascript對象，按照Rexsee對象的方法、事件編寫代碼便可實現相應功能。
RexseeHello World
Rexsee開源技術社區在去年年底推出在線開發服務，登陸社區並訪問“項目中心”就可在線創建、開發應用。同時，該服務更強化瞭開發者之間的應用源碼分享。在Rexsee項目中心，我們可以很方便的在線實現第一個Hello World程序。
進入項目中心（http://www.rexsee.com/project/index.php）後，點擊左側頭部的“創建新項目”開始咱們的Hello World應用創建。隻需在對應的信息錄入框中填寫應用信息，並勾選權限設置即可創建成功。
編寫index.html頁面，輸入如下代碼：
[html] <html>
<head>
<title>Rexsee Hello World</tiltle>
<script type=text/javascript>
//Rexsee代碼從這裡開始
window.onRexseeReady=function(){
rexseeDialog.toast('系統加載完畢！');//出現後隨即消失效果
}
</script>
</head>
<body></body>
</html>
<html>
<head>
<title>Rexsee Hello World</tiltle>
<script type=text/javascript>
//Rexsee代碼從這裡開始
window.onRexseeReady=function(){
rexseeDialog.toast('系統加載完畢！');//出現後隨即消失效果
}
</script>
</head>
<body></body>
</html>
說明：
Rexsee提供的是JS API，可以在HTML中加入<scripttype=text/javascript></script>標簽；也可以在外部文件中添加JS代碼，然後引用；
本段代碼中用到瞭window.onRexseeReady=function（），即當系統加載完畢後，自動執行{}中的JS語句；
rexseeDialog.toast()，這行代碼執行時會彈出一個隨即消失的對話框；
更多詳細的JS對象和事件說明可以在Rexsee社區的“手冊與源碼”中獲取，或者直接下載Rexsee開發手冊：（補充：Rexsee的開發手冊即是一個具體的APK應用程序，具體對象和事件函數的示例演示可在手機上直接運行。）
手機在線版手冊：http://www.rexsee.com/rexsee/rexseeReference.apk
手機本地版手冊：http://www.rexsee.com/rexsee/rexseeLocalReference.apk
隨後，利用Rexsee開發版可以方便的查看應用效果並快速調試。
圖1. Rexsee Hello World應用截圖
補充：Rexsee開發版是一個專門用於調試Rexsee應用的軟件。開發者可以訪問如下鏈接，免費下載Rexsee開發版，並安裝在測試用的Android手機，或者模擬器上。
• Rexsee開發版：http://www.rexsee.com/rexsee/rexseeDeveloper-release.apk
• Rexsee模擬器（有點大）：http://www.rexsee.com/rexsee/RexseeEmulator.rar
在代碼編寫完成之後，點擊項目右上角的“編譯”按鈕就能直接獲得一個APK下載地址和該應用的二維碼圖形。咱們的第一個應用開發流程也就全部結束，你可以將編譯完成的APK應用投放到任何一個第三方應用市場，並加以推廣和運營。
除瞭基於項目中心的在線開發，你也可以在本地進行。隻需將上面示例中的代碼編寫到index.html文件中，然後打包為zip格式文件，再利用Rexsee的在線編譯功能實現封裝，同樣獲得APK程序。
理論上你可以把除瞭後臺代碼之外的東西都打包到ZIP包裡，比如一些圖片，音視頻文件，或者HTML的框架文件，CSS文件，JS文件。但考慮到安全、網絡速度、流量、交互體驗等各方面需求，建議根據具體應用項目來安排。
五分鐘創建指南針應用
在熟悉瞭一個簡單的應用開發流程以後我們可以結合Rexsee的擴展對象，快速實現一個具體的Android應用。在此，我們以指南針應用為例。
首先需要開啟Android的傳感器功能，利用Rexsee的“rexseeOrientation.start()”，然後把方向改變時觸發的事件寫上。
[html]
1. function onOrientationChanged(){ //方向傳感器事件,即當方向發生改變時觸發的動作
2. var x = rexseeOrientation.getLastKnownX();
3. x = 90 – x;
4. document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
5. }
其次則是處理應用展現中的圖片問題，隻需要找兩個好看的圖片，一個羅盤，一個指針就可以搞定。
[html]
1. <p id='Layer1'>
2. <p id="northDiv"><img src="img/north.png" width="300" height="300" /></p>
3. <p id="oriDiv"><img src="img/compass.png" width="260" height="260" /></p>
4. </p>
發佈後我們就可以得到一個最基本的指南針應用。
圖2. 指南針應用截圖
該應用完整源碼如下。（同樣是在index頁面進行編輯）
[html] <html>
<head>
<style type="text/css">
#Layer1 {
position:absolute;
top:20px;
z-index:1;
}
#northDiv {
position:absolute;
z-index:2;
}
#oriDiv {
position:absolute;
top:23px;
left:22px;
z-index:2;
}
</style>
<script >
rexseeOrientation.start();
rexseeDialog.toast('準備啟動');
function onOrientationChanged(){ //方向傳感器事件,即當方向發生改變時觸發的動作
var x = rexseeOrientation.getLastKnownX();
x = 90 – x;
document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
}
</script>
</head>
<body align='center'>
<p id='Layer1'>
<p id="northDiv"><img src="img/north.png" width="300" height="300" /></p>
<p id="oriDiv"><img src="img/compass.png" width="260" height="260" /></p>
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
#Layer1 {
position:absolute;
top:20px;
z-index:1;
}
#northDiv {
position:absolute;
z-index:2;
}
#oriDiv {
position:absolute;
top:23px;
left:22px;
z-index:2;
}
</style>
<script >
rexseeOrientation.start();
rexseeDialog.toast('準備啟動');
function onOrientationChanged(){ //方向傳感器事件,即當方向發生改變時觸發的動作
var x = rexseeOrientation.getLastKnownX();
x = 90 – x;
document.getElementById('oriDiv').style.webkitTransform = 'rotate('+x+"deg)";
}
</script>
</head>
<body align='center'>
<p id='Layer1'>
<p id="northDiv"><img src="img/north.png" width="300" height="300" /></p>
<p id="oriDiv"><img src="img/compass.png" width="260" height="260" /></p>
</p>
</body>
</html>
結語
移動互聯網大幕才剛剛拉開，原生應用與Web應用的並存也會在很長一段時間內持續，誰會最終占據主導其實並不重要。基於開放的平臺策略，穩定提升應用性能，爭取更多用戶並創造更佳用戶體驗，將是推進這浪潮創新發展的關鍵所在。Rexsee也將致力於此，不斷完善，打造更加廣泛的開發者基礎。
摘自 rexsee_dev的專欄
