Web前端的現(xiàn)狀目前Web前端的現(xiàn)狀較之5～6年前，簡直不能同日而語：從所使用的技術(shù)、工具、框架到開發(fā)一個產(chǎn)品所需要付出的工作量，從前端開發(fā)從業(yè)人員的數(shù)量到Web應(yīng)用的數(shù)量，從企業(yè)對于Web前端的重要程度的認識到Web實際上為企業(yè)帶來的回報，一切都有了翻天覆地的變化。 借助HTML5+CSS3的普及，加上一些開箱即用的CSS框架（如bootstrap，foundation等）支持，人們已經(jīng)可以非常容易地從零開始搭建一個Web應(yīng)用的前端。一個在UI方面非常業(yè)余的程序員也可以很快做出一個像模像樣的用戶界面。而另一方面，基于操作系統(tǒng)原生API，要想設(shè)計并實現(xiàn)一個桌面應(yīng)用，需要的付出則遠遠超過同水平的Web界面。 Webkit瀏覽器內(nèi)核Webkit作為最受歡迎的瀏覽器內(nèi)核，自然有非常多的port。比如GTK+對它的port – WebkitGTK，以及構(gòu)建在WebkitGTK之上的Python的bind（即Python對WebkitGTK的本地動態(tài)庫的一個包裝，可以使用Python的語法來編寫代碼，但是底層仍然使用WebkitGTK自身的動態(tài)庫）。使用WebkitGTK的Python版本，開發(fā)人員可以用HTML+CSS來開發(fā)應(yīng)用，然后寫一點Python腳本，最后將其運行在桌面上。 這里有個早期的例子來教你如何寫一個所見即所得的編輯器。桌面應(yīng)用開發(fā)中，用戶界面的復雜性一直是一個難題，而這種方式可以降低很多用戶界面開發(fā)的復雜性，將界面開發(fā)交給更加靈活、更加容易編寫和調(diào)試的方式——HTML+CSS。 這種模式下基本的開發(fā)流程是編寫一個HTML頁面（作為程序入口），然后在這個頁面上引入額外的CSS（界面風格）和JavaScript（動作），然后將這些資源交給工業(yè)級瀏覽器內(nèi)核Webkit來渲染 。 這個過程和在瀏覽器中訪問該文件并無二致，但是有兩個額外的好處。
node-webkit簡介node-webkit是一個基于chromium和node.js的應(yīng)用程序開發(fā)工具。它不但支持使用傳統(tǒng)的HTML5+CSS3+JS方式來開發(fā)應(yīng)用程序，還支持無縫地與Node.js集成，也就是說，所有的Node支持的與操作系統(tǒng)交互的功能，如網(wǎng)絡(luò)連接，文件系統(tǒng)，操作系統(tǒng)資源訪問等，以及Node之上的第三方庫都可以在node-webkit中進行使用。 更好的是，node-webkit是一個跨平臺的工具，你可以使用它構(gòu)建出運行在Mac OS，Linux以及Windows下的應(yīng)用程序。應(yīng)用程序通過Node.js來進行與系統(tǒng)相關(guān)的訪問，而用HTML5+CSS3進行用戶界面部分的設(shè)計。 node-webkit未必是未來桌面應(yīng)用的唯一方式，但是卻是一個非常好的選擇，特別對于已經(jīng)熟知Web前端開發(fā)技術(shù)棧的眾多開發(fā)者來說，無需學習一門新的語言，一切都在很大程度上得到了簡化。 第一個node-webkit應(yīng)用程序開發(fā)node-webkit應(yīng)用程序非常簡單。在這里下載系統(tǒng)對應(yīng)的版本。并確保對應(yīng)的二進制文件（nwnw.exe)在系統(tǒng)的PATH之中。 創(chuàng)建一個新的目錄，然后在該目錄中創(chuàng)建一個package.json文件和一個index.html文件： $ mkdir -p hello-node-webkit $ cd hello-node-webkit $ touch package.json index.html package.json文件的內(nèi)容如下： {
"name": "hello-node-webkit",
"version": "0.1.0",
"main": "index.html"
}
index.html文件的內(nèi)容如下： <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來啟動這個應(yīng)用程序。 $ ~/Tools/node-webkit.app/Contents/MacOS/node-webkit hello-node-webkit.nw
添加外部JS/CSS接下來我們?yōu)檫@個頁面添加一些外部的引用：CSS/JavaScript文件。首先創(chuàng)建兩個目錄style和script，然后分別創(chuàng)建文件如下： ├── index.html
├── package.json
├── script
│ ├── app.js
│ └── jquery.min.js
└── style
└── style.css
其中，style.css定義了h1的簡單樣式： h1 {
font-size: 20px;
color: #999999;
}
而app.js則注冊了一個簡單的事件處理器： $(function() {
$("h1").on("click", function() {
alert("Heading 1 is clicked");
});
});
此時的index.html修改如下： <html>
<head>
<title>Hello node-webkit</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div>
<h1>Hello node-webkit</h1>
</div>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/app.js"></script>
</body>
</html>
還是按照上一小節(jié)的命令完成打包，改名，啟動之后。點擊h1元素時，會彈出對話框如下：
在這個例子中，我們使用了外部的css文件來添加樣式，還引入了jQuery作為訪問DOM元素的工具，最后還使用了一段調(diào)用jQuery的JavaScript代碼。 構(gòu)建腳本你可能已經(jīng)注意到了，使用node-webkit開發(fā)非常方便。但是這一系列的動作（修改HTML+CSS，壓縮打包，改名，啟動）等有一部分重復工作，我們可以將其自動化。 好在已經(jīng)有了一個很好用的grunt的插件：grunt-node-webkit-builder，這個插件可以幫助我們自動執(zhí)行壓縮打包這些動作。 $ npm install grunt-node-webkit-builder 然后定義一個Gruntfile.js，這個文件中指定源文件（所有的HTML，JavaScript代碼，CSS文件）所在目錄，目標文件所在目錄，需要構(gòu)建的應(yīng)用程序指定的操作系統(tǒng)平臺等： module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
nodewebkit: {
options: {
platforms: ['osx'],
buildDir: 'builds',
},
src: ['app/**/*']
}
});
grunt.loadNpmTasks('grunt-node-webkit-builder');
grunt.registerTask('default', ['nodewebkit']);
};
這樣，我們修改之后，就可以直接執(zhí)行： $ grunt 進行打包了。比如在Mac下，構(gòu)建出來的應(yīng)用位于builds/<app-name>/osx目錄下，要啟動該應(yīng)用只需要在命令行輸入下列命令: $ open builds/hello-node-webkit/osx/hello-node-webkit.app 或者在Finder中雙擊打開即可。 可以看到上例中的應(yīng)用程序還有濃重的瀏覽器痕跡，比如地址欄，刷新按鈕，甚至還有一個DevTools的按鈕。
我們可以通過修改package.json來指定： {
"name": "hello-node-webkit",
"version": "0.1.0",
"main": "index.html",
"window": {
"toolbar": false,
"width": 800,
"height": 600
}
}
這樣的界面就更像是一個桌面應(yīng)用了：
到目前為止，這個小的應(yīng)用程序并沒有什么有趣的特性，用戶界面也毫無美感，但是有了這些基本知識和工具之后，我們就可以開始更進一步的開發(fā)了。除了使用既有的CSS框架來完成用戶界面的美化，我們還會使用node.js訪問系統(tǒng)資源來構(gòu)建真實的應(yīng)用程序。 一個實際的小例子gist是一個非常好用的代碼片段管理工具，Github的用戶可以將自己的代碼片段保存為一個gist，每個gist中可以包含若干個文件，每個gist可以通過一個唯一的URL指定，比如：https://gist.github.com/abruzzi/44550f2b4cb812b19701。 我們這里將開發(fā)一個具體的小例子：通過Node.js請求到一個gist，并將其中的所有文件名都列出來，最終的結(jié)果看起來是這樣的：
首先我們需要安裝一個npm的包：gisty，這個包提供的API可以方便地獲取gist。安裝命令如下： $ cd app/ $ npm install gisty 注意此處的app目錄為我們的應(yīng)用目錄，其中包含了HTML文件，CSS，及JavaScript等，在這個目錄中執(zhí)行npm install會創(chuàng)建一個node_modules目錄，gisty會安裝在這個目錄中。 然后我們修改scripts/app.js，內(nèi)容如下： var Gisty = require('gisty');
$(function() {
var gist = new Gisty({
username: 'abruzzi'
});
gist.fetch('44550f2b4cb812b19701', function(error, gist) {
if (error) {
throw new Error(error);
}
buildGistItem(gist);
});
function buildGistItem(gist) {
var gists = $("#gists");
for (filename in gist.files) {
var gistItem = $("<li></li>");
gistItem.text(filename);
gistItem.appendTo(gists);
}
}
});
注意此處的require語句，這正是使用node-webkit的強大之處：可以在“前端”代碼中使用“后端”代碼。gisty需要指定用戶名來創(chuàng)建一個Gisty對象， 然后在這個對象上調(diào)用fetch方法，并將gist的ID傳入來獲取gist對象。gist對象上有files屬性，其中保存該gist對應(yīng)的文件名和文件內(nèi)容。 使用gisty的API獲取到gist列表之后，將其插入在頁面元素上。HTML頁面上聲明了一個ID為gists的ul，然后在app.js中動態(tài)的創(chuàng)建li來添加到該ul上。 <html>
<head>
<title>Hello node-webkit</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div>
<h1>Gist #44550f2b4cb812b19701</h1>
</div>
<div>
<ul id="gists"></ul>
</div>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/app.js"></script>
</body>
</html>
作者簡介邱俊濤，ThoughtWorks咨詢師，喜歡技術(shù)，崇尚輕量級的開發(fā)/工作方式，痛恨冗長的會議和各種繁瑣的流程。他還是《JavaScript核心概念及實踐》一書的作者，個人博客是http://，博客上經(jīng)常會有各種技術(shù)的分享。 給InfoQ中文站投稿或者參與內(nèi)容翻譯工作，請郵件至editors@cn.。也歡迎大家通過新浪微博（@InfoQ，@丁曉昀），微信（微信號：InfoQChina）關(guān)注我們，并與我們的編輯和其他讀者朋友交流。 【QCon北京2016】《七周七并發(fā)模型》作者Paul Butcher、Dojo Toolkit聯(lián)合發(fā)起人Dylan Schiemann、高盛技術(shù)部VP林文、峰瑞資本技術(shù)合伙人覃超、LinkedIn Java性能優(yōu)化專家莊振運、Rust貢獻者莊曉立等專家將聚首QCon，分享最佳技術(shù)實踐，更多精彩?，F(xiàn)在購票立減680，5人之上團購優(yōu)惠多多。 |
|
|
