桌面應用程式

Desktop Application

• 相對於 Web App

• 順暢
• 離線使用
• 挺不錯的界面

吧

跨平臺

妥協

• Write once run anywhere
• Learn once write anywhere
• Write everytime and mess up everywhere(X)

Web Technology Rocks!

Electron

運用網頁技術的

桌面應用程式框架

• 2013
• Atom Editor

大事記

• 2013.4 開始開發
• 2014.5 開源
• 2016.5 v1.0.0

"Evolution of Electron" by Cheng Zhao

組成

• Chromium
• Node.js (io.js)

用三神器來寫桌面程式

• HTML + CSS + JavaScript
• 跟 Web App 有 87% 像

那剩下 13% 呢？

Node.js modules

+

原生 API (作業系統層)

Node.js Modules

const os = require('os');
const path = require('path');
 
console.log(path.join(__dirname, 'src'))
// ...

以及 npm 上的海量套件

原生 API

應用程式選單(menu)、系統列(tray)、桌面通知(Notification)等等

多行程架構

Main Process

&

Renderer Process

對比

• Chromium 的視窗
• BrowserWindow => Renderer Process

               +--------------------+
               |                    |
               |   Main Process     |
               |                    |
               ++-----------------+-+
                |                 |
                |                 |
   +------------+------+     +----+--------------+
   |                   |     |                   |
   |  Renderer Process |     |  Renderer Process |
   |                   |     |                   |
   +-------------------+     +-------------------+

https://github.com/ilyavorobiev/atom-docs

原生 API 只能在 Main Process 呼叫

Renderer process 透過

ipc 或是 remote

來使用原生 API

小結

• Electron 用網頁技術來開發桌面應用程式
• Electron 可以理解成 Chromium + Node.js + 原生 API

• 懶的開平板的時候看漫畫用
• Chrome Extension & Electron (Postman 啟發)
• 定時工作：
  • background.js (chrome)
  • main process (electron)

兩份 index.html

<script>window.PLATFORM = 'chrome'</script>

然後

if (window.PLATFORM === 'chrome') {
  // DO THIS
} else {
  // DO THAT
}

• Vue.js
• OAuth

處裡 OAuth 跳轉

const { protocol } = require('electron')
protocol.registerStringProtocol('puraku')

puraku://oauth_callback?oauth_token=…&oauth_verifier=…

• 不只是 Nativefier => 快速鍵、多視窗等等
• 自訂程式外框
• 離線工具使用(未來展望啦)