Atom-Shell 入门
Atom-Shell 入门
现在已经有很多框架可以让我们用JavaScript、HTML和CSS来编写跨平台桌面应用，Atom Shell便是其中之一。Atom Shell基于nodejs和Chromium实现，Github的开源编辑器Atom便是基于Atom shell和Coffee scrpit开发的。
Chromium浏览器可以分为两个部分：Browser端和Render端。Browser端负责与本地系统交互：创建窗口、控制托盘图标等等。Render端负责绘制页面。两者通过IPC交互。Atom Shell的实现是在Browser端和Render端分别嵌入了nodejs。这样Browser和Render两部分就都可以使用nodejs提供的api了，也可以在Browser端用javascript来调用本地系统相关的API。
Browser端
在Web app中我们通常会有两种javascript脚本：服务器端脚本和客户端端脚本。客户端端脚本运行于浏览器中，服务器端脚本运行于nodejs中。在Atom Shell中有类似的概念，运行于Render端页面中的脚本和运行于browser端中的脚本。分别可以称它们为：Render端脚本和Browser端脚本。
在传统的Web app中，服务器端脚本和客户端脚本通常使用web sockets来通信。在Atom Shell中，Render端脚本需要使用ipc模块来发送信息给rowser端。同时Atom Shell还提供了一个更易用的remote模块来支持通信。
Render端
普通的网页是无法操作浏览器以外的本地系统的。而在Atom Shell中nodejs api可以在网页中使用，所以开发者可以在网页中访问本地资源，就像Node-Webkit一样。
但是和Node-Webkit不一样的是：不能直接在网页中（Render端）操作本地资源，只能通过remote模块调用Browser端脚本操作本地资源。
DEMO
通常一个Atom Shell app的文件目录如下：
your-app/
├── package.json
├── main.js
└── index.htmlpackage.json的格式和普通的Node模块中的一样。其中属性main的值表示app的入口脚本，这个脚本会运行在Browser端中。如下是package.json文件的样例：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}在main.js中应该创建窗口并处理相应的系统事件，下面是一个典型的样例：
// 用于控制app的life circle
var app = require('app');
// 用于创建本地窗口的模块
var BrowserWindow = require('browser-window');
// 把app的crash情况发送给服务器
require('crash-reporter').start();
// 保持一个全局的window对象引用，
// 如果你不这么做，window对象会在GC启动后被自动垃圾收集机制释放
var mainWindow = null;
// 在所有窗口关闭后关闭app
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
// 这个方法会在Atom Shell初始化结束后调用回调函数
app.on('ready', function() {
// 创建窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载index.html
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// 在窗口关闭时触发
mainWindow.on('closed', function() {
// 移除window对象的引用
// 通常如果是多窗口的app，你需要把window对象存储到一个数组里面，而在close时把对应的window对象移除掉
mainWindow = null;
});
});最后创建需要在窗口中显示的index.html：
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script> and atom-shell <script>document.write(process.versions['atom-shell'])</script>.
</body>
</html>运行App
首先下载Atom Shell的可执行文件。然后运行如下命令执行app：
- windows：
.\atom-shell\atom.exe your-app\ - Linux:
./atom-shell/atom your-app/ - Mac OS X:
./Atom.app/Contents/MacOS/Atom your-app/
打包
你只需要把app的文件夹命名为app，并把它放在Atom Shell的资源目录下。在OS X系统中为Atom.app/Contents/Resources/，在Linux和Windows上为resources/。然后执行Atom.app（在Linux中为atom，在windows中为atom.exe）即可。然后把atom-shell文件夹压缩打包分发给用户即可。
如果你用的打包工具是grunt，那么可以用grunt-download-atom-shell来自动下载对应平台的Atom Shell。