在今年的 Build 大会上，微软隆重发布了 Visual Studio Code ，这是微软首款可在 Mac 上运行的代码编辑器。功能齐全的桌面 IDE。人群变得疯狂。
我自己下载并使用了 Visual Studio Code，我必须承认，它非常好。特别是考虑到这是我们在这里讨论的 v1 版本。
但是没过多久就有人揭开了Code的小秘密……
原始文件名 atom.exe？ 这意味着什么？
这意味着，Visuals Studio Code 不是传统意义上的 Mac 桌面应用程序。它实际上是一个使用网络技术构建的混合应用程序。
GitHub 原子
Atom 是 GitHub 去年发布的代码编辑器。作为代码编辑器，它类似于开发人员的宠儿 Sublime Text，但有一个令人难以置信的区别： Atom 编辑器本身是 HTML、CSS 和 JavaScript 。然后将其包装在具有设备访问权限的本机外壳中。这使得它看起来就像是一个本地桌面应用程序，并且就所有意图和目的而言，它完全是。如果您使用过 Atom，就会知道它有多快多好。正如史蒂夫·乔布斯 (Steve Jobs) 所说的那样，“这并不懈怠。”
GitHub 拆分并开源了 Atom 中封装实际编辑器的部分，并将其称为 Electron （最初称为 Atom Shell）。
这不是我们第一次看到这样的事情。 Adobe 的 Brackets 编辑器也是以同样的方式构建的。此外，谷歌在几年前发布 Chrome Packaged Apps 时就这样做了。我在 Telerik 的一个团队工作，该团队构建了第一个在 ChromeOS 上发布的相机应用程序。我非常了解在 Web 技术上构建桌面应用程序的感觉。让我完全诚实地谈谈我对以这种方式构建桌面应用程序的感受。
我喜欢它。
严重地。我一生中从未如此快速地构建桌面应用程序。我想“这太好了，难以置信！” 唉，它是 。
打包应用程序发布后不久，它们就被安置在谷歌开放工作区的后角，在闪烁的荧光灯下，位于山景城一栋潮湿的地下室里，旁边是一个种满蘑菇的花盆。据我所知，打包的应用程序已经死了。
我知道这好得令人难以置信。然后我遇到了 Electron。
电子
Electron 本质上就是 Packaged Apps 应该有的样子（显然是我的意见）。这是我们看到在 PhoneGap 等技术中如此流行的 Web 应用程序原生包装器概念的出色实现。那么，是什么让它比 Chrome Packaged Apps、MacGap 或任何其他已经尝试这样做的无数项目更好呢？
一个词： 标准
Electron 与它的许多前身不同，它几乎完全依赖于您已经了解的项目结构和模块的 Web 标准。为了向您展示我的意思，我将把我为 Kendo Flippable 项目所做的网站改造为 Electron 桌面应用程序。不过，在我们这样做之前，我认为有必要讨论一下 为什么 要构建桌面应用程序。
什么时候去桌面
我们常常很难确定何时构建桌面应用程序（本机）以及何时提供 Web 应用程序。几乎没有什么是一个人能做而另一个人做不到的。例如，一个常见的误解是提出这样的问题：
“应用程序是否需要设备访问权限？”
答：是的 – 本机桌面
B：否 - 网络
然而考虑一下网络现在的能力：
- 相机访问
- 麦克风
- 音频处理
- 文件系统（在一定程度上）
- 通知
- WebSockets
- 加速度计
…而这样的例子不胜枚举。因为您需要设备访问而注销网络不再是全有或全无的争论。那么走桌面路线的正当理由是什么？在我看来，两个主要好处是：
- 没有跨浏览器兼容性问题
- 不加载远程资产（无延迟）
还有一些其他潜在的好处，例如访问连接的设备（蓝牙、USB 等）和桌面应用程序通常默认处于离线状态，但这些是我个人的最爱。
桌面应用程序的美妙之处在于您将所有资产和代码捆绑到一个包中，然后直接从用户的机器加载。在 web 上，您不知道您的应用程序最终将在哪里运行，并且您分析通过网络的每个字节以确保它是绝对必要的。桌面应用程序不用担心这些事情。
理想情况下，您将构建一个 Web 应用程序，您确切地知道您的应用程序将在哪个浏览器中运行（具体到版本），并且您的所有资产都已在本地加载。
我的朋友，这正是 Electron 允许你做的。
创建一个新的电子应用程序
您需要做的第一件事是获取 Electron。最好的方法是通过 npm 安装它。
npm install -g electron-prebuilt
这将在您的系统上安装 Electron。您现在可以将任何 Web 应用程序作为 Electron 应用程序运行，只要您在
package.json
文件中有正确的配置，这就是我们回归标准之美的地方。
标准的好处是你有很多选择。
安德鲁·S·塔嫩鲍姆
但说真的，Electron 使用起来很有趣，因为它已经在使用您很可能熟悉的概念。其中之一是
package.json
文件。没有愚蠢的清单可以使用。要指定您的应用程序是 Electron 应用程序，您需要做的就是将“main”字段添加到
package.json
文件中。以下是一个死板的简单电子
package.json
。
npm install -g electron-prebuilt
`main.js` 文件是关键。可以随意调用它，但这是 Electron 在加载您的站点时将执行的文件。在那个“main.js”文件中，需要一些样板代码来打开新的浏览器窗口并启动。
npm install -g electron-prebuilt
这几乎是从 Electron 文档中逐字记录的，但我删掉了几行不必要的内容（比如崩溃报告和在应用程序启动时打开开发者工具）。
请注意“app”和“BrowserWindow”模块中的文件是如何要求的？这只是 CommonJS。这是 Electron 的第二个亮点。它假设你所有的 JavaScript 文件都是 CommonJS。这意味着您无需添加构建系统来获得对脚本的模块支持。我们在 NativeScript 中实现了相同的概念，对我来说，这就是生活本该如此。
main.js
文件将尝试加载名为
index.html
的文件。这就是您回到纯网络领域的地方。您的 index.html 文件可以包含任何您想要的内容！任何你想要的 CSS，任何你想要的 JavaScript。网络上的任何内容在 Electron 中都是合法的。
npm install -g electron-prebuilt
如果你已经在项目目录中，你现在可以通过执行
electron .
从命令行或终端。
应用程序与渲染
在我们继续之前，这里值得注意的是 Electron 如何运行应用程序。有两个线程：1) 应用程序线程和 2) 渲染线程。应用程序线程运行
main.js
文件，渲染线程运行
index.html
浏览器实例。知道这一点很重要的原因是
电子的原生特性
只
在应用程序线程上可用
。这是一项安全功能，可将渲染线程“沙箱化”，从而使恶意代码无法在运行时执行。
这有点令人困惑，所以让我们通过查看其中一种 Application 方法来了解它是如何发挥作用的。
在 Windows 上，
BrowserWindow
对象上有一个 API，允许您利用 Windows 中的内置进度条功能。我们可以编写一个设置间隔，从
main.js
文件开始这个过程。
npm install -g electron-prebuilt
此 API 仅适用于 Windows。如果你在 Mac 上运行这段代码，你会得到一个错误。这就是为什么整个事情都包含在
process.platform
条件中，确保平台是
win32
。
这一切都在作为应用程序线程的
main.js
中运行。如果我们想从 UI 中启动这个进度条操作怎么办？我们会放入一个按钮并处理它的点击事件。
npm install -g electron-prebuilt
npm install -g electron-prebuilt
我将 UI 的 JavaScript 拆分到一个
index.js
文件中，并将其包含在
index.html
页面中。我提到过 Electron 将所有 JavaScript 文件视为 CommonJS 模块。这可能会让您认为您可以从
main.js
文件中导出
BrowserWindow
对象并将其引入
index.js
文件。由于渲染线程对本机方法的限制，这将不起作用。该模块将出现未定义。
为了从渲染线程执行应用程序线程方法，您必须使用称为
ipc
模块的东西。
线程通信的IPC模块
这真的很简单。事实上，这正是我在构建 Chrome 打包应用程序时所做的，因为打包应用程序对允许在具有访问本机功能的同一线程上运行的代码类型有类似的限制。我什至将该项目开源为 jQuery 的
Pkg
插件。
ipc
模块非常相似。您从渲染线程发送一条消息，主线程接收它。
首先，我们在
main.js
文件中的
ipc
模块中要求，然后侦听我们最终将从
index.js
文件中分派的事件。
npm install -g electron-prebuilt
我们只需要从按钮点击发送 `update-progress` 事件。这是通过要求相同的 ipc 模块，然后使用我们想要传递的任何参数执行 send 来完成的。在这种情况下，它是计数器的当前值。
npm install -g electron-prebuilt
单击该按钮现在会更新任务栏图标中的进度条。此外，进度条的值从 UI 传递到渲染线程。这就是它的全部。
原生功能
我在前面的文章中提到过，仅靠网络本身就可以做多少事情。只需获得用户的一点许可，它就可以做很多原生的事情。由于用户将在本地运行我们的 Electron 应用程序，因此我们不需要请求许可，我们已经拥有了许可。
例如，我们可以仅通过使用 Web Notifications API 启动本机通知。
npm install -g electron-prebuilt
现在我们可以添加我们想要的任何 JavaScript 或 CSS 库。就我而言，我构建了一个小型应用程序，用于在 iTunes 中搜索艺术家、显示他们的专辑并播放曲目样本。当然，我使用了
Kendo UI Core
来构建应用程序。还有其他 JavaScript 库吗？
这是我的演示应用程序的快速视频，包括本机桌面通知。
注意：如果视频模糊，请确保您观看的是 720p。
介绍质子
Visual Studio 和 Github 并不是唯一在 Electron 上构建 IDE 的商店。 Telerik 目前正在开发一个完整的桌面客户端（代号“Proton”），用于在任何操作系统上构建 iOS 和 Android 应用程序。您可能知道这个 IDE 当前的版本是 AppBuilder Windows Client 。它是我们迄今为止最流行的用于构建移动应用程序的编辑器之一，但目前仅适用于 Windows（内置于 WPF 中）。 Electron 使我们有能力采用相同的功能，并创建一个无论您在什么平台上都可以喜欢的跨浏览器移动开发环境。
需要质子 Beta 测试员
我们即将发布这个新的桌面 IDE，但我们需要您的帮助。如果您有兴趣获得 Proton 的早期版本并且不介意向我们提供您的原始反馈，我们很乐意与您联系。在 Twitter 上联系 @rdlauer 。他是 Proton 密钥的保管人，将确保您是第一个体验这个令人兴奋的新 IDE 的人
感谢信
我想通过向 GitHub 和在那里工作的人们发送“谢谢”来结束他们在 Electron 上所做的一切。开源项目有时是一项吃力不讨好的工作，您听到的大部分都是您的软件存在的问题，而不是它所做的所有精彩事情。我非常感谢 GitHub 恢复了我所钟爱的 Google Packaged Apps 的灰烬，并对其进行了多次改进。
您可以 在 GitHub 上 找到 iTunes 艺术家搜索应用程序的代码。只要确保你已经安装了 Electron Prebuilt 就可以了。
确保您还从 Bower、JSPM、GitHub 或您喜欢的任何方式获取 Kendo UI Core 安装包。我真的很喜欢将这个项目放在一起，并且在使用 Kendo UI 和 Electron 时获得了很多乐趣。桌面开发 应该 像 Web 开发一样简单，而 Electron + Kendo UI 使这成为现实。