狠狠撸

狠狠撸Share a Scribd company logo
用最潮的 JavaScript

盡情開發 KDE/Qt 程式



       Fred Chien
首先声明
今天我沒有梗了
雖然昨天看了一晚的新聞找靈感
加上是技术议程
肯定无趣
我们何不速战速决
成為下午茶解放军
我是誰?
Who Am I
Fred Chien
   钱逢祥
就是昨天发表退学宣言那位
就是昨天发表退学宣言那位
後來才聽說今年有 Youtube 全球線上直播
不過我現在 R2
无论如何
Businessman
  奸商現在式
要干大事业就找我!
cfsghost At gmail.com
Blog
fred-zone.blogspot.com
Startup in Taiwan
    Mandice Software.
       MANDICE.COM
CEO, Mandice
慣C

救火    Startup            惡搞
     Mandice Software.



         創新
潮
回到今天正题
征服 KDE/Qt
  用 Node.js
等等等等等等等等!!
   等一下!!!
怎麼又是你!?
你講 GNOME
你搞 LXDE
KDE 的場子還來呀?
   到底哪一国的?
...
身為专业的走路工
   你知道
正題
Node.js + Qt
Why Don't Use QtQuick?
Qt 內建的 JavaScript Solution 不好嗎?
我想答案显而易见
Node.js 有上萬個 Module
     有千军万马支援
QtQuick 開發者是孤軍奮戰
    什麼都要自己想办法
现在更是   孤兒軍 奮戰
  Nokia 脫手了 Qt 以後
在 JavaScript 這件事上
Resource, Developer, Documentation...
不是同一個數量級
 與 Node.js 相比
不過
不可否認
Qt 仍然很優秀
  我们得承认
穩定。跨平台。功能完備。
  熱情。臉蛋正。身材火辣。
岂有不染指一下的理由?
Node.js + Qt = ?
Node-Qt
github.com/arturadib/node-qt
Architecture


               JavaScript Application

                  Node-qt Add-on
               Qt Library       Node.js
                       Linux
Qt Works on Several Platforms


            JavaScript Application

               Node-qt Add-on
            Qt Library       Node.js


         MS Windows/Linux/MacOS/...
Live Demo
反正 demo code 不是我寫的
npm install node-qt
  請記得一定要先裝 Qt Library
Sample code
var qt = require('node-qt');
var app = new qt.Application;
var window = new qt.QWidget;

// Prevent objects from being GC'd
global.app = app;
global.window = window;

window.resize(100, 100);
window.show();

// Event Loop
setInterval(app.processEvents, 0);
Normal Program Flow


       Execute Program

         Do Something

                Exit
Normal Program Flow


         Execute Program
Window



          Do Something

                Exit
GUI Application Flow Should Be

            Execute Program


             Do Something



                  LOOP
                          Process Events
Sample code
var qt = require('node-qt');
var app = new qt.Application;
var window = new qt.QWidget;

// Prevent objects from being GC'd
global.app = app;
global.window = window;




                                     !
window.resize(100, 100);
window.show();

// Event Loop

setInterval(app.processEvents, 0);
Event Handler
    事件处理
Sample code for PaintEvent
window.paintEvent(function() {

      /* Do Something ... */

});
Using PaintEvent
window.paintEvent(function() {

      var p = new qt.QPainter();
      p.begin(window);
      p.drawText(20, 30, 'Hello Qt!');
      p.end();

});
mousePressEvent

mouseReleaseEvent

 mouseMoveEvent

  keyPressEvent

 keyReleaseEvent

       ...
Live Demo
   Again
Node-Qt
github.com/arturadib/node-qt
支援度尚不完整
  v0.0.1
肯定有很多問題
  v0.0.1
四個月前
 v0.0.2
不要太期待
 v0.0.2
More Demo?
原作者不會投入太多時間
  但我有空會去補完它
Q&A
Thanks

More Related Content

What's hot (20)

Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
?
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
?
Node.js 淺談socket.io
Node.js   淺談socket.ioNode.js   淺談socket.io
Node.js 淺談socket.io
Simon Su
?
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Fred Chien
?
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
?
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
LainZQ
?
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
?
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automation
Ivan Wei
?
Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出
Eric Xiao
?
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
Hamilton Wong
?
全新的蚕迟5
全新的蚕迟5全新的蚕迟5
全新的蚕迟5
Yunqiao Yin
?
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
?
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
?
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解
twMVC
?
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
tsunghaolee
?
猴子也能懂的狈辞诲别.箩蝉
猴子也能懂的狈辞诲别.箩蝉猴子也能懂的狈辞诲别.箩蝉
猴子也能懂的狈辞诲别.箩蝉
HopenglishRD
?
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
?
五行完成网页多国语系
五行完成网页多国语系五行完成网页多国语系
五行完成网页多国语系
amostsai
?
Nodejs introduce - using Socket.io
Nodejs introduce - using Socket.ioNodejs introduce - using Socket.io
Nodejs introduce - using Socket.io
Caesar Chi
?
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with WebpackSITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
昱安 周
?
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
?
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
?
Node.js 淺談socket.io
Node.js   淺談socket.ioNode.js   淺談socket.io
Node.js 淺談socket.io
Simon Su
?
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Fred Chien
?
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
?
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
LainZQ
?
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
?
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automation
Ivan Wei
?
Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出
Eric Xiao
?
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
Hamilton Wong
?
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
?
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
?
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解
twMVC
?
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
tsunghaolee
?
猴子也能懂的狈辞诲别.箩蝉
猴子也能懂的狈辞诲别.箩蝉猴子也能懂的狈辞诲别.箩蝉
猴子也能懂的狈辞诲别.箩蝉
HopenglishRD
?
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
?
五行完成网页多国语系
五行完成网页多国语系五行完成网页多国语系
五行完成网页多国语系
amostsai
?
Nodejs introduce - using Socket.io
Nodejs introduce - using Socket.ioNodejs introduce - using Socket.io
Nodejs introduce - using Socket.io
Caesar Chi
?
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with WebpackSITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
昱安 周
?

Viewers also liked (13)

Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.js
Fred Chien
?
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js Module
Fred Chien
?
OwaNEXT
OwaNEXTOwaNEXT
OwaNEXT
Fred Chien
?
Stem OS Proposal
Stem OS ProposalStem OS Proposal
Stem OS Proposal
Fred Chien
?
软体人甘苦谈
软体人甘苦谈软体人甘苦谈
软体人甘苦谈
Fred Chien
?
QML + Node.js
QML + Node.jsQML + Node.js
QML + Node.js
Fred Chien
?
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
Fred Chien
?
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
Fred Chien
?
Qml 培訓課程 multi media
Qml 培訓課程   multi mediaQml 培訓課程   multi media
Qml 培訓課程 multi media
diro fan
?
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScriptEnjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScript
Fred Chien
?
Three.js 一場從2D變成3D的冒險
Three.js  一場從2D變成3D的冒險Three.js  一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
智遠 成
?
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Jack Yang
?
Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.js
Fred Chien
?
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js Module
Fred Chien
?
软体人甘苦谈
软体人甘苦谈软体人甘苦谈
软体人甘苦谈
Fred Chien
?
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
Fred Chien
?
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
Fred Chien
?
Qml 培訓課程 multi media
Qml 培訓課程   multi mediaQml 培訓課程   multi media
Qml 培訓課程 multi media
diro fan
?
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScriptEnjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScript
Fred Chien
?
Three.js 一場從2D變成3D的冒險
Three.js  一場從2D變成3D的冒險Three.js  一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
智遠 成
?
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Jack Yang
?

Similar to 用最潮的 Java script 盡情開發 kde qt 程式 (20)

開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
Sheng-Hao Ma
?
使用Qt+和open gl?+创建跨平台可视化ui
使用Qt+和open gl?+创建跨平台可视化ui使用Qt+和open gl?+创建跨平台可视化ui
使用Qt+和open gl?+创建跨平台可视化ui
lsdsjy
?
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
Ben Lue
?
做卓有成效的程序员
做卓有成效的程序员做卓有成效的程序员
做卓有成效的程序员
Lv Jian
?
Qt gui编程
Qt gui编程Qt gui编程
Qt gui编程
hangang123
?
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
Chris Wang
?
初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf
gdscnycu
?
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCUFlutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
秀吉(Hsiu-Chi) 蔡(Tsai)
?
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse Engineering
YC Ling
?
Python&GUI
Python&GUIPython&GUI
Python&GUI
Leo Zhou
?
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCUFlutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
秀吉(Hsiu-Chi) 蔡(Tsai)
?
09 creating windows phone game with cocos2d-xna
09   creating windows phone game with cocos2d-xna09   creating windows phone game with cocos2d-xna
09 creating windows phone game with cocos2d-xna
乐费 胡
?
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
?
QML + Arduino & Leap Motion
QML + Arduino & Leap MotionQML + Arduino & Leap Motion
QML + Arduino & Leap Motion
diro fan
?
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
Will Huang
?
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
Hsu Ping Feng
?
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
jay li
?
骋迟办+陷阱与进阶技巧
骋迟办+陷阱与进阶技巧骋迟办+陷阱与进阶技巧
骋迟办+陷阱与进阶技巧
tuhaihe
?
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
Ben Lue
?
開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
Sheng-Hao Ma
?
使用Qt+和open gl?+创建跨平台可视化ui
使用Qt+和open gl?+创建跨平台可视化ui使用Qt+和open gl?+创建跨平台可视化ui
使用Qt+和open gl?+创建跨平台可视化ui
lsdsjy
?
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
以贬罢惭尝5和颁翱滨惭翱罢滨翱狈打造跨平台础辫辫
Ben Lue
?
做卓有成效的程序员
做卓有成效的程序员做卓有成效的程序员
做卓有成效的程序员
Lv Jian
?
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
Chris Wang
?
初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf
gdscnycu
?
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse Engineering
YC Ling
?
09 creating windows phone game with cocos2d-xna
09   creating windows phone game with cocos2d-xna09   creating windows phone game with cocos2d-xna
09 creating windows phone game with cocos2d-xna
乐费 胡
?
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
?
QML + Arduino & Leap Motion
QML + Arduino & Leap MotionQML + Arduino & Leap Motion
QML + Arduino & Leap Motion
diro fan
?
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
Will Huang
?
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
Hsu Ping Feng
?
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
jay li
?
骋迟办+陷阱与进阶技巧
骋迟办+陷阱与进阶技巧骋迟办+陷阱与进阶技巧
骋迟办+陷阱与进阶技巧
tuhaihe
?
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
Ben Lue
?

用最潮的 Java script 盡情開發 kde qt 程式