SlideShare a Scribd company logo
1 of 98
Download to read offline
Node.js
    進攻桌面開發
用 HTML5 開發跨平台的單機版應用程式!
Fred Chien
   錢逢祥
Fred Chien
   錢逢祥
fred-zone.blogspot.com
cfsghost At gmail.com
Mandice
有多少人知道
How many people know
JavaScript 辛酸血淚史
  JavaScript 開發年資大調查
沿街叫罵喊打
奇怪的運作原理
醜不拉嘰
語法設計差
動作緩慢
效能不彰
開發者都不開發者了
會 Copy & Paste 就可以自稱會寫




    還記得首頁製作百寶箱這個可怕的箱子嗎?
殊不知
Nobody knows
鐘樓怪人也有可人的一面
    Lovely
史瑞克 仍可把到正妹
Node.js
V8 + APIs
百年修得同船渡
你這樣就滿足了嗎?
   Enough !?
當泡麵師父都可以來賣電腦
    泡麵科技產業
我們怎麼可以止步不前?
最少也應該吃泡麵洩恨
然後努力搞點新花樣
JavaScript
已經征服三大洲
前端、後端、雲端
What's Next?
JavaScript
 桌面應用程式
Think About It
性感的存在
 瀏覽器
HTML5
 CSS
WebGL
HTML5
 CSS
WebGL
HTML5
 CSS
WebGL
My Application




                 HTML5
                  CSS
                 WebGL
喔。不過就是沒邊框。
window.open('page.html', *=no);
把瀏覽器扒光而已嘛
   誰都會
看到全裸的美女無動於衷?
My Application




                 HTML5
                  CSS
                 WebGL
My Application




         Node.js Inside
node-webkit
node-webkit at github
這意味著我不想要.....
HTTP Server
  Node.js
HTTP Server
                     Node.js
GET/POST/..
.
              RESTful APIs
              Ajax
              ....etc
HTTP Server
                     Node.js
GET/POST/..
.
              RESTful APIs
              Ajax
              ....etc
我希望這樣寫一支程式 killsecret.html

<html>
<head>
<title>Hey</title>
<script>
   var fs = require('fs');
   fs.unlinkSync('/home/fred/聊天記錄');
</script>
</head>
</html>
node-webkit
       +
killsecret.html
立即殺光我的小秘密
 沒有用到 HTTP 方法
node-webkit
瀏覽器本身內建 Node.js
追隨著 Chromium 的腳步
  絕對比 IE 支援更多 Web 標準
追隨著 Chromium 的腳步
  HTML5/CSS3/WebGL... etc
追隨著 Chromium 的腳步
 還可以跨平台 Windows/Linux/Mac
用 Node.js 熬七七四十九天
    數以萬計的第三方模組
用 Node.js 熬七七四十九天
    經過後端考驗的穩定度
其他更多功能
將 JS 程式 Compile 成 Binary 檔
其他更多功能
將 JS 程式打包進執行檔內
如何打造桌面應用程式
    Usage
Your Application



          index.html
          js/
          img/
          css/
Your Application
                   package.json

          index.html
          js/
          img/
          css/
package.json

{
    "name": "hello world",
    "main": "index.html"
}
執行
Run
nw [App Path]
 ./nw /home/fred/myapp
你也可以打包成 ZIP 檔
    myapp.nw
執行包成 ZIP 檔的程式
nw [zip file]
./nw /home/fred/myapp.nw
做成獨立執行檔
myapp.exe (standalone)
copy /b nw.exe+app.nw myapp.
             exe
          Windows
$ cat /usr/bin/nw app.nw >
myapp
$ chmod +x myapp
              Linux
node-webkit
node-webkit


myapp.nw
node-webkit


myapp.nw
Live Demo
更多實例
Markdown Editor
Tool for Web Developer
Reddit Client
附帶一提
Node.js
可以開發桌面應用
舊電腦
Raspberry Pi
 ARM Board
    ...
跑 Node.js 應用?
甚至使用 node-webit 跑 GUI 程式?
純 JavaScript
開發嵌入式系統?
不是每個人都搞 Porting
 買了很多 ARM 板丟一邊的舉手?
Stem
Stem
讓你無痛跑 Node.js 應用的嵌入式 OS
Stem
Support x86 and ARM
Stem
千萬別用中文單唸這個名字,感謝。
Stem
當然也別用 Google Translate
Download
stem.mandice.org
硬體這麼便宜
懂 Node.js + Web 就可以 DIY 嵌入式應用
HW + Stem OS + Your App
懂 Node.js + Web 就可以 DIY 嵌入式應用
Enjoy It
Question ?
Thanks !

More Related Content

What's hot

聖經人物 路得
聖經人物 路得聖經人物 路得
聖經人物 路得Lydia Tseng
 
新約概論(上)5. 路加福音
新約概論(上)5. 路加福音新約概論(上)5. 路加福音
新約概論(上)5. 路加福音Jian-Yu Fisher Ke
 
Fresher java j2ee resume
Fresher java j2ee resumeFresher java j2ee resume
Fresher java j2ee resumeVikram Rawani
 
基督徒的金錢觀
基督徒的金錢觀基督徒的金錢觀
基督徒的金錢觀gaanchurch
 
2023年3月期第3四半期決算プレゼンテーション
2023年3月期第3四半期決算プレゼンテーション2023年3月期第3四半期決算プレゼンテーション
2023年3月期第3四半期決算プレゼンテーションKDDI
 
jjPlus wireless power transfer overivew
jjPlus wireless power transfer overivewjjPlus wireless power transfer overivew
jjPlus wireless power transfer overivewGary Chi
 
sedで複数行処理 使ってみようNを
sedで複数行処理 使ってみようNをsedで複数行処理 使ってみようNを
sedで複数行処理 使ってみようNをTakaaki Hirano
 
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇Shengyou Fan
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developingJawhar Ali
 
Secrets of Performance Tuning Java on Kubernetes
Secrets of Performance Tuning Java on KubernetesSecrets of Performance Tuning Java on Kubernetes
Secrets of Performance Tuning Java on KubernetesBruno Borges
 
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話オンプレ&HTTP Proxyな環境でRancherOS入れてみた話
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話YASUKAZU NAGATOMI
 
Introduction to gRPC
Introduction to gRPCIntroduction to gRPC
Introduction to gRPCPrakash Divy
 
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래Kiheon Shin
 
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성Kiheon Shin
 
フロー技術によるネットワーク管理
フロー技術によるネットワーク管理フロー技術によるネットワーク管理
フロー技術によるネットワーク管理Motonori Shindo
 

What's hot (17)

聖經人物 路得
聖經人物 路得聖經人物 路得
聖經人物 路得
 
新約概論(上)5. 路加福音
新約概論(上)5. 路加福音新約概論(上)5. 路加福音
新約概論(上)5. 路加福音
 
ELECTRODYANAMIC TETHER
ELECTRODYANAMIC TETHERELECTRODYANAMIC TETHER
ELECTRODYANAMIC TETHER
 
Fresher java j2ee resume
Fresher java j2ee resumeFresher java j2ee resume
Fresher java j2ee resume
 
基督徒的金錢觀
基督徒的金錢觀基督徒的金錢觀
基督徒的金錢觀
 
2023年3月期第3四半期決算プレゼンテーション
2023年3月期第3四半期決算プレゼンテーション2023年3月期第3四半期決算プレゼンテーション
2023年3月期第3四半期決算プレゼンテーション
 
jjPlus wireless power transfer overivew
jjPlus wireless power transfer overivewjjPlus wireless power transfer overivew
jjPlus wireless power transfer overivew
 
sedで複数行処理 使ってみようNを
sedで複数行処理 使ってみようNをsedで複数行処理 使ってみようNを
sedで複数行処理 使ってみようNを
 
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
 
Secrets of Performance Tuning Java on Kubernetes
Secrets of Performance Tuning Java on KubernetesSecrets of Performance Tuning Java on Kubernetes
Secrets of Performance Tuning Java on Kubernetes
 
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話オンプレ&HTTP Proxyな環境でRancherOS入れてみた話
オンプレ&HTTP Proxyな環境でRancherOS入れてみた話
 
NW入門
NW入門NW入門
NW入門
 
Introduction to gRPC
Introduction to gRPCIntroduction to gRPC
Introduction to gRPC
 
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래
2021.12.22 디센트럴랜드의 시작과 현재, 그리고 미래
 
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성
2022.01.19 크리에이티브 관점에서 본 NFT의 잠재성
 
フロー技術によるネットワーク管理
フロー技術によるネットワーク管理フロー技術によるネットワーク管理
フロー技術によるネットワーク管理
 

Similar to Node.js 進攻桌面開發

这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkitLainZQ
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web FrameworkFred Chien
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swttka
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介GO LL
 
Node js feat pegasus
Node js feat pegasusNode js feat pegasus
Node js feat pegasuscnfi
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 
Node.js长连接开发实践
Node.js长连接开发实践Node.js长连接开发实践
Node.js长连接开发实践longhao
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630Yeh Yung-Hsin
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境Will Huang
 
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》easychen
 
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式Fred Chien
 
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionicStudy4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionicKyle Shen
 
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍haozes
 
Node js实践
Node js实践Node js实践
Node js实践myzykj
 

Similar to Node.js 進攻桌面開發 (20)

这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web Framework
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
Node js feat pegasus
Node js feat pegasusNode js feat pegasus
Node js feat pegasus
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 
Node.js长连接开发实践
Node.js长连接开发实践Node.js长连接开发实践
Node.js长连接开发实践
 
網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630
 
All about NodeJS
All about NodeJSAll about NodeJS
All about NodeJS
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
Node分享 展烨
Node分享 展烨Node分享 展烨
Node分享 展烨
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
 
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
 
用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式用最潮的 Java script 盡情開發 kde qt 程式
用最潮的 Java script 盡情開發 kde qt 程式
 
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionicStudy4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
 
Html5
Html5Html5
Html5
 
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍
 
App house
App houseApp house
App house
 
Node js实践
Node js实践Node js实践
Node js实践
 

More from Fred Chien

MakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorMakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorFred Chien
 
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Fred Chien
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門Fred Chien
 
Koa 正在等一個人
Koa 正在等一個人Koa 正在等一個人
Koa 正在等一個人Fred Chien
 
Stem OS Proposal
Stem OS ProposalStem OS Proposal
Stem OS ProposalFred Chien
 
Stem is JavaScript OS
Stem is JavaScript OSStem is JavaScript OS
Stem is JavaScript OSFred Chien
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binaryFred Chien
 
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!Fred Chien
 
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 JavaScriptFred Chien
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談Fred Chien
 
Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.jsFred Chien
 
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js ModuleFred Chien
 

More from Fred Chien (14)

MakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorMakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
 
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
 
Koa 正在等一個人
Koa 正在等一個人Koa 正在等一個人
Koa 正在等一個人
 
OwaNEXT
OwaNEXTOwaNEXT
OwaNEXT
 
QML + Node.js
QML + Node.jsQML + Node.js
QML + Node.js
 
Stem OS Proposal
Stem OS ProposalStem OS Proposal
Stem OS Proposal
 
Stem is JavaScript OS
Stem is JavaScript OSStem is JavaScript OS
Stem is JavaScript OS
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
 
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!
 
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
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談
 
Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.js
 
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js Module
 

Node.js 進攻桌面開發