大概十年前?Palm webOS?發布的時候,有一種看法認為未來的移動端軟件和桌面軟件將被 Web 取代。
彼時?Chromium?未滿周歲,Node.js?在娘胎里即將出世。 十年間,前者借 Google 之力一統瀏覽器江山,后者則顛覆了所有前端開發的工程實踐。 這兩者的結合則是一個劃時代的跨平臺的桌面軟件開發新方式 -?Electron。
十年預言成為現實。
我們不討論原生開發。在足夠的功能支持和優越的開發效率面前,大多數應用場景真的沒必要再討論是否原生開發。
關于 Electron
Electron?整合了?Node.js?和?Chromium。 它能夠充分利用?Node.js?豐富的軟件倉庫,并使用?Chromium?的渲染引擎部分,同時保持小巧和可維護。
Electron 應用結構
Electron?程序有兩類進程。
程序入口是一個?JavaScript?腳本,稱為?主進程。 開發者可以在主進程中用腳本創建頁面展示用戶界面。 用戶界面其實是使用?HTML/CSS/JavaScript?等標準 web 技術開發的頁面,運行在?渲染進程?中,由?Chromium?渲染。
主進程能夠調用所有的系統原生 API,而渲染進程則只能調用標準的 Web API。 (早期版本中渲染進程可以直接訪問很多系統原生 API,為了安全考慮,新版本默認禁止渲染進程直接訪問系統原生 API)
進程間通信
主進程與渲染進程之間可以通過?ipcRenderer/ipcMain?發送消息,或者使用?electron.remote?模塊進行 IPC 通信。 渲染進程之間則可以使用?localStorage/sessionStorage/IndexedDB?等方式共享數據。
文件結構
運行一個最基本的?Electron?項目只需要 3 個文件,如下:
其中,index.js?包含了軟件生命周期的主要邏輯,如窗口管理,菜單欄管理等。 我們可以決定采用什么方式來創建軟件的窗口,如窗口尺寸、是否全屏、透明度等。
index.html?用于定義窗口范圍內的程序界面。 采用標準的 HTML 技術,可以輕松控制文本、圖片、按鈕、表單的樣式和行為。 也可以在頁面中引入?JavaScript?和?CSS?文件,正如在瀏覽器中編程一樣。