'桌面版應用程序的前世今生'
互聯網出現之前，C/S架構是軟件產品的主流，後面漸漸地被B/S架構所取代（因為不需要配置客戶端），但由於瀏覽器有刷新機制，服務器的負載等因素，C/S架構的響應速度和流暢性是好於B/S架構的，所以現在軟件開發的趨勢是兩者的融合，一般是B/S架構開發的產品可以非常方便地轉移到C/S架構下。客戶端（client）是C/S架構軟件產品中重要的一部分，除了和用戶交互、本地處理數據的強大功能，順暢的體驗和美觀的樣式也是客戶端技術追求的目標。微策略的智能商務平臺除了功能豐富的web終端，也推出了多位一體的強大桌面終端Workstation，旨在提供一站式的智能商務體驗。這裡和大家介紹桌面版應用程序的一些歷史和現在比較流行的electron技術。
互聯網出現之前，C/S架構是軟件產品的主流，後面漸漸地被B/S架構所取代（因為不需要配置客戶端），但由於瀏覽器有刷新機制，服務器的負載等因素，C/S架構的響應速度和流暢性是好於B/S架構的，所以現在軟件開發的趨勢是兩者的融合，一般是B/S架構開發的產品可以非常方便地轉移到C/S架構下。客戶端（client）是C/S架構軟件產品中重要的一部分，除了和用戶交互、本地處理數據的強大功能，順暢的體驗和美觀的樣式也是客戶端技術追求的目標。微策略的智能商務平臺除了功能豐富的web終端，也推出了多位一體的強大桌面終端Workstation，旨在提供一站式的智能商務體驗。這裡和大家介紹桌面版應用程序的一些歷史和現在比較流行的electron技術。
桌面版應用程序歷史
桌面應用程序，又稱為GUI程序。可以分為以下幾個階段：
- VB, 上古程序員的開發工具，曾經全球第一的開發語言，拖拽式的圖形化開發讓它成為極佳的桌面開發工具。微軟依靠其操作系統的優勢，一直壓制同時期的競爭對手delphi。微策略早期應用該技術，開發了管理智能商務平臺的大殺器developer。
- C++、win32API的MFC方案是基於窗口中組合控件和消息傳遞機制。這也是20多年前的技術，所以API設計的不是很友好。幾年前微軟已經停止維護，簡單來說它已經過時了。
- Winform 微策略幾年前基於該技術研發第一代的Desktop版本，但是從開發體驗角度來說自定義、美化控件會比較麻煩。
- C# .net framework, 代表就是WPF，它的原生特性是其他類庫無法比擬的：High DPI、Split Screen以及對DirectX的天然優勢。但是並不開源，需要依賴.net框架，還有就是啟動會比較慢。Workstation Windows的新客戶端就是基於該技術研發。
- Java swing/javaFx 這是一類比較大的陣營，優勢是跨平臺和流行開發語言java的天然結合, 但開發出來的界面作者個人認為並不美觀。
- C++ Qt，這是很多客戶端跨平臺的首選，因為開源、UI庫和各種功能的類庫非常豐富，但是學習成本比較高。
- C++ duilib, 這是windows下開源的directUI（微軟提出的分離UI和邏輯的思想）庫，它是迎合互聯網桌面軟件小而美的趨勢發展起來的，可能大家對它的關注度比較少。但是用它開發出的產品大名鼎鼎，比如QQ, 微信, 愛奇藝等很多知名度高的軟件。
- Objective-c/swift cocoa, 這是mac平臺下的方案。可以方便調用底層的API，缺點是不跨平臺，文檔不友好，UI庫並不豐富。現在這種方式開發的越來越少了。
基於web技術的桌面應用開發
從B/S和C/S架構逐漸融合的角度來說，基於web技術進行桌面程序的開發漸漸變成了主流。因為對界面的代碼部分可以做到複用。
這類技術早期的方案是用vb內嵌webBrowser控件，基於IE內核，正好很多網頁開發也有用activeX的需求，但這種方式具有明顯的缺陷——非常依賴於用戶的環境，會因為組件缺失導致程序各種崩潰。第二類是嵌入式網頁框架，這類技術主要是基於瀏覽器引擎實現UI渲染。比較典型的就是appkit上面UIWebView和CEF（chromium embeded framework)。這種方法可以使用網頁HTML5+CSS實現各種酷炫的效果，但是缺點也比較明顯，就是桌面程序裡面嵌入了一個類似chrome的瀏覽器，內存的開銷會比較大。
後面出現了nwjs和electron，electron相比CEF有了單獨執行js的v8引擎，可以運行nodeJS來完成服務器端功能，通過和內部瀏覽器的v8引擎交互可以實現一個獨立的客戶端，這不同於CEF需要寄宿在其他程序內部。
Electron
互聯網出現之前，C/S架構是軟件產品的主流，後面漸漸地被B/S架構所取代（因為不需要配置客戶端），但由於瀏覽器有刷新機制，服務器的負載等因素，C/S架構的響應速度和流暢性是好於B/S架構的，所以現在軟件開發的趨勢是兩者的融合，一般是B/S架構開發的產品可以非常方便地轉移到C/S架構下。客戶端（client）是C/S架構軟件產品中重要的一部分，除了和用戶交互、本地處理數據的強大功能，順暢的體驗和美觀的樣式也是客戶端技術追求的目標。微策略的智能商務平臺除了功能豐富的web終端，也推出了多位一體的強大桌面終端Workstation，旨在提供一站式的智能商務體驗。這裡和大家介紹桌面版應用程序的一些歷史和現在比較流行的electron技術。
桌面版應用程序歷史
桌面應用程序，又稱為GUI程序。可以分為以下幾個階段：
- VB, 上古程序員的開發工具，曾經全球第一的開發語言，拖拽式的圖形化開發讓它成為極佳的桌面開發工具。微軟依靠其操作系統的優勢，一直壓制同時期的競爭對手delphi。微策略早期應用該技術，開發了管理智能商務平臺的大殺器developer。
- C++、win32API的MFC方案是基於窗口中組合控件和消息傳遞機制。這也是20多年前的技術，所以API設計的不是很友好。幾年前微軟已經停止維護，簡單來說它已經過時了。
- Winform 微策略幾年前基於該技術研發第一代的Desktop版本，但是從開發體驗角度來說自定義、美化控件會比較麻煩。
- C# .net framework, 代表就是WPF，它的原生特性是其他類庫無法比擬的：High DPI、Split Screen以及對DirectX的天然優勢。但是並不開源，需要依賴.net框架，還有就是啟動會比較慢。Workstation Windows的新客戶端就是基於該技術研發。
- Java swing/javaFx 這是一類比較大的陣營，優勢是跨平臺和流行開發語言java的天然結合, 但開發出來的界面作者個人認為並不美觀。
- C++ Qt，這是很多客戶端跨平臺的首選，因為開源、UI庫和各種功能的類庫非常豐富，但是學習成本比較高。
- C++ duilib, 這是windows下開源的directUI（微軟提出的分離UI和邏輯的思想）庫，它是迎合互聯網桌面軟件小而美的趨勢發展起來的，可能大家對它的關注度比較少。但是用它開發出的產品大名鼎鼎，比如QQ, 微信, 愛奇藝等很多知名度高的軟件。
- Objective-c/swift cocoa, 這是mac平臺下的方案。可以方便調用底層的API，缺點是不跨平臺，文檔不友好，UI庫並不豐富。現在這種方式開發的越來越少了。
基於web技術的桌面應用開發
從B/S和C/S架構逐漸融合的角度來說，基於web技術進行桌面程序的開發漸漸變成了主流。因為對界面的代碼部分可以做到複用。
這類技術早期的方案是用vb內嵌webBrowser控件，基於IE內核，正好很多網頁開發也有用activeX的需求，但這種方式具有明顯的缺陷——非常依賴於用戶的環境，會因為組件缺失導致程序各種崩潰。第二類是嵌入式網頁框架，這類技術主要是基於瀏覽器引擎實現UI渲染。比較典型的就是appkit上面UIWebView和CEF（chromium embeded framework)。這種方法可以使用網頁HTML5+CSS實現各種酷炫的效果，但是缺點也比較明顯，就是桌面程序裡面嵌入了一個類似chrome的瀏覽器，內存的開銷會比較大。
後面出現了nwjs和electron，electron相比CEF有了單獨執行js的v8引擎，可以運行nodeJS來完成服務器端功能，通過和內部瀏覽器的v8引擎交互可以實現一個獨立的客戶端，這不同於CEF需要寄宿在其他程序內部。
Electron
用Electron來做桌面程序開發的優勢明顯，相當於是完全的網頁編程，有web開發經驗的前端開發上手非常容易。Web開發生態廣泛，開發成本低，可擴展性強，一些流行的前端框架例如React, Angular, Vue都可以和electron結合進行開發。另外它也具備和Qt一樣跨平臺的優良特性。對性能要求不高的桌面版程序來說，一份代碼同時得到網頁版和各個平臺的桌面版，開發的效率是其他方案無法比的。可以說這是大部分人看好的趨勢。
和web開發的區別
前端開發的一個痛點就是經常需要考慮多種瀏覽器之間的兼容，但是使用electron開發則不存在這樣的問題，它只需要考慮electron中對應chrome的版本。另一個使用electron解決的痛點是跨域，它可以繞過客戶端直接通過nodeJS裡的request通信模塊發出請求，這樣就無需被跨域所困擾。
擴展能力
node-ffi可以在nodeJS環境中調用動態鏈接庫接口。通過這種方式，我們可以把javascript方法映射到動態鏈接庫接口，從而實現c++類庫的接入。
Electron運行原理
互聯網出現之前，C/S架構是軟件產品的主流，後面漸漸地被B/S架構所取代（因為不需要配置客戶端），但由於瀏覽器有刷新機制，服務器的負載等因素，C/S架構的響應速度和流暢性是好於B/S架構的，所以現在軟件開發的趨勢是兩者的融合，一般是B/S架構開發的產品可以非常方便地轉移到C/S架構下。客戶端（client）是C/S架構軟件產品中重要的一部分，除了和用戶交互、本地處理數據的強大功能，順暢的體驗和美觀的樣式也是客戶端技術追求的目標。微策略的智能商務平臺除了功能豐富的web終端，也推出了多位一體的強大桌面終端Workstation，旨在提供一站式的智能商務體驗。這裡和大家介紹桌面版應用程序的一些歷史和現在比較流行的electron技術。
桌面版應用程序歷史
桌面應用程序，又稱為GUI程序。可以分為以下幾個階段：
- VB, 上古程序員的開發工具，曾經全球第一的開發語言，拖拽式的圖形化開發讓它成為極佳的桌面開發工具。微軟依靠其操作系統的優勢，一直壓制同時期的競爭對手delphi。微策略早期應用該技術，開發了管理智能商務平臺的大殺器developer。
- C++、win32API的MFC方案是基於窗口中組合控件和消息傳遞機制。這也是20多年前的技術，所以API設計的不是很友好。幾年前微軟已經停止維護，簡單來說它已經過時了。
- Winform 微策略幾年前基於該技術研發第一代的Desktop版本，但是從開發體驗角度來說自定義、美化控件會比較麻煩。
- C# .net framework, 代表就是WPF，它的原生特性是其他類庫無法比擬的：High DPI、Split Screen以及對DirectX的天然優勢。但是並不開源，需要依賴.net框架，還有就是啟動會比較慢。Workstation Windows的新客戶端就是基於該技術研發。
- Java swing/javaFx 這是一類比較大的陣營，優勢是跨平臺和流行開發語言java的天然結合, 但開發出來的界面作者個人認為並不美觀。
- C++ Qt，這是很多客戶端跨平臺的首選，因為開源、UI庫和各種功能的類庫非常豐富，但是學習成本比較高。
- C++ duilib, 這是windows下開源的directUI（微軟提出的分離UI和邏輯的思想）庫，它是迎合互聯網桌面軟件小而美的趨勢發展起來的，可能大家對它的關注度比較少。但是用它開發出的產品大名鼎鼎，比如QQ, 微信, 愛奇藝等很多知名度高的軟件。
- Objective-c/swift cocoa, 這是mac平臺下的方案。可以方便調用底層的API，缺點是不跨平臺，文檔不友好，UI庫並不豐富。現在這種方式開發的越來越少了。
基於web技術的桌面應用開發
從B/S和C/S架構逐漸融合的角度來說，基於web技術進行桌面程序的開發漸漸變成了主流。因為對界面的代碼部分可以做到複用。
這類技術早期的方案是用vb內嵌webBrowser控件，基於IE內核，正好很多網頁開發也有用activeX的需求，但這種方式具有明顯的缺陷——非常依賴於用戶的環境，會因為組件缺失導致程序各種崩潰。第二類是嵌入式網頁框架，這類技術主要是基於瀏覽器引擎實現UI渲染。比較典型的就是appkit上面UIWebView和CEF（chromium embeded framework)。這種方法可以使用網頁HTML5+CSS實現各種酷炫的效果，但是缺點也比較明顯，就是桌面程序裡面嵌入了一個類似chrome的瀏覽器，內存的開銷會比較大。
後面出現了nwjs和electron，electron相比CEF有了單獨執行js的v8引擎，可以運行nodeJS來完成服務器端功能，通過和內部瀏覽器的v8引擎交互可以實現一個獨立的客戶端，這不同於CEF需要寄宿在其他程序內部。
Electron
用Electron來做桌面程序開發的優勢明顯，相當於是完全的網頁編程，有web開發經驗的前端開發上手非常容易。Web開發生態廣泛，開發成本低，可擴展性強，一些流行的前端框架例如React, Angular, Vue都可以和electron結合進行開發。另外它也具備和Qt一樣跨平臺的優良特性。對性能要求不高的桌面版程序來說，一份代碼同時得到網頁版和各個平臺的桌面版，開發的效率是其他方案無法比的。可以說這是大部分人看好的趨勢。
和web開發的區別
前端開發的一個痛點就是經常需要考慮多種瀏覽器之間的兼容，但是使用electron開發則不存在這樣的問題，它只需要考慮electron中對應chrome的版本。另一個使用electron解決的痛點是跨域，它可以繞過客戶端直接通過nodeJS裡的request通信模塊發出請求，這樣就無需被跨域所困擾。
擴展能力
node-ffi可以在nodeJS環境中調用動態鏈接庫接口。通過這種方式，我們可以把javascript方法映射到動態鏈接庫接口，從而實現c++類庫的接入。
Electron運行原理
Electron的運行機制可以從兩種進程說起：主進程和渲染進程。運行package.json的稱為主進程，它可以負責創建渲染進程（多個）。下圖是一段主進程代碼，主進程負責創建一個瀏覽器實例來加載網頁。每個創建的瀏覽器實例都在它自己的渲染進程內返回一個web頁面。當BrowserWindow實例銷燬時，相應的渲染進程也會終止。主進程負責掌管所有的web頁面和它們相應的渲染進程。每個渲染進程都是相互獨立的，它們只關心自己所運行的web頁面。
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var window = null;
app.on('ready', function() {
window = new BrowserWindow({width: 800, height: 600});
window.loadURL('https://microstrategy.com');
});
主進程還負責應用程序的生命週期（app打開退出）和一些app事件的監聽，同時負責系統底層API的調用。創建的渲染進程用來展示HTML + CSS技術編寫的web頁面， 同時可以運行javascript實現交互，可以把渲染進程簡單理解為chrome上打開的一個瀏覽器進程。
<html>
<body>
<script>
const remote = require('electron').remote;
console.log(remote.app.getVersion());
</script>
</body>
</html>
在渲染進程中是不允許調用原生GUI相關的API，那是因為在網頁中掌管原生GUI很危險，易造成內存洩露。如果你想在網頁中進行GUI的操作，渲染進程必須向主進程傳達請求，然後在主進程中完成操作。
Electron封裝了一系列自己的API可供主進程和渲染進程調用。可以通過如下方式獲取：
const {app, BrowserWindow, ipcMain, ... } = require('electron'); // 僅主進程可用
const {ipcRender, remote, ... } = require('electron'); // 僅渲染進程可用
主進程和渲染進程均可直接調用nodeJS的API
node1.addEventListener('click', () => {
console.log(os.path.basename('xxxx');
})
進程通信
渲染進程如何向主進程發送消息
通信本質上基於nodeJS的事件基礎類EventEmitter，ipcMain和ipcRender都是該類的實例，通過事件模型需要的接口方法，採用了發佈/訂閱的方式來發送和監聽消息。
異步方式
import { ipcRender } from 'electron'; //在渲染進程引入ipcRender，它是EventEmitter的一個實例
ipcRender.send('async', 'I am from webview'); //可以異步發送
同步方式
import { ipcRender } from 'electron'; //在渲染進程引入ipcRender
ipcRender.sendSync('sync', 'I am sync sent from webview'); //同步方式
通過同步方式發送會block整個渲染進程，直到主進程響應。
主進程會加載ipcMain來進行監聽
import { ipcMain } from 'electron'; //在主進程引入ipcMain
ipcMain.on('async', (event, info) {
console.log(info);
});
除此以外， electron還提供了一種簡單的方案（remote模塊）來實現渲染進程和主進程的通信。這樣就可以不必顯示地發送消息。
import { remote } from 'electron'; //在渲染進程引入remote
remote.mainProcessObject.invokeMethod(); // 調用主進程才有的方法
});
主進程如何向渲染進程發送消息
主進程通過找到渲染進程對應的browserWindow就可以發送消息。
constant window = BrowserWindow.fromId(global.id); // 通過id來進行對應
window.webContents.send('msg', 'hello world');
渲染進程監聽
ipcRender.on('msg', (event, info) => {
console.log(info)
});
渲染進程之間共享數據
一種可行的方案是在主進程實現消息的轉發。還有比較簡單的方案是通過瀏覽器實現的HTML API，比如localStorage， sessionStorage或者IndexedDB。或者通過主進程創建全局變量sharedObject來實現渲染進程的數據共享。
以上是一些electron技術初步的介紹，有興趣的讀者可以繼續閱讀詳細的官方文檔來深入學習。目前來看electron不能算一個年輕的開源項目， 還有不少新的桌面替代技術在湧現（比如miniblink)。如何將像electron這樣的優秀技術思想和微策略的桌面程序相結合將一直值得我們探索。
我們會每週推送商業智能、數據分析資訊、技術乾貨和程序員日常生活，歡迎關注我們的頭條&知乎公眾號“微策略中國”或微信公眾號“微策略 商業智能"。