2014年4月17日 星期四

【OSDC.TW 2014 簡報釋出】當 QML 娶了 Node.js

Standard

去年一年在萬里當兵,基隆對我來說就像旁邊的公園一樣,時常去走走逛逛,然後去廟口吃點東西,最後吹吹帶有奇怪味道的海風,然後依依不捨的回去萬里山中隱居。很遺憾,黃色小鴨在我退伍的第二天,才來到基隆,一直沒機會去看看牠,這也是為什麼我為這次的 Talk 取了一個這麼奇怪的題目。當然,在 OSDC 的活動上,大多數人無法理解這樣奇怪的主題,所以我也在場上直接換了一個時事標題,詳見已釋出的簡報檔:



本次簡報的主題,將提到如何使用 Node.js 開發一個 QML 應用程式,以及如何使用 Node.js 去括充 QML 的功能。QML 能讓開發者很快設計出極酷炫的 UI,但最大的問題是他擁有一個殘廢的 JavaScript 支援,所以任何額外的功能擴充,都必需學會 C/C++ 才能達成,相當的難以開發。

此外,在過去如果 QML 要與 Node.js 做橋接,通常都是以 Node.js 建一個本機的 HTTP Server,然後運用 QML 內建的仿 XHR(使用方式和 API 真的完全模仿),去本機 HTTP Server 要資料。或許這對很多 Web 開發者來說相當容易上手,但有趣的是,他不會有 jQuery,所以你要自己手刻 Ajax 的各種機制,甚至是 Long-polling,痛苦至極。

想一下,我們即便是要與本機溝通,取得或監聽機器上的一些資訊,都要使用 Long-polling,這未免也太小題大做,一點也不簡單和直接。所以這也是為什麼要做 Qtjs,讓我們可以用 Node.js 直接來開發 QML 的元件,直接與 QML 溝通和傳遞資料,而不必再透過 HTTP 的方式。

就以本次簡報的例子來說,我們用 QML 設計了一個 IRC 聊天室的前端,然後運用 Node.js 和第三方模組去連線到 IRC Server,最後把聊天內容收回來畫在 QML 的界面上。並使用 Node.js 設計了一個 QML 元件,使用方式如下:

IRC {
    onReceived: {
        console.log(nickname + ': ' + message);
    }
}

註:過去開發 QML 元件必需使用 C/C++,現在用 Node.js 即可開發。

這次的範例程式,可以在 Github 上取得:

https://github.com/cfsghost/osdc-qtjs-example


後記

不過,正當有點空可以去看牠時,就聽到牠破掉的消息,然後點子原創者和基隆主辦單位的爭執,讓人好生無言。我實在很難想像,泡在基隆帶有異味的海裡,是什麼樣的感覺。黃色小鴨來到基隆受苦受難,牠大概一輩子無法忘懷這次的經驗。

說實話,黃色小鴨與基隆一點不搭軋,這根本是種奇怪的組合呀!