初探Electron

Electron是什麼？

官網是這麼描述的：Build cross platform desktop apps with JavaScript, HTML, and CSS

翻譯一下：使用JavaScript,HTML以及CSS搭建跨平臺桌面應用

誕生環境

一位博主這樣開玩笑說：
可能主要是由於，猿類裏的亞種——前端開發——又有了新的出路了吧，還沒找工做的前端開發，又有了新的崗位能夠去選擇，已經在崗的前端也有了新一年的 KPI/OKR，剛起步的創業公司能夠只拉一個前端就能開發跨平臺的多個桌面客戶端... ...（開個玩笑）。

JavaScript近幾年的全領域發展，從compile once,run everywhere轉變爲code once,run everywhere，因爲JavaScript自己的是一門解釋性的腳本語言，這讓它逐漸的成爲全宇宙使用最普遍的語言，沒有之一。

JavaScript只是JavaScript，在瀏覽器中，它操做DOM和BOM，在服務器端它操做FileSystem，HTTP，因此在任何環境，他均可以執行，即便是在幾M的內存環境，這點對物聯網來講很重要。

調用需求：

傳統的PC軟件開發成本過高，和網絡的興起，讓傳統的開發逐漸被在線系統吊打，高成本必然逐漸的走下坡路，這是符合經濟上發展的趨勢，可是因爲性能的問題，無論是VR仍是直播，須要採集視頻，音頻，網卡信息，而這些模塊大多數仍是C、C++來獲取

傳統侷限：
在瀏覽器裏，Web頁面一般運行在一個沙盒環境裏，它不能訪問本地的資源。
好比在Web頁面裏，調用本地GUI是不容許的，由於在Web頁面裏管理本地GUI資源是很是危險的並且很是容易致使資源泄露。若是你想在Web頁面進行GUI操做，該Web頁面的渲染進程必須經過和主進程通訊來請求主進程處理這些操做。

Electron的組成

1. 軟件組成：Electron: 1.2.6 Node: 6.1.0 Chromium: 51.0.2704.106 V8: 5.1.281.65

2. 工具支持：（官方提供）

   功能上支持：
   1. Automatic updates
   2. Native menus & notifications
   3. App crash reporting
   4. Debugging & profiling
   5. Windows installers

   寫代碼&部署：

   Electron Packager — Package your apps

   Electron Builder — Deploy your apps

   Spectron — Test your apps Devtron —

   Debug your apps Electron

   Prebuilt — Install Electron

   Menubar — Create menubar apps

3. 學習材料：官網提供一個比較全面的DEMO，包括常規的系統級別操做，通訊，截圖，調用PDF等例子

4. 產品：官網上列舉了不少咱們比較熟悉的有Atom，VSC，slack

Have a try！

一個最簡單的electron項目包含三個文件：

• package.json （Node.js項目的配置文件）
• index.html （桌面應用的界面頁面）
• main.js （應用的啓動入口文件）

其中，核心的文件是 ==index.html== 和 ==main.js== 咱們能夠下載官方的quick start的例子

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

---

Electron基礎文檔

使用 AngularJS 和 Electron 構建桌面應用

結合React建立Electron桌面應用