用 Electron

實踐跨平臺桌面程式



Yukai Huang @ SITCON 2017

關於我

  • 通稱 Yukai
  • XDDeveloper aka 自嗨型開發者
  • HackMD 貢獻者之一（沾光一下）
  • Yukaii on GitHub
    • 多一個 i 是因為 Yukai 已經有人用啦
  • Electron
  • 跨平臺
  • 桌面

桌面應用程式

Desktop Application

  • 相對於 Web App

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

吧

跨平臺

妥協

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

Web Technology Rocks!

Electron

運用網頁技術的

桌面應用程式框架

展示

Outline

  • Electron 是什麼
  • 火力展示及推坑

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 上的海量套件

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

原生 API

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

多行程架構

Main Process

&

Renderer Process

對比

  • Chromium 的視窗
  • BrowserWindow => Renderer Process
               +--------------------+
               |                    |
               |   Main Process     |
               |                    |
               ++-----------------+-+
                |                 |
                |                 |
   +------------+------+     +----+--------------+
   |                   |     |                   |
   |  Renderer Process |     |  Renderer Process |
   |                   |     |                   |
   +-------------------+     +-------------------+

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

原生 API 只能在 Main Process 呼叫

Renderer process 透過

ipc 或是 remote

來使用原生 API

小結

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

用 electron 做的玩具們

炫耀時間

漫畫閱讀器

image alt

  • 懶的開平板的時候看漫畫用
  • 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
}

噗浪桌面版

image alt

  • Vue.js
  • OAuth

處裡 OAuth 跳轉



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

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

HackMD 桌面版

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

傳教時間

  • Electron 用網頁技術就能實作桌面應用程式
  • 會寫 JavaScript，就能寫桌面程式
  • 你網頁寫多快，桌面程式就能寫多快

The Good Parts

程式碼不是開源就是沒混淆

Copy & Paste 讚！

keywords: asar

吐嘈

  • 載個番茄鐘就要一百多 MB 的空間，有沒有搞錯

HDD
Hype Driven Development

投資一定有風險，基金投資有賺有賠，申購前應詳閱公開說明書

Make Desktop Application Great Again!

大 GUY 4 這樣

https://goo.gl/70XLmE

推坑時間

Visual Studio Code

也是用 Electron 做的，速度完勝 Atom

這邊大概都是硬派使用者吧

Vim Plugin(easy motion, surround)

Refs

Select a repo