Node Webkit 101

Web前端的现状 目前的Web前端的现状较之5-6年前,简直不能同日而语:从所使用的技术、工具、框架到开发一个产品所需要付出的工作量,从前端开发从业人员的数量到Web应用的数量,从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报,一切都有了翻天覆地的变化。 借助HTML5+CSS3的普及,加上一些开箱即用的CSS框架(如bootstrap,foundation等)支持,人们已经可以非常容易的从零开始搭建一个Web应用的前端。一个在UI方面非常业余的程序员也可以很快的做出一个像模像样的用户界面。而另一方面,基于操作系统原生API,要想设计并实现一个桌面应用,需要的付出则远远超过超过同水平的Web界面。 webkit浏览器内核 Webkit作为最受欢迎的浏览器内核,自然有非常多的port。比如GTK+对它的port – WebkitGTK,以及构建在WebkitGTK之上的Python的bind。使用WebkitGTK的Python版本,开发人员可以用HTML+CSS来开发应用,然后写一点Python脚本,最后将其运行在桌面上。 这里有个早期的例子来教你如何写一个所见即所得的编辑器。桌面应用开发中,对于用户界面的复杂性一直是一个难题,而这种方式可以减轻很多的用户界面开发的复杂性,将界面开发交给另外更加灵活,更加容易编写和调试方式:HTML+CSS。 这种模式下基本的开发流程是编写一个HTML页面(作为程序入口),然后在这个页面上引入额外的CSS(界面风格)和JavaScript(动作),然后将这些资源交给工业级浏览器内核Webkit来渲染 – 这个过程和在浏览器中访问该文件并无二致,但是有两个额外的好处: 页面运行在一个“桌面应用程序”中 没有地址栏,状态栏,菜单栏等,看起来更像是一个桌面应用 用户界面开发的复杂性被“外包”给一个更简单的环境 这就是传说中的混合(hybrid)开发模式,比如现在移动开发中的cordova就是采用这种模式,使得本来被视为天堑的原生的用户界面开发变为坦途。 node-webkit node-webkit是一个基于chromium和node.js的应用程序开发工具。它不但支持你使用传统的HTML5+CSS3+JS方式来开发你的应用程序,还支持无缝的与Node.js集成,也就是说,所有的Node支持的与操作系统交互的功能,如网络连接,文件系统,操作系统资源访问等,以及Node之上的第三方库都可以在node-webkit中进行使用。 更好的是,node-webkit是一个跨平台的工具,你可以使用它构建出运行在Mac OS,Linux以及Windows下的应用程序。应用程序通过Node.js来进行与系统相关的访问,而用HTML5+CSS3进行用户界面部分的设计。 node-webkit未必是未来桌面应用的唯一方式,但是却是一个非常好的选择,特别对于已经熟知Web前端开发技术栈的众多开发者来说,无需学习一门新的语言,一切都被很大程度的简化了。 第一个node-webkit应用程序 开发node-webkit应用程序非常简单。在这里下载系统对应的版本。并确保对应的二进制文件(nwnw.exe)在系统的PATH之中。 创建一个新的目录,然后在该目录中创建一个package.json文件和一个index.html文件: $ mkdir -p hello-node-webkit $ cd hello-node-webkit $ touch package.json index.html package.json文件的内容如下: { "name": "hello-node-webkit", "version": "0.1.0", "main": "index.html" } index.html文件的内容如下: <html> <head> <title>Hello node-webkit</title> </head> <body> <div> <h1>Hello node-webkit</h1> </div> </body> </html> 然后将这两个文件打在一个zip格式压缩包中: $ zip -r hello-node-webkit.zip * 然后将这个文件重命名为hello-node-webkit.nw,最后使用node-webkit来启动这个应用程序。 $ ~/Tools/node-webkit.app/Contents/MacOS/node-webkit hello-node-webkit.nw 添加外部JS/CSS 接下来我们为这个页面添加一些外部的引用:CSS/JavaScript文件。首先创建两个目录style和script,然后分别创建文件如下:...

September 21, 2014 · 1 min · 邱俊涛 | Juntao Qiu