天天看點

heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式

為此,我們做了大量的調研,經反複嘗試,最終确定通過整合Chromium和Node.JS,來解決桌面應用開發中遇到的大量繁瑣的UI和互動開發工作。期間,發現一款類似的開源項目node-webkit,調研的結論是它暫時還無法用于正式的項目,是以,于2012年6月,我們正式成立一人開發小組(确實夠小),經3個月的努力,終有小成,現已經應用于有道詞典最新版。

簡要介紹下選擇Chromium和Node.JS的原因,同時,也在這裡對他們表示感謝。

選擇Chromium,是因為它對HTML5的支援非常優秀,其内嵌的V8引擎,更是業内效率最好的JavaScript腳本引擎之一,且其項目開源,又有專門的社群和團隊維護,作為UI渲染引擎,它是不二之選,體驗上,你可以試用下google chrome浏覽器,基本一緻。

選擇Node.JS,是因為開發桌面應用,本地資源操作是必備的能力,這方面JavaScript無能為力,而Node.JS則很好的解決了這個問題,它使得JavaScript操作本地資源變的毫無障礙。另一方面,Node.JS核心也是采用V8引擎,使得其與Chromium的整合變得更順理成章。

HTML5這幾年很火,在成熟産品中的應用卻極少,受各浏覽器和平台的軟/硬體性能問題的限制,整體感覺總是難以舒展(用的不踏實),具體原因網上可以找到一大堆,這裡列舉一個移動web app相關的,中英對照版,推薦抽空看一看:

用HTML5開發桌面應用,到底有什麼樣的優勢呢?這裡列舉幾項:

精準還原UI設計。現在用戶端軟體UI設計用native方式來實作的成本越來越高,對HTML5來說卻很容易,對後續的維護也非常的友好;

開發調試便利。heX保留了開發者工具(Chrome Developer Tools),讓你在開發調試過程中,就如同web開發一樣便利;

學習成本。相比傳統桌面應用開發,web技術的入門成本明顯偏低,你不用擔心團隊成員的離開,而苦于尋找後續開發力量。

在桌面應用開發中用Node.JS的好處(一部分來自于heX的努力):

直接用JavaScript對本地資源進行操作,相比C/C++,你無需編譯,即寫即用;

頁面互動邏輯,窗體行為操作,與C++通信,用JavaScript都能搞定,開發一個桌面應用,你無需在語言之間來回切換;

Node.JS豐富的第三擴充,你都可以直接使用,無需從零開始;

從技術角度來講,選擇一個新生事物,我們持謹慎态度,需要經過充分的調研,考慮的因素衆多,比如:性能,使用者體驗,開發效率,是否有團隊在維護,文檔是否完備,是否開源(如果是商業用處,還需考慮它的開源協定)等等。

而heX作為桌面應用開發的一種新的選擇,它在這些方面的表現如何呢?前面已經講到一些,這裡再補充幾點:

性能和體驗,heX的基礎由Chromium和Node.JS整合而成,整合後這兩者的性能表現不受影響,體驗方面,你可以參考google chrome浏覽器,基本保持一緻;

開發效率,如果你有過web前端開發經曆,現在僅要求你支援最新版的chrome浏覽器,你覺得如何?睡着了都能笑醒的事,heX做到了;

一種東西,隻能解決一方面的需求,heX亦非萬能,亦有它适合的使用場景,最适合重UI、重互動的桌面應用,比如即将推出的新版有道詞典(億級桌面應用軟體)beta版,就是采用heX作為其界面的解決方案。

采用heX開發桌面應用程式,有兩種方式:

直接基于heX做開發,針對web前端開發者,不要求桌面應用開發經驗;

以子產品形式引入到現在桌面工程中,針對傳統桌面應用開發者,适合有一定曆史的項目,或僅在界面中局部區域支援即可的項目。

不管采用哪種方式,開發過程都很簡單,這裡就第一種方式,從零開始,一起來制作一個 hello word,如下:

heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式

2、建立一個用于寫hello word程式的測試目錄“test”,同時在其中建立html、js檔案,如下圖所示

heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式
heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式

3、修改manifest.json檔案,入口改為test/index.html,如下圖所示

heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式

4、輕按兩下 hexclient.exe,運作,一秒後界面由“……”變為“Hello Word!”,如下圖所示,到此為止,一個簡單的桌面應用就搞定了

heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式
heX:用HTML5和Node.JS開發桌面應用一、項目背景二、用heX開發桌面應用的優勢三、如何用heX開始一個桌面應用程式

繼續閱讀