快速瞭解Electron：新一代基於Web的跨平臺桌面技術

時間  2019-11-12
標籤 快速 瞭解 electron 新一代 基於 web 跨平臺 桌面 技術 欄目 HTML 简体版
原文   原文鏈接

本文引用了做者「 ConardLi」的《用JS開發跨平臺桌面應用，從原理到實踐》一文部份內容，原文連接：segmentfault.com/a/1190000019426512，感謝原做者的無私分享。php

一、引言

如今開發IM應用動不動就要求多端——即Android端、iOS端、PC端、Web端等，Android端和iOS端做爲兩種不一樣的移動端技術，單獨開發和維護還能理解，PC端和Web端若是要單獨開發那就有點頭大了，必竟開發傳統的PC桌面應用成本過高（QT這類技術跟Web技術相比，上手難度大的多，並且過小衆）。因此，很大狀況下你們都是PC富客戶端和Web端二選一，對於比較磨嘰的老闆、產品經理或客戶來講，這是個很費口舌的事情（你懂的。。。）。html

在即時通信網的官方技術羣裏不僅一次看到你們在討論Electron技術，做爲新一代基於Web的桌面技術，已經被愈來愈的產品採用，成熟度和承認度都不錯，Electron技術能夠下降開發PC端的成本和難度，或許PC富客戶端和Web端不再須要二選一了。前端

本文將從入門者的角度，爲你快速講解Electron究竟是個什麼技術，包括案例介紹、技術優點、技術體驗、實現原理等。node

 

（本文同步發佈於：http://www.52im.net/thread-2616-1-1.html）webpack

二、傳統桌面應用程序

 

桌面應用程序，又稱爲 GUI 程序（Graphical User Interface），可是和 GUI 程序也有一些區別。桌面應用程序 將 GUI 程序從GUI 具體爲「桌面」，使冷冰冰的像塊木頭同樣的電腦概念更具備 人性化，更生動和富有活力。git

咱們電腦上使用的各類客戶端程序都屬於桌面應用程序，近年來WEB和移動端的興起讓桌面程序漸漸暗淡，可是在某些平常功能或者行業應用中桌面應用程序仍然是必不可少的。github

傳統的桌面應用開發方式，通常是下面兩種。web

1）原生開發：數據庫

直接將語言編譯成可執行文件，直接調用系統API，完成UI繪製等。這類開發技術，有着較高的運行效率，但通常來講，開發速度較慢，技術要求較高，例如：npm

a. 使用C++ / MFC開發Windows應用；

b. 使用Objective-C開發MAC應用。

2）託管平臺：

一開始就有本地開發和UI開發。一次編譯後，獲得中間文件，經過平臺或虛機完成二次加載編譯或解釋運行。運行效率低於原生編譯，但平臺優化後，其效率也是比較可觀的。就開發速度方面，比原生編譯技術要快一些。例如：

a. 使用C# / .NET Framework(只能開發Windows應用)；

b. Java / Swing。

不過，上面兩種對前端開發人員太不友好了，基本是前端人員不會涉及的領域，可是在這個"大前端"的時代，前端開發者正在千方百計涉足各個領域，使用WEB技術開發客戶端的方式橫空出世——這就是本文正在介紹的「Electron」技術。

三、什麼是Electron技術？

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron經過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。經過Node它提供了一般瀏覽器所不能提供的能力。 

Electron於2013年做爲構建Github上可編程的文本編輯器Atom的框架而被開發出來（PS：聽說這個Atom看起來很漂亮，但很難用...）。這兩個項目在2014春季開源。

其實，Electron在早期一直是由原做者 Cheng Zhao 一我的維護和開發的（他如今是 Github 北京 Atom 編輯器開發 team 的一名工程師）。在這以前，Zhao主要進行node-webkit（如今叫nw.js）的開發工做。從概念上，Electron與nw.js很類似，可是他們有很重要的區別：一個主要的不一樣點是Electron 經過 Googles Chromium Content Module 來使用 Chromium 的功能，nw.js 則直接使用了 Chromium自己。

PS：Electron的做者 Cheng Zhao 應該是個中國人，但網上能查到的信息很是少，連中文名都沒有（大佬就是低調...），這個框架做者還爲一本中文譯名叫《跨平臺桌面應用開發：基於Electron與NW.js》的書寫了序（見下圖）。

 

Electron 發展歷程中的里程碑：

 

目前它已成爲開源開發者、初創企業和老牌公司經常使用的開發工具（看看誰在使用Electron）。

Electron資源：

1）Electron官網：https://electronjs.org；

2）Electron Github：https://github.com/electron；

3）Electron開發手冊：https://electronjs.org/docs。

四、Electron爲什麼如此迷人？

可能主要是由於，猿類裏的亞種——「前端開發」，又有了新的出路了吧，已經在崗的前端也有了新一年的 KPI/OKR，剛起步的創業公司能夠只拉一個前端就能開發跨平臺的多個桌面客戶端... ...（開個玩笑）。

1）能夠用 Web 前端技術開發跨平臺的桌面客戶端：

這是 Electron 最迷人的地方，究其根本是由於它是創建在 Chromium 和 NodeJS 之上的，一個負責界面，一個負責背後的邏輯，典型的"你負責貌美如花，我負責賺錢養家"，爲何 Electron 可以開發跨平臺的桌面應用也就能夠理解了。

而對於前端開發來講，「不要和老夫說什麼 C++，Java，老夫行走江湖就一把 JS，遇到需求就是幹」。前端開發能夠用本身熟悉的方式去寫應用界面，邏輯部分也仍是 JS，若是你精通 Node 後端，那後端也能夠插一腳，「鳥槍換大炮」，你開發客戶端的能力有一種「忽如一晚上春風來」的感受。

可是，不一樣系統間仍是會有很大的不一樣，「同一套代碼，編譯出跨平臺的多個客戶端」，話是這麼說，但你得由於系統的不一樣作一些額外的處理，以使得打包出的不一樣系統下的應用均可以正常工做，這多是一些「if - else」的成本，但相比於那80%都能徹底複用的代碼，這些成本已經很小了。

綜上所述：一個 Web 前端開發者能夠花不多的成本去上手 Electron，而相比於之前開發多平臺客戶端的成本，利用 Electron 開發多平臺客戶端的成本是極低的。

2）能夠從 NodeJS 的生態得到極大的助力：

由於 Electron 是基於 NodeJS 的，意味着，NodeJS 這個大生態下的模塊，Electron 也均可以用，這減小了不少造輪子的時間，你要寫一些邏輯將首先思考有沒有成熟的模塊能夠引入，而不是本身吭哧吭哧閉門造車，本身造時間精力會大量得被消耗，上路還可能翻車。

Electron 從 NodeJS 獲益有2個方面，一個方面是如現代的 web 項目通常，開發構建流程能夠引入不少成熟的包去打造出適合本身項目的開發工做流，另外一個方面就是其應用自己也能夠依賴須要的包去完成本身的功能。

3）「這個東西作Web版就能夠，幹嘛還要開發PC客戶端版？」

既然 Electron 是用 Web 技術寫客戶端，那麼看上去 Electron 要作的事，能夠搬到網站上。

爲何還要搬到PC客戶端，這裏有3個角度的回答：

a. 用戶角度： 客戶端是一款獨立的軟件，其綜合體驗通常都是比網站高的，尤爲是涉及到「工具」範疇的應用，此外，特定的用戶羣體也會有相似的使用習慣；

b. 發行方角度： 客戶端是另外一種產品形式，是一種產品的分發方式和入口，客戶端能夠實現不少本地應用獨有的需求去觸達用戶，也能提供更加可靠的服務；

c. 開發角度： 終於...不用考慮瀏覽器兼容了，Chromium 也足夠開發使用一些先進的 CSS 或 JS 特性，咱們如今還沒計劃引入 webpack 和 babel，由於如今好像夠用，剋制纔是愛，除了寫起來爽，對於開發來講，終於跳出了瀏覽器的沙盒，你能夠本身去控制 Electron 中的「瀏覽器」，莫名的開心。

這些綜合起來回答這個小節的問題就是，用 Electron 開發客戶端，用戶體驗好，開發麻煩小，功能更強大，老闆脫髮少。

4）那在 Electron 和 NW.js 之間，爲啥選擇前者？

我沒怎麼用過 NW.js，但當時在沒有時間深刻體驗的實際狀況下，我選擇生態好的。

Electron 相關的社區生態很好，以後的開發過程也證實了這一點，遇到的問題基本都能經過 Stackoverflow 找到，若是沒有找到，新開一個問題或者去 Github 提 Issue 均可以獲得較快的解決，除非是一些已知的問題或一些看文檔能夠解決的問題，這類問題可能會被忽略過去。

因此，生態更好一些，我選擇了 Electron。

5）總結一下，使用Electron開發的理由：

a. 使用具備強大生態的Web技術進行開發，開發成本低，可擴展性強，更炫酷的UI；

b. 跨平臺，一套代碼可打包爲Windows、Linux、Mac三套軟件，且編譯快速；

c. 可直接在現有Web應用上進行擴展，提供瀏覽器不具有的能力；

d. 你是一個前端👨‍💻～

固然，咱們也要認清它的缺點：性能比原生桌面應用要低，最終打包後的應用比原生應用大不少。

五、Electron的開發體驗

兼容性：雖然你還在用WEB技術進行開發，可是你不用再考慮兼容性問題了，你只須要關心你當前使用Electron的版本對應Chrome的版本，通常狀況下它已經足夠新來讓你使用最新的API和語法了，你還能夠手動升級Chrome版本。一樣的，你也不用考慮不一樣瀏覽器帶的樣式和代碼兼容問題。

NodeJS環境：這多是不少前端開發者曾經夢想過的功能，在WEB界面中使用Node.js提供的強大API，這意味着你在WEB頁面直接能夠操做文件，調用系統API，甚至操做數據庫。固然，除了完整的 Node API，你還可使用額外的幾十萬個npm模塊。

跨域：你能夠直接使用Node提供的request模塊進行網絡請求，這意味着你無需再被跨域所困擾。

強大的擴展性：藉助node-ffi，爲應用程序提供強大的擴展性（更詳細的介紹能夠自行百度相關資料瞭解一下）。

六、那麼，都有誰在用 Electron？

 

如今市面上已經有很是多的應用在使用Electron進行開發了，包括咱們熟悉的VS Code客戶端、GitHub客戶端、Atom客戶端等等。

印象很深的，去年迅雷在發佈迅雷X10.1時的文案：

從迅雷X 10.1版本開始，咱們採用Electron軟件框架徹底重寫了迅雷主界面。使用新框架的迅雷X能夠完美支持2K、4K等高清顯示屏，界面中的文字渲染也更加清晰銳利。從技術層面來講，新框架的界面繪製、事件處理等方面比老框架更加靈活高效，所以界面的流暢度也顯著優於老框架的迅雷。至於具體提高有多大？您一試便知。

你能夠打開VS Code，點擊「幫助」-「切換開發人員工具」，來調試VS Code客戶端的界面：

 

Electron的官網還列舉了更多案例：看看誰在使用Electron。

七、Electron的運行原理

 

如上圖所示，Electron 結合了 Chromium、Node.js 和用於調用操做系統本地功能的API。

1）Chromium：

Chromium 是 Google 爲發展 Chrome 瀏覽器而啓動的開源項目，Chromium 至關於 Chrome 的工程版或稱實驗版，新功能會率先在 Chromium 上實現，待驗證後纔會應用在Chrome 上，故 Chrome 的功能會相對落後但較穩定。

Chromium爲Electron提供強大的UI能力，能夠在不考慮兼容性的狀況下開發界面。

2）Node.js：

Node.js是一個讓 JavaScript 運行在服務端的開發平臺，Node 使用事件驅動，非阻塞I/O 模型而得以輕量和高效。

單單靠Chromium是不能具有直接操做原生GUI能力的，Electron內集成了Nodejs，這讓其在開發界面的同時也有了操做系統底層 API 的能力，Nodejs 中經常使用的 Path、fs、Crypto 等模塊在 Electron 能夠直接使用。

3）系統API：

爲了提供原生系統的GUI支持，Electron內置了原生應用程序接口，對調用一些系統功能，如調用系統通知、打開系統文件夾提供支持。

在開發模式上，Electron在調用系統API和繪製界面上是分離開發的，下面咱們來看看Electron關於進程如何劃分。

八、Electron項目和Web項目的區別

Electron核心能夠分紅2個部分：主進程和渲染進程。

主進程鏈接着操做系統和渲染進程，能夠把她看作頁面和計算機溝通的橋樑。渲染進程就是咱們所熟悉前端環境了，只是載體改變了，從瀏覽器變成了window。

傳統的Web環境咱們是不能對用戶的系統就行操做的，而Electron至關於NodeJS環境，咱們能夠在項目裏使用全部的node api（Electron的做者至關機智...）。

簡單理解：給Web項目套上一個NodeJS環境的殼，就是Electron技術。

項目結構：相比web項目，桌面項目多了一個進程，以下圖所示。

 

項目遷移：若是要遷移項目到Web端，就須要把項目中的Electron提供的API和NodeJS的API徹底剝離出來，只能遺留Web的代碼，好比 node fs模塊，Electron提供ipc 模塊，都須要剝離。若是你一開始就打算雙端程序，在開始寫代碼時應該對Web代碼和Elecctron的代碼進行分離，以便後期的遷移。

九、本文小結

Electron是一個年輕的開源項目，被原做者一我的維護了很長時間，這反而成了很好的開始。瀏覽器是個比較複雜的東西，不多能引發人的興趣，可是Electron已經有了不少個開發者，還有很好的跨平臺支持，有了個不錯的開始。

最後說一些能夠幫助你更好學習electron的基礎知識：

1）Webpack： 最強構建工具，沒有之一，瞭解webpack，你才能更好編寫項目配置;

2）NodeJS： Electron是搭載谷歌v8內核的高性能的NodeJS環境 ，全部NodeJS能用的東西，咱們都能用。是否是很酸爽？

附錄：有關Web即時通信技術的文章

Web即時通信新手入門貼：
《新手入門貼：詳解Web端即時通信技術的原理》

Web端即時通信技術盤點請參見：
《Web端即時通信技術盤點：短輪詢、Comet、Websocket、SSE》

關於Ajax短輪詢：
找這方面的資料沒什麼意義，除非忽悠客戶，不然請考慮其它3種方案便可。

有關Comet技術的詳細介紹請參見：


更多WebSocket的詳細介紹請參見：


有關SSE的詳細介紹文章請參見：
《SSE技術詳解：一種全新的HTML5服務器推送事件技術》

更多WEB即時通信文章請見：
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

（本文同步發佈於：http://www.52im.net/thread-2616-1-1.html）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程