Node.js 進攻桌面開發
-
Upload
fred-chien -
Category
Technology
-
view
16.965 -
download
3
description
Transcript of Node.js 進攻桌面開發
![Page 1: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/1.jpg)
Node.js進攻桌面開發
用 HTML5 開發跨平台的單機版應用程式!
![Page 2: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/2.jpg)
錢逢祥
Fred Chien
![Page 3: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/3.jpg)
錢逢祥
Fred Chien
![Page 4: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/4.jpg)
fred-zone.blogspot.com
![Page 5: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/5.jpg)
cfsghost At gmail.com
![Page 6: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/6.jpg)
Mandice
![Page 7: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/7.jpg)
![Page 8: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/8.jpg)
How many people know
有多少人知道
![Page 9: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/9.jpg)
JavaScript 開發年資大調查
JavaScript 辛酸血淚史
![Page 10: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/10.jpg)
奇怪的運作原理
沿街叫罵喊打
![Page 11: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/11.jpg)
語法設計差
醜不拉嘰
![Page 12: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/12.jpg)
效能不彰
動作緩慢
![Page 13: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/13.jpg)
會 Copy & Paste 就可以自稱會寫
開發者都不開發者了
還記得首頁製作百寶箱這個可怕的箱子嗎?
![Page 14: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/14.jpg)
Nobody knows
殊不知
![Page 15: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/15.jpg)
Lovely
鐘樓怪人也有可人的一面
![Page 16: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/16.jpg)
史瑞克 仍可把到正妹
![Page 17: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/17.jpg)
V8 + APIs
Node.js
![Page 18: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/18.jpg)
百年修得同船渡
![Page 19: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/19.jpg)
Enough !?
你這樣就滿足了嗎?
![Page 20: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/20.jpg)
泡麵科技產業
當泡麵師父都可以來賣電腦
![Page 21: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/21.jpg)
我們怎麼可以止步不前?
![Page 22: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/22.jpg)
最少也應該吃泡麵洩恨
![Page 23: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/23.jpg)
然後努力搞點新花樣
![Page 24: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/24.jpg)
![Page 25: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/25.jpg)
JavaScript 已經征服三大洲
![Page 26: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/26.jpg)
前端、後端、雲端
![Page 27: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/27.jpg)
What's Next?
![Page 28: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/28.jpg)
桌面應用程式
JavaScript
![Page 29: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/29.jpg)
Think About It
![Page 30: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/30.jpg)
瀏覽器
性感的存在
![Page 31: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/31.jpg)
![Page 32: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/32.jpg)
HTML5CSS
WebGL
![Page 33: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/33.jpg)
HTML5CSS
WebGL
![Page 34: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/34.jpg)
HTML5CSS
WebGL
![Page 35: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/35.jpg)
My Application
HTML5CSS
WebGL
![Page 36: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/36.jpg)
window.open('page.html', *=no);
喔。不過就是沒邊框。
![Page 37: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/37.jpg)
誰都會
把瀏覽器扒光而已嘛
![Page 38: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/38.jpg)
![Page 39: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/39.jpg)
看到全裸的美女無動於衷?
![Page 40: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/40.jpg)
My Application
HTML5CSS
WebGL
![Page 41: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/41.jpg)
My Application
Node.js Inside
![Page 42: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/42.jpg)
node-webkit at github
node-webkit
![Page 43: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/43.jpg)
這意味著我不想要.....
![Page 44: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/44.jpg)
HTTP ServerNode.js
![Page 45: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/45.jpg)
HTTP ServerNode.js
GET/POST/...
RESTful APIsAjax....etc
![Page 46: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/46.jpg)
HTTP ServerNode.js
GET/POST/...
RESTful APIsAjax....etc
![Page 47: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/47.jpg)
![Page 48: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/48.jpg)
<html><head><title>Hey</title><script> var fs = require('fs'); fs.unlinkSync('/home/fred/聊天記錄');</script></head></html>
我希望這樣寫一支程式 killsecret.html
![Page 49: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/49.jpg)
node-webkit +
killsecret.html
![Page 50: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/50.jpg)
立即殺光我的小秘密
沒有用到 HTTP 方法
![Page 51: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/51.jpg)
![Page 52: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/52.jpg)
瀏覽器本身內建 Node.js
node-webkit
![Page 53: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/53.jpg)
絕對比 IE 支援更多 Web 標準
追隨著 Chromium 的腳步
![Page 54: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/54.jpg)
HTML5/CSS3/WebGL... etc
追隨著 Chromium 的腳步
![Page 55: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/55.jpg)
還可以跨平台 Windows/Linux/Mac
追隨著 Chromium 的腳步
![Page 56: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/56.jpg)
數以萬計的第三方模組
用 Node.js 熬七七四十九天
![Page 57: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/57.jpg)
經過後端考驗的穩定度
用 Node.js 熬七七四十九天
![Page 58: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/58.jpg)
將 JS 程式 Compile 成 Binary 檔
其他更多功能
![Page 59: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/59.jpg)
將 JS 程式打包進執行檔內
其他更多功能
![Page 60: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/60.jpg)
![Page 61: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/61.jpg)
Usage
如何打造桌面應用程式
![Page 62: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/62.jpg)
index.htmljs/img/css/
Your Application
![Page 63: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/63.jpg)
index.htmljs/img/css/
Your Applicationpackage.json
![Page 64: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/64.jpg)
{"name": "hello world","main": "index.html"
}
package.json
![Page 65: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/65.jpg)
Run
執行
![Page 66: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/66.jpg)
./nw /home/fred/myapp
nw [App Path]
![Page 67: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/67.jpg)
myapp.nw
你也可以打包成 ZIP 檔
![Page 68: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/68.jpg)
執行包成 ZIP 檔的程式
![Page 69: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/69.jpg)
./nw /home/fred/myapp.nw
nw [zip file]
![Page 70: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/70.jpg)
myapp.exe (standalone)
做成獨立執行檔
![Page 71: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/71.jpg)
Windows
copy /b nw.exe+app.nw myapp.exe
![Page 72: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/72.jpg)
Linux
$ cat /usr/bin/nw app.nw > myapp $ chmod +x myapp
![Page 73: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/73.jpg)
node-webkit
![Page 74: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/74.jpg)
node-webkit
myapp.nw
![Page 75: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/75.jpg)
node-webkit
myapp.nw
![Page 76: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/76.jpg)
Live Demo
![Page 77: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/77.jpg)
更多實例
![Page 78: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/78.jpg)
Markdown Editor
![Page 79: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/79.jpg)
Tool for Web Developer
![Page 80: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/80.jpg)
Reddit Client
![Page 81: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/81.jpg)
![Page 82: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/82.jpg)
附帶一提
![Page 83: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/83.jpg)
Node.js可以開發桌面應用
![Page 84: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/84.jpg)
舊電腦
Raspberry PiARM Board
...
![Page 85: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/85.jpg)
甚至使用 node-webit 跑 GUI 程式?
跑 Node.js 應用?
![Page 86: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/86.jpg)
純 JavaScript開發嵌入式系統?
![Page 87: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/87.jpg)
買了很多 ARM 板丟一邊的舉手?
不是每個人都搞 Porting
![Page 88: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/88.jpg)
Stem
![Page 89: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/89.jpg)
讓你無痛跑 Node.js 應用的嵌入式 OS
Stem
![Page 90: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/90.jpg)
Support x86 and ARM
Stem
![Page 91: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/91.jpg)
千萬別用中文單唸這個名字,感謝。
Stem
![Page 92: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/92.jpg)
當然也別用 Google Translate
Stem
![Page 93: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/93.jpg)
stem.mandice.org
Download
![Page 94: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/94.jpg)
懂 Node.js + Web 就可以 DIY 嵌入式應用
硬體這麼便宜
![Page 95: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/95.jpg)
懂 Node.js + Web 就可以 DIY 嵌入式應用
HW + Stem OS + Your App
![Page 96: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/96.jpg)
Enjoy It
![Page 97: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/97.jpg)
Question ?
![Page 98: Node.js 進攻桌面開發](https://reader031.fdocuments.net/reader031/viewer/2022012308/554f5cd3b4c905c8088b476b/html5/thumbnails/98.jpg)
Thanks !