偶遇一只尤物 nw.js

发表于 | 分类于

Node-Webkit（现已正式改名为 NW.js），一个用 HTML5/CSS/Javascript 等 Web 技术来写跨平台桌面客户端应用程序的开源框架（跟移动终端上的 PhoneGap 等项目的原理类似），开发者只需写一份代码，就能编译出可同时跑在 Windows、Linux 和 Mac 上的桌面应用程序。

让我意外的是， Node-Webkit 项目的发起人居然是国人， Rogerwang，真名王文睿，英特尔开放源码技术中心（OTC）的软件架构师。最开始，node-webkit 只是他的一个业余项目，该项目从 2011 年开始，截至目前，在 GitHub 上已经有 24000 多个 Star，2600 多个 Fork。

从 nw.js 官网 可以看出，使用 Node-Webkit 开发的应用领域非常丰富，其中也不乏一些设计精良体验优美的软件。很大程度上，这得益于目前硬件的性能提升和 Web 技术的发展，动画、图形、音频、视频、2D、3D、WebGL 等等，都让基于 HTML5 的应用开发充满了想象力。

Node-Webkit 是通过 Node.js 和 WebKit 技术的融合，让开发者可以用 HTML5/CSS/Javascript 技术编写 UI，同时又能利用 Node.js 平台上众多 library 访问本地 OS 甚至跨域访问 ，最终达到用 Web 技术就可以编写桌面应用的目的。

具体实现的内部原理，作者这样解释道：

核心思想是把 Node.js 的消息循环（libuv）和 Chromium Renderer 进程的消息循环合并到一起，这样从 DOM（HTML）中可以直接调用 Node.js 提供的函数；把 Node.js 使用的 V8 引擎和 Chromium 的 V8 引擎合并，使得 Node.js 的 Javascript 和 DOM 里面的 Javascript 可以互相访问。

传统的桌面应用开发中，用户界面的复杂性一直是一个难题，而 node-webkit 方式可以降低很多用户界面开发的复杂性，将界面开发交给更加灵活、更加容易编写和调试的方式：HTML + CSS。

小试牛刀

nw.js 框架下的开发流程是：

编写一个 HTML 页面（作为程序入口），然后在这个页面上引入额外的 CSS（界面风格）和 JavaScript（动作），然后将这些资源交给工业级浏览器内核 Webkit 来渲染 。

我们来通过一段最简单的 HelloWorld 程序，窥探一下 Node-webkit 的样子:

示例代码:

下面一段简单的 HTML 文本，显示一个”Hello World!”的问候，它将是我们这个应用程序的入口。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

再新建一个配置文件：package.json

1
2
3
4
5
6
7
8
9
10
11
12
{
    "main": "index.html",
    "name": "sample-app",
    "description": "demo app of node-webkit",
    "version": "0.1.0",
    "window": {
        "toolbar": false,
        "resizable": false,
        "width": 800,
        "height": 500
    }
}

该文件是 node-webkit 的应用描述文件，一个完整的 node-webkit 应用程序必须包含这样一个文件。它用于定义应用程序的基本信息以及运行相关的参数，比如名称、介绍、入口文件名称以及应用程序窗口的各项配置，如窗口的显示尺寸、显示位置、是否显示工具栏等等。

运行

安装好 nw.js 后，nwjs 添加到系统的环境变量，只需在当前目录下运行 nw .命令，就会看到如下窗体：

上图是 Windows 平台下效果，再看 Mac OS X 平台下的效果：

以及 Linux 平台下的效果（请忽略虚拟机界面）：

Look it，So easy~真正实现了一份代码适用各种平台。

从这个简单的实例可以看出：

  • 页面运行在一个「桌面应用程序」中。
    没有地址栏，状态栏，菜单栏等，看起来更像是一个桌面应用。

  • 用户界面开发的复杂性被「外包」给一个更简单的 Web 环境。
    这就是传说中的混合（hybrid）开发模式，比如现在移动开发中的 cordova 就是采用这种模式，使得本来被视为天堑的原生的用户界面开发变为坦途。

展望未来

用 Web 技术来开发桌面应用，其实这条路老早就有人在走，比如：

跨平台+多终端

毫无疑问，这货会成为桌面开发的神器。因为它具备了以下这些无可比拟的优势：

  • 人力成本最低
    招一个会 C++ 的码农要花多少钱？招一个牛逼哄哄的既会 C++ 还对 QT、MFC 等了如指掌的码农又要花多少钱？对比一下，招一个会 JS + CSS 的呢？如果你是老板，你怎么想？再说了，市面上会 C++ 的码农更多，还是会 JS + CSS 的码农更多？无需小僧多言，其中的奥妙您自个儿体会。

  • APP 的体积更小
    列位一定还记得当年大明湖畔的疼讯 QQ 只有十几 M 的体积，俗话说，岁月是把杀猪刀，在集成了疼讯的各种应用之后，如今的 QQ 身材早已发福走形。可以想象，如果 QQ 不使用嵌入浏览器内核的方式，恐怕体积早就超过 100M 了吧！

  • 不需要整体更新 APP
    如果是按照传统的方式开发桌面应用，每次升级的时候都需要用户重新下载整个应用，比如疼讯 QQ。但是用 node-webkit 的这种方式，可以很好地避免这个问题，就像网站一样，网站内容可以不断更新，但是浏览器本身的更新不需要那么频繁。

  • 跨平台
    不多说了，显而易见的优势。

  • 多终端
    由于 node.js 和 chromium 本身都是可以在桌面平台和移动平台上运行的，因此用这货来支持多终端开发，保持技术栈的一致性是非常合适的。

  • 完善的工具链
    由于 node.js 的兴起，它下面的 npm 模块数量已经有几十万个；而各种基于chrome 内核的定制版浏览器就不用再介绍了。加上传统 B/S 开发模式下已经具备的完整开发和设计工具，用 node-webkit 来开发桌面应用已经具备了完善的工具链。

总结

node-webkit 很大程度上简化了桌面程序的开发，为 Web 前端以及桌面客户端的开发人员提供了一个新的舞台。

就是啊，这货 2011 年就出来了，我们去年还在殚精竭虑地搞 web client，想想真是欲哭无泪 ~

最近，我司因战略发展需要，亟需给客户研发出一款「跨平台、易扩展」的客户端软件，刚好在这个时机，乔帮主地下显灵，让我捡到了 nw.js 这只尤物，好巧啊，怎么会这么巧呢，要我说啊，这事真是活活给巧死了……呜呼~这下又有事做了……

彦祖老师 wechat