偶遇一只尤物

低调出世

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 这只尤物,好巧啊,怎么会这么巧呢,要我说啊,这事真是活活给巧死了……呜呼~这下又有事做了……