Atom Shell開(kāi)發(fā)桌面應(yīng)用框架

Atom Shell 現(xiàn)已改名為 Electron

atom-shell 是 GitHub 隨 Atom 一起開(kāi)源的跨操作系統(tǒng)（Windows，Linux，MacOS X）的利用 Web 技術(shù)（Node.js、JavaScript、HTML 5）開(kāi)發(fā)桌面應(yīng)用的框架。Atom即構(gòu)建在 atom-shell 之上。

與 Node-Webkit 的區(qū)別

atom-shell 和Node-Webkit很像，那么兩者有什么區(qū)別呢？

1. 程序入口

Node-Webkit 的程序入口是一個(gè)網(wǎng)頁(yè)，你在package.json中指定主頁(yè)，然后這個(gè)主頁(yè)會(huì)在瀏覽器中打開(kāi)，作為應(yīng)用程序的主窗口。

atom-shell 的程序入口則是一個(gè) JavaScript 腳本，而不是直接指定一個(gè) URL。你需要手動(dòng)創(chuàng)建瀏覽器窗口，并通過(guò)相應(yīng)的 API 加載 html 文件。你同時(shí)需要監(jiān)聽(tīng)窗口事件以便決定何時(shí)退出應(yīng)用。

因此，atom-shell 更接近 Node.js 運(yùn)行時(shí)，API 也更加底層，你可以利用 atom-shell 進(jìn)行 web 測(cè)試，類似phantomjs。

2. 編譯系統(tǒng)

atom-shell 使用libchromiumcontent訪問(wèn) Chromium 的 Content API，這樣編譯 atom-shell 的時(shí)候就不用編譯整個(gè) Chromium （編譯 Chromium 非常費(fèi)時(shí)）。

順便提一下，GitHub 開(kāi)發(fā)者還創(chuàng)建了brightray庫(kù)，讓 libchromiumcontent 的使用更方便。

3. Node 集成

Node-Webkit 的 Node 集成需要給 Chromium 打補(bǔ)丁才能工作。atom-shell 通過(guò)集成 libuv loop 和 平臺(tái)的 message loop 避免給 Chromium 打補(bǔ)丁。

4. Multi-context

Node-Webkit 創(chuàng)造了 Node context 和 web context 的概念，而 atom-shell 沒(méi)有引入新的 context，而是直接使用 Node 的 Multi-context 特性（這一特性是 Atom 開(kāi)發(fā)者贊助 Node 添加的）。

作者

GitHub 最初考察了 Node-Webkit，但是最終還是決定雇傭@zcbenz來(lái)開(kāi)發(fā)想要的框架。于是 atom-shell 誕生了。

一個(gè)最簡(jiǎn)單的 hello atom 示例項(xiàng)目請(qǐng)看 hello-atom

主程序示例：

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

支持很多桌面應(yīng)用特性，例如 Dock 菜單等：

使用 Dock 菜單的方法：

var app = require('app');
var Menu = require('menu');
var dockMenu = Menu.buildFromTemplate([
  { label: 'New Window', click: function() { console.log('New Window'); } },
  { label: 'New Window with Settings', submenu: [
    { label: 'Basic' },
    { label: 'Pro'},
  ]},
  { label: 'New Command...'},
]);
app.dock.setMenu(dockMenu);

PS：網(wǎng)易也有開(kāi)放了Hex，同樣是不滿意node-webkit，就自己做了套.