你離真正的全棧開發人員只差學會 Electron

收藏待读

你離真正的全棧開發人員只差學會 Electron

為什麼用 JavaScript 來開發桌面應用

曾經的 JavaScript 脆弱、簡陋、甚至有被邊緣化的危險,不過 JavaScript 在經過了兩次飛躍後(以 V8 為首的 JavaScript 引擎和 Node.js 的問世),不再受人欺負,早已升級為綠博士(復仇者聯盟 4 中班納博士和綠巨人的合體,強大而充滿智慧)。 V8 引擎讓 JavaScript 的運行速度飛快,Node.js 讓 JavaScript 不僅僅能做 Web 前端頁面,還能開發後端應用。

儘管有了 Node.js,JavaScript 可以開發服務端應用,但有一類重要的應用它還是無法勝任——桌面應用。目前 Web 應用和移動應用看似成為主流,但如果沒有桌面應用,Web 應用和移動應用甚至都不會存在。所有的 Web 瀏覽器(IE、Chrome、Firefox、Safari 等)都是桌面應用,如果沒有桌面應用,Web 頁面根本沒地方運行;用於開發移動應用的開發工具(IDE)也是桌面應用。而且 Windows 的開始菜單和 Mac OS X 的 Docker 中的每一個圖標都對應一個桌面應用,可以說,桌面應用無處不在。

如果將 Web 應用和移動應用比作國王,那麼桌面應用就是國王頭上的那頂王冠,沒有了王冠,國王什麼都不是,而賜予 JavaScript 製作王冠之神力的正是 Electron。這是一個基於 V8 引擎和 Node.js 的開發框架,允許用 JavaScript 開發跨平台(Windows、Mac OS X 和 Linux)桌面應用。

你離真正的全棧開發人員只差學會 Electron

有哪些著名應用是使用 Electron 開發的

目前有相當多的桌面應用是使用 Electron 開發的,例如,著名的 Visual Studio Code(微軟推出的一個跨平台源代碼編輯器)就是用 Electron 開發的、螞蟻小程序(在支付寶中運行的小程序)也是用 Electron 來開發的;以小米、華為為主的眾多手機廠商推出的快應用(類似於微信小程序)的 IDE 也是用 Electron 開發的。

螞蟻小程序 IDE:

你離真正的全棧開發人員只差學會 Electron

此外,大家熟悉的 Slack、Atom、XMind ZEN、WebTorrent、Hyper 等都是基於 Electron 的應用。

從 Electron 的主要用戶來看,很多都是大廠,如螞蟻金服、小米、華為、GitHub(Electron 就是 GitHub 推出的)、微軟等,由於現在 GitHub 被微軟收購了,因而目前 Electron 的後台是微軟。因此學習 Electron 不用擔心以後沒市場,畢竟,各大廠都在用 Electron。

Electron 開發的好處

用 Electron 來開發有什麼好處呢? Electron 本身是基於 Node.js 的 ,這樣就可以利用 Node.js 的現成資源。

而且 Electron 是跨平台的,可以同時開發 Web 應用和桌面應用,無論是 UI,還是代碼(JS),大多數資源都可以共享,這也為開發者大大減少了工作量,甚至企業也無需重複投入人力來開發系統。

此外,Web 應用在網絡環境不好的情況下,頁面加載緩慢,它不僅僅要傳遞數據,而且要傳遞大量與 UI 相關的代碼(如 CSS、HTML 等),非常耗時。

但桌面應用就不同了,運行時至少 UI 部分不需要從網絡上更新,頂多是與服務端交互數據,就算網絡不暢通,也可以暫時使用本地的數據。就算我們不開發這些「高大上」的產品,只開發相對容易的管理系統,在本地運行仍然會大幅度提升用戶體驗。最重要的一點, Electron 不僅僅支持 Web API,完成與 Web 應用相同的工作,而且還允許調用很多操作系統底層 API 來訪問計算機的硬件設備,甚至可以自己用 C++、Go 來編寫本地模塊,可以完成很多 Web 應用無法做到的事情

可能有很多讀者以前開發過桌面應用,認為桌面應用也有缺點。比如,桌面應用很難做到實時更新,維護相對於 Web 應用費時費力,不過這個缺點是針對傳統桌面應用的,而基於 Electron 的應用沒有這個缺點。

Electron 之所以這麼多人用,並不僅僅是因為它基於 Web 技術,而且它還能調用很多本地 API,在實現很多功能時與本地應用非常接近。

學習 Electron,成為更優秀的開發者

作為一名開發者,學會開發桌面應用,會非常顯着地提升自己的核心競爭力,而且 Electron 開發桌面應用使用的是 Web 技術,可以考慮將 Web 應用與桌面應用作為一個應用來開發,這樣會大大提升開發效率。

前面提到,國外許多著名應用使用 Electron 來開發,包括常用的 Visual Studio Code。目前 ,Electron 在國內也不斷升溫,例如支付寶小程序 IDE、快應用 IDE 等都是使用 Electron 開發的。此外,儘管微信小程序 IDE 不是使用 Electron開發的,但卻是使用了類似的 NW.js 開發的,而 NW.js 的使用方法與 Electron 很像,舉一反三即可。

本課程筆者團隊也正在使用 Electron 開發一款跨平台的開發工具 OriUnity,可以使用 JavaScript 同時開發桌面應用、Web 應用、移動 App 和小程序,而且可以將客戶端與服務端融為一體。在開發產品的過程中,我們也積累了很多 Electron 的實踐經驗。因此正好藉著達人課的機會,將 Electron 的一些開發經驗總結出來,希望對想入門 Electron 的讀者有一定的借鑒作用。

課程結構

Electron 功能眾多,但這些功能基本上可分為基礎知識(開發環境安裝、開發步驟、IDE 的選擇等)、窗口、菜單、高級 API(數據庫、托盤、攝像頭、拖拽、剪貼板等)以及發佈應用程序,本課程將會結合這些知識點詳細講解如何用 Electron 開發桌面應用。

課程目的是培養大家解決實際問題的能力,每一課的知識點既相互獨立、又有聯繫,比如,在創建托盤時需要用到上下文菜單的知識。大多數文章(除了配置開發環境和簡介外)都配有完整的實現代碼,並且在最後還提供了兩個實戰案例:基於 Electron 的雲筆記和數據庫管理系統,把離散的知識點結合起來完成非常複雜的桌面應用項目。

本課程分為七大部分,共 29 篇(含開篇詞)。

第一部分(第 01 ~ 04 課):Electron 基礎知識

這部分主要介紹了用 Electron 開發跨平台桌面應用的原因、桌面應用的優勢、Electron 應用的基本開發步驟、如何搭建集成開發環境、用 Git 管理 Electron 應用等內容,這一部分是 Electron 學習的開胃菜,大餐請繼續往後看。

第二部分(第 05 ~ 09 課):用 Electron 創建窗口

這部分詳細介紹了用 Electron 創建各種類型窗口的方式,主要內容包括只針對 Mac OS X 系統的文件展示窗口、打開對話框窗口、保存對話框窗口、顯示消息對話框窗口、使用 HTML 5 API 創建子窗口、用 open 方法打開的子窗口交互、在窗口中嵌入 Web 頁面等。

第三部分(第 10 ~ 12 課):創建各種類型菜單

菜單是桌面應用程序的重要部分,這一部分詳細介紹了在 Electron 中如何創建各種類型的菜單,主要內容包括使用模板創建窗口菜單、如何設置菜單項的角色、菜單項的類型、為菜單添加圖標、創建動態菜單、上下文菜單。

第四部分(第 13 ~ 21 課):常用的核心 API

這一部分是本系列課程的核心內容,講解了 Electron 中常用的核心 API,主要包括創建托盤應用、拖拽操作、使用攝像頭、根據操作系統定製樣式、用純 JavaScript API 操作 SQLite 數據庫、用 Node.js 模塊操作 SQLite 數據庫、訪問 MySQL 數據庫、使用剪貼板、註冊全局鍵、測試等。

第五部分(第 22 ~ 23 課):發佈應用程序

由於基於 Electron 的桌面應用需要依賴 Node.js、Electron 以及眾多的模塊才能運行,這些東西肯定不能讓用戶自己一個個安裝,最好的解決方案就是把這些東西與開發的桌面應用一起打包,然後將一個安裝包發放給用戶,用戶只需要雙擊安裝包就可以搞定,因而學會發佈 Electron 桌面應用非常必要。

因此,這部分內容主要介紹了如何用各種工具發佈基於 Electron 的應用,主要包括使用 electron-packager 和 electron-builder 創建安裝包及製作安裝程序(dmg、exe 等)。

第六部分(第 24 ~ 26 課):項目實戰

這一部分是本系列課程的畫龍點睛之筆,需要把前面五部分介紹的知識點連接起來完成複雜的桌面應用,這裡提供了兩個完整的案例,一個是雲筆記系統,該系統可以將本地的筆記保存到服務端,只是這裡的服務端是以太坊,而不是傳統的數據庫;第二個項目是基於 Electron 的 MySQL 數據庫管理系統,可以做本地管理 MySQL 數據庫,而且還可以將數據上傳到以太坊進行備份。

第七部分(第 27 ~ 28 課):模塊分析

這一部分主要介紹了 Node.js 和 Electron 模塊的相關知識,包括使用 JavaScript 開發 Node.js 和 Electron 模塊以及使用 C++ 開發 Node.js 和 Electron 的本地模塊。通過這一部分的內容,可以讓 C++ 與 Electron 完美融合在一起,讓 Electron 擁有無限擴展性。

你離真正的全棧開發人員只差學會 Electron

課程寄語

Node.js 和 Electron 堪稱 JavaScript 的左右護法,前者讓 JavaScript 可以輕而易舉地跨越不同類型應用的界限,後者讓 JavaScript 可以進入服務端和桌面應用領域。有了這兩個護法,JavaScript 可以真正成為唯一的全棧開發語言,從 Web 到移動,再到服務端,再到桌面應用,甚至是終端程序,無所不能。

本課程並不是單純講解 Electron 的知識,而是想要教會大家開發 Electron 桌面應用的思想,提高動手能力,今後無論遇到多複雜的桌面應用需求都能得心應手,輕鬆應對。

最後,預祝大家學習愉快,Good Luck!

你離真正的全棧開發人員只差學會 Electron

作者李寧其他達人課推薦:

Python 爬蟲和數據分析實戰: https://gitbook.cn/m/mazi/comp/column?columnId=5a7d1a13a7f22b3dffca7e49

小程序與雲開發實戰 36 講: https://gitbook.cn/m/mazi/comp/column?columnId=5b7f5f06a62b70638ef61319

零基礎學區塊鏈和以太坊開發: https://gitbook.cn/m/mazi/comp/column?columnId=5ae14aa2d7ab44391b5a00df

原文 : CSDN

相關閱讀

免责声明:本文内容来源于CSDN,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。