html5 - html css js等web前端技术可以用来写windows下客户端程序？

Question

http://www.wandoujia.com/join#job-1 在这个豌豆荚招聘前端工程师的页面中，说豌豆荚win版本是基于webkit开发的客户端软件，职位要求里说用web前端技术开发windows客户端，我是前端小白，只知道这些技术可以用来...

大家讲道理 · Answer

謝邀，不是很了解這方面，但還是要說些什麼。。有錯漏之處請大家指出。

豆瓣很早之前有一個叫做One Ring的開源項目，雖然已經很久沒有更新（不知道是不是已經放棄了），但是可作為一個典型的學習參考範例。

OneRing是一個跨平台的桌面應用開發庫，使用HTML5+CSS3製作使用者介面，用Javascript編寫互動邏輯，同時提供以寫web後端的技術編寫後台邏輯。

OneRing由框架和應用兩個部分組成。框架部分透過為本機視窗內嵌一個WebKit瀏覽器來提供各個作業系統的桌面展現。並提供了一致的js介面。應用程式部分是一個Web Server，負責應用邏輯，用html/css描述介面，用js提供使用者互動。

根據hongqn大表叔的解釋，做OneRing是為了使用Web技術來開發桌面應用（感覺很爽）。下面來看OneRing的出生迭代。

1.我們常見的Web技術是這樣的：

2.加入App Launcher，監聽本機端口，當執行程式時開啟系統預設瀏覽器：

3.上面的實作有一個問題，應用還是在瀏覽器中運行，感覺不像本地體驗，所以本地展示不能使用瀏覽器，封裝一下瀏覽器，使用IE的窗體：

4.IE must DIE!所以，用webkit取代ie來做本地介面：

5.但是要存取系統API怎麼辦呢？使用onering.js：

6.服務端避免防火牆的annoying：

OneRing應用的啟動流程：

應用程式啟動，載入框架運行時庫，註冊應用url的存取方法（如WSGI），並呼叫框架的loop函數。
loop函數會存取應用程式的 /init URL，得到一個json數據，描述初始應用程式視窗的相關參數，如位置、大小、視窗屬性、初始頁面url等。
框架根據該資料建立窗口，並讓該視窗內的瀏覽器存取初始頁面url，渲染使用者介面，然後等待UI事件。
使用者在介面上操作時，可以透過超連結改變整個視窗內容，也可以使用Ajax技術更新視窗內部分內容。
應用程式可以讓瀏覽器呼叫ONERING名字空間下的js函數，和作業系統進行交互，該名字空間由url onering://onering/onering.js 載入。
應用程式透過 bind(event, function) 函式監聽視窗更改大小、移動等作業系統UI事件。可以使用pub/sub機制主動推播訊息給瀏覽器。
呼叫 ONERING.exit() 可以退出應用；所有視窗都關閉後也會退出應用。

解釋很無力，看一個Python範例程式碼：

#!/usr/bin/env python
import json
import web
import onering

urls = (
    '/init', 'init',
    '/', 'index',
)

class init:
    def GET(self):
        web.header('Content-Type', 'application/json')
        return json.dumps({'width': 400, 'height': 300, 'url': '/'})

class index:
    def GET(self):
        web.header('Content-Type', 'text/html')
        return """


Hello, world!

"""

app = web.application(urls, globals())

if __name__ == '__main__':
    onering.register_wsgi_app("demo", app.wsgifunc())
    onering.loop("demo")

豌豆莢2.0時參考了OneRing的設計思路，重寫了OneRing（豌豆莢一直說開源出來也沒有開源-_-）。

豌豆莢2.0技術架構圖:

參考OneRing的通訊層，把通訊層分成三個部分，一個是前端，一個是後端服務，另一個是作業系統，定義了這三個端，六個方向的通訊實現的策略:

幾個OneRing相關連線：

OneRing專案地址
hongqn2010年時的一個slide
OSChina的一篇文章
Tide SDK
hongqn在豌豆莢的演講（前幾分鐘有講OneRing與豌豆莢的基情）
豌豆莢2.0技術坑

PHP中文网 · Answer

騰訊的瀏覽器、管家、QQ音樂等等這些的都是基於HTML等Web技術的

高洛峰 · Answer

windows8 APP支援前端技術，有API的，當然同時仍支援 C++/C#

阿神 · Answer

手機上有 PhoneGap, 可以用 HTML + CSS + Javascript 寫 Apps.(實際上在App內使用了系統的WebView, 然後加載你寫的HTML.)

電腦上有 TideSDK, 用處是一樣的.(自帶了WebKit.)

Wunderlist 是用 TideSDK 開發的. 其他詳見:
https://github.com/TideSDK/TideSDK/wiki/Applications-Using-TideSDK

PHP中文网 · Answer

坦白說我一直用 abode air

天蓬老师 · Answer

還能用mozilla xul runner

怪我咯 · Answer

v2ex上有問過這個問題，http://www.v2ex.com/t/46619，可以參考一下。

主要由以下幾個框架：

appjs
豆瓣的OneRing
Mozilla的Gecko
qooxdoo

PHP中文网 · Answer

程式就像瀏覽器一樣，嵌入一個指定的頁面嘍，這不是很簡單的道理嗎。

PHP中文网 · Answer

騰訊Web前端團隊 – TAT(Tencent Alloy Team) 也出了一個用web開發桌面app的引擎，叫webtop

http://www.alloyteam.com/2012/07/webtop-engine/

PHP中文网 · Answer

google有一個專案叫packaged app，用web開發技術開發出來的程式能夠在PC和行動客戶端上運行，當然，也可以在瀏覽器上運行，這就是chrome os的準備工作

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學