龍芯桌面應用如此精緻！ NW.js方案利用Web技術編寫高體驗介面
http://www.loongson.cn/news/company/689.html
NW.js是使用Web語言開發桌面圖形應用程式的優秀程式設計環境，近期已經由龍芯開發者移植到龍芯電腦上。傳統桌面應用開發要求使用C/C++這樣的高階程式語言以及Qt等專門的圖形庫。有了NW.js，可以將現有Web開發技術運用到桌面程式設計，僅僅使用HTML、CSS和JavaScript就能開發桌面圖形應用，達到現代介面體驗水平。這種方案的最大優勢還在於，開發出來的應用程式是完全平臺無關的指令碼語言，所以能夠在龍芯和x86等所有CPU，以及Windows、Mac和Linux等所有作業系統中跨平臺執行，顯著減少了應用開發、維護和遷移的時間。本文介紹NW.js在龍芯平臺上的移植過程，為龍芯平臺上的桌面圖形應用程式提供參考，推進龍芯生態建設。
- NW.js背景
NW.js是一種跨平臺桌面應用軟體開發平臺，原來的專案名稱是node-webkit。這是一種支援使用所有Web技術編寫應用程式介面的新方法。簡單來說nw.js就是使用HTML、CSS、JavaScript語言編寫在桌面端執行的程式介面。
▲ NW.js專案主頁
NW.js主要具備如下特性：
1. 使用Web技術(HTML5, CSS3和WebGL)編寫本地應用程式
2. 完全支援瀏覽器中的所有功能
3. 完全支援Node.js API和所有第三方模組
4. 直接從DOM和Web Workers呼叫Node.js模組
5. JavaScript原始碼保護
6. 適用於Linux，Mac OS X和Windows
下圖說明“NW.js能做什麼”。
▲ NW.js應用程式的結構
下圖說明“怎麼用nw.js完成任務”的問題。
▲ NW.js應用程式的執行過程
NW.js主頁: https://nwjs.io
原始碼專案地址：https://github.com/nwjs/nw.js
- NW.js快速建立應用程式例項
下面建立一個最簡單的“Hello world”程式，展示在NW.js平臺中的執行效果。
使用任何文字編輯器，編寫兩個檔案，分別是index.html和package.json。
index.html檔案內容如下：
package.json檔案內容如下：
在package.json所在的當前目錄下，使用下面的命令執行應用程式：
| $ nw . |
執行介面如下圖所示：
▲ 第一個NW.js應用程式“Hello world”介面
可以看到，NW.js的原始碼不需要編譯，直接執行就出現了介面。
- NW.js的大型應用
NW.js由於具有多方面優點，現在已經很流行，開發出的應用已經涵蓋了許多領域：
- WhatsApp Messenger經典的聊天應用；
- Powder Player 種子下載，以及視訊播放器；
- Boson Editor 程式碼編輯器，甚至還有一款Markdown編輯器Story-writer；
- Leanote Desktop App 類似Evernote的筆記類應用程式；
- Mongo Management Studio 資料庫管理應用。
來欣賞一下介面截圖，可以看到使用NW.js開發出的應用介面，相比以前使用傳統的Qt圖形庫開發的應用介面更加美觀。
▲ 基於NW.js的Mongo Management Studio資料庫管理應用程式介面
- NW.js在龍芯上的移植過程
NW.js越來越普及，但是目前官方僅提供編譯好的x86二進位制，在龍芯上並不能直接執行。為了龍芯生態應用的發展，本文完成NW.js在龍芯上的移植適配工作。
移植過程參照了官方文件：https://github.com/nwjs/nw.js/wiki/Building-nw.js
本文移植的NW.js版本為：nwjs-0.33.3 、chromium-69.0.3497.100 、nodejs-v10.10.0。
移植的軟硬體環境是龍芯3A3000桌上型電腦，龍芯社群版作業系統Loongnix。
NW.js在龍芯上的適配主要分成如下幾個步驟：
1、獲取NW.js相關程式碼
主要是完成chromium.src、nw.js、node以及V8這四個部分程式碼的獲取。
需要使用gclient命令，來自於depot_tools，獲取方式如下：
| $ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git $ export PATH=$PATH:$HOME/depot_tools-dir |
這樣，在終端任何地方都可以呼叫使用gclient命令。
獲取chromium.src模組，先建立nwjs目錄，進入nwjs目錄後通過如下命令生成.gclient檔案。
| $ gclient config --name=src https://github.com/nwjs/[email protected]/nw33 |
接著執行如下命令進行chromium.src程式碼獲取：
| $ gclient sync --with_branch_heads |
NW.js、node以及v8這三個模組的獲取主要按照如下地址checkout到對應正確的分支，放入chromium.src正確的位置中：
▲ nw.js、node以及v8這三個模組的專案地址
2、配置編譯選項
龍芯上設定nwjs_sdk=false，主要進行Normal版編譯。具體GN_CONFIGS設定如下：
| $ export GN_CONFIGS={ is_debug = false is_clang = false is_component_ffmpeg = true use_sysroot = false use_gold = false proprietary_codecs = true enable_widevine = false fatal_linker_warnings = false link_pulseaudio = true treat_warnings_as_errors = false nwjs_sdk = false } |
由於在loongnix上編譯，需要設定mips_arch_variant="loongson3"，但是該引數針對nwjs編譯並不識別，目前只能在build/config/mips.gni中預設將mips_arch_variant改成loongson3進行編譯。
接下來通過GN生成ninja構建檔案：
| $ gn gen out/nw --args="${GN_CONFIG[*]}" |
- 編譯nwjs模組
| $ ninja-build -C out/nw nwjs |
- 編譯配置選項以及編譯node模組
編譯前需要進行如下配置：
| $ export GYP_DEFINES="target_arch="mips64el" debug=false clang=false sysroot=false host_arch="mips64el"" $ GYP_CHROMIUM_NO_ACTION=0 ./build/gyp_chromium -I third_party/node-nw/common.gypi -D building_nw=1 third_party/node-nw/node.gyp |
編譯：
| $ ninja-build -C out/Release node $ ninja -C out/nw copy_node |
5、完成NW.js整體移植適配，成功啟動NW.js
| $ cd out/nw $ ./nw |
在龍芯電腦上執行NW.js的預設介面如下圖：
▲ 在龍芯上執行NW.js應用程式
至此，NW.js在龍芯上可以成功啟動了！
- 編譯好的成品
為了方便龍芯開發者使用NW.js，作者已經在龍芯社群版作業系統Loongnix中製作了二進位制成品rpm包，後面會上傳到網路源中。開發者不再需要從頭執行編譯過程，只需要通過下面的命令直接安裝NW.js的軟體包（需要使用管理員許可權執行）：
| # yum install nwjs |
就樣就可以方便的進行NW.js應用開發。
- 總 結
NW.js適配過程中總體來說是比較順利的，主要的問題還是在於chromium以及node的編譯適配，而這些方面龍芯已有充足的經驗，所以這次的適配過程沒有遇到無法解決的問題，程式碼改動量很少，基本上實現了無障礙遷移。
通過本文的NW.js的適配過程表明，龍芯軟體生態環境已經非常完善，在打造龍芯平臺軟體豐富性的過程中，龍芯公司已經走出了一條堅實的道路，希望產業鏈能夠一起把龍芯的軟體生態完善起來！
