用HTML5+JS開發跨平臺的桌面應用

經過Node.js和WebKit技術的融合，開發者能夠用HTML5技術編寫UI，同時又能利用Node.js平臺上衆多library訪問本地OS的能力，最終達到用Web技術就能夠編寫桌面應用的目的。

 

選擇 Electron 和 Vue.js

Electron

咱們想要快速的開發一款體驗友好的跨平臺應用，網上逛了一圈，對 Electron 和 NW.js 產生的興趣多點，而最後選擇了 Electron，總結有如下幾點：

• Java、C# 等技術，開發成本高、耗時；
• RubyMotion 等技術：
  • 相對於第一點好不少，但仍是不夠，除非應用須要原生級別的性能需求；
  • 並且 RubyMotion 暫時不支持 Windows 和 Linux；
• 我是前端小工匠，上手 Electron 很是快，學習成本低；
• JavaScript/Node.js 的性能很不錯，足夠用了；
• Electron 比 NW.js 更接近 Node.js 運行時，API 也更加底層。

Electron（原名 Atom-Shell）是 GitHub 隨 Atom 一塊兒開源的跨平臺的利用 Web 技術（Node.js、JavaScript、HTML 和 CSS）開發桌面應用的框架。Atom 即構建在 Electron 之上。

Electron 爲用純 JavaScript 建立跨平臺桌面應用提供了運行時，它經過集成的 Node.js 運行 Main 文件建立一個主進程從而啓動一個應用程序，主進程調用一個叫 BrowserWindow 的模塊建立應用窗口並賦予它系統原生的 GUI 交互功能，每一個應用窗口會運行本身的渲染進程，渲染進程會在窗口中渲染出 Web 頁面，Web 頁面由 Chromium 渲染，跨平臺兼容性至關不錯。

Vue.js

起初只是衝着 Vue.js 的優雅輕巧想學習瞭解一下，把官方的教程快速過了一遍，而後就作開發了，對於以前有接觸過 AngularJS 這類 MVVM 前端框架的同窗來講，上手學習成本很是低，初嘗感受不錯，如今打算在下一個大項目繼續嘗試之。

在這我就很少介紹 Vue.js 了，總的來講就是優雅、輕巧、功能豐富、很是不錯的輕量級 MVVM 框架，引用官方的介紹：

Vue.js 是一個用於建立 Web 交互界面的庫，專一於 MVVM 模型的 ViewModel 層。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了 Directives 和 Filters。Vue.js 的 API 設計深受 AngularJS、KnockoutJS、Ractive.js 和 Rivets.js 的影響。儘管有很多類似之處，但 Vue.js 可以在簡約和功能之間的微妙平衡中體現出其獨有的價值。

官方有中文文檔，傳送門：Vue.js

Electron 相關特色

程序入口

Electron 的程序入口是一個 JavaScript 腳本（package.json 指定），由 Node.js 來運行，你須要手動建立應用窗口，並經過相應的 API 加載 HTML 文件或 URL，你同時須要監聽應用窗口事件以便決定什麼時候退出應用。

API

• Electron API，提供與系統交互的相關接口，方便直接使用 JavaScript 調用；
• Node.js 提供 Node API，有開發 Node.js 程序一致的體驗，還能夠很方便使用各類包；
• Chromium 提供的 Web API，使得開發 GUI 就像開發瀏覽器頁面同樣簡單。

Main Process、Render Process 和進程間通訊

Main Process 和 Render Process 是 Electron 中兩個分開的概念，彼此是隔離的。開發者的 Main 文件運行環境就是 Main Process，而每一個 BrowserWindow 實例則是一個個 Render Process。Main Process 建立並管理全部的 Render Process，每一個 Render Process 都是獨立的，只關心所運行的 Web 頁面。

Main Process 和 Render Process 之間能夠經過 IPC 模塊或 Remote 模塊（RPC）進行通訊，實現互相訪問資源並進行協調工做。

其餘特色

• 原生對話框（Dialog API）
• 全局快捷鍵（Global-Shortcut）
• 原生應用菜單（Menu）
• 協議支持（Protocol）
• 系統托盤（Tray）
• 等等...

其餘的你們看看官方文檔，傳送門：Electron

 

相關資料：

http://www.zhihu.com/question/36644309

https://youhaosuda.com/blog/31

http://get.ftqq.com/7870.get

http://hex.youdao.com/zh-cn/index.html

http://www.tuicool.com/articles/aAFZzmi 

http://nwjs.io/

https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps

http://zhuanlan.zhihu.com/FrontendMagazine/20070166

http://www.baidufe.com/item/1fd388d6246c29c1368c.html

http://damoqiongqiu.iteye.com/blog/2010720

http://www.cnblogs.com/2050/p/3543011.html