大綱

• 介紹聊天機器人與Hubot
• 轉換Coffeescript到ES6
• 移植經驗總結

聊天機器人?

(Chat) Bot, 可以和人對話的程式

聊天機器人

解決大家日常生活中的一些瑣碎問題

• 為我服務
• 替我做事

為我服務

透過多種途徑查看Coscup會議交通, 地圖, 議程, …

• IRC
• Facebook, slack, wechat
• LINE, skype, telegram…

替我做事

• 新開/已解決 bug 訊息通知
• 叫機器人幫忙跑指令, 創建新 build …
• 解析貼上的 issue number 後, 貼出完整網址
• Scrum每日站立會議提醒
• …

Bot與即時通訊（IM）結合

• 隨時, 隨處可得
• 自助服務
• 控制家電設備
• 訂餐，喬會議時間

理想

現實

理想很豐滿，一用之下…

熱門的bot框架: Hubot

• by Github
• 10k+ star, 1k+ scripts
• 使用 Coffeescript 撰寫
  https://github.com/github/hubot

Hubot優點

• 支援超多通訊平台
• 擴充彈性高
• 容易分享
• 容易擴充

容易分享

使用npm

$ npm search hubot-scripts
...
$ npm install hubot-xxx

容易擴充

3 行就可以寫一份 hubot 腳本

module.exports (robot) ->
  robot.respond /(hello)/i, (res) ->
    res.send 'hi';

用的是CoffeeScript

CoffeeScript is a little language that compiles into JavaScript

支援 class, arrow function, rest argument, destructuring…
http://coffeescript.org/

快移植完/看懂原始碼後 才知道…

也能用 Javascript 來寫　Hubot　腳本

module.exports = function(robot) {
  robot.respond(/(hello)/i, function(res) {
    res.send('hi');
  });
}

但我想用 ES6 阿!

ES6 是什麼?

• 最新 Javascript 參考標準

ES6 是什麼?

• 最新 Javascript 參考標準
• ECMA Script 2015(ES2015)

ES6 是什麼?

• 最新 Javascript 參考標準
• ECMA Script 2015(ES2015)
• 不少新語法接近 CoffeeScript

Class, arrow function, rest argument, destructuring

移植到ES6

• 比移植到plain JS更合理
• 易於維護
• 更吸引新開發者

為什麼 Hubot 還不用 ES6?

• 時代的眼淚
• 向前相容
• 開發優先級

潮的代價

• 不是所有瀏覽器/JS引擎都實作所有的ES6語法
• 沒有自動 CoffeeScript to ES6 轉換工具

在 Node.js 上

執行ES6程式需要…

Babel 轉譯器(transpiler)

ES6 -> Plain Javascript
http://babeljs.io/

於是乎有了Webbybot

https://github.com/gasolin/webbybot

Webbybot

• 用ES6改寫的Hubot
• 幾乎完全相容
• 同時支援 JS, Coffeescript, ES6腳本
• 高測試覆蓋率 (79%)
• 移植所花時間：3~4周

時間花到哪兒了？

• 移植
• 學 ES6
• 學 CoffeeScript
• k資料
• 用錯 webpack

終於

可以寫ES6版腳本了

module.exports = (robot) => {
  robot.respond(/(hello)/i, (res) => {
    res.send('hi');
  });
}

移植經驗

• 心路歷程
• 跑起來
• 跑得好
• Merge回Hubot

心路歷程

• 專案需求
• 評估移植價值
• source code 量不多
• 發現每個檔案都有測試

目標1: 跑起來 (Make it run)

• 搞定編譯設定
• 直接使用 npm script
• 直接使用 babel
• 移植時測試優先
• 隨時參考
• Lint不可少

搞定編譯設定

• 確認改好的檔案能編譯成 Plain JS

直接使用 npm script

不用 grunt, gulp, 或 Makefile 建構工具

在 package.json 裡直接加入 scripts 區塊：

"scripts": {
    "prebuild": "shx rm -rf dist coverage && shx mkdir dist",
    "build": "babel index.js -o dist/index.js && babel src -d dist/src",
    "postbuild": "shx cp package.json dist/",
    "test": "mocha --compilers js:babel-register -w",
    "test:single": "istanbul cover --root ./src _mocha -- 'test/**/*.js' --compilers js:babel-register -R spec",
    "lint": "eslint index.js bin/webby src/ test/",
    "report-coverage": "cat ./coverage/lcov.info | codecov"
},

直接使用 babel-cli 轉換

• Server side 腳本已支援 require
• Server side 腳本不需用 webpack 來打包

babel src -d dist/src

移植時測試優先

移植好一個測試後，再移植相應代測檔案

移植測試　-> 測試通過 -> 
移植待測檔案 -> 測試通過　->
移植下一個測試 ->

隨時參考

將檔案 CoffeeScript 轉換成 JS 參考
使用 Coffeescript > try script

Lint不可少

程式碼格式檢查
ESLint
http://eslint.org/

目標2: 跑得好(Make it good)

讓語法更符合ES6

• 該不該 return
• class + super
• Default + Rest + Spread
• 使用 for..of 替換 for.. in 迴圈
• 使用 Object.assign 替換 Extend

學ES6時，別錯過的MozHack系列文章

ES6 in Depth

Webbybot merge 回 Hubot?

遙遙無期阿

• plain js hubot-mockadapter instead of hubot-mock-adapter #1160
• Port hubot from coffeescript to plain Javascipt (ES2015)

hubot 核心開發不活躍, review　頗慢, 幾乎不 merge…

何不直接寫一個簡易版聊天機器人？

• 運作在客戶端(網頁版)
• 參考 hubot 架構與API
• 支援腳本
• 容易擴展
• Conference Driven Development

Saihubot

師傅機器人！

cosbot https://github.com/gasolin/cosbot

聽完記得什麼？

跑起來 (Make it run)

• 搞定編譯設定：確認改好的檔案能編譯成 Plain JS
• 直接使用 npm script：不用 grunt, gulp, 或 Makefile　建構工具
• 直接使用 babel: Server side 腳本不用 webpack
• 移植時測試優先：移植好一個測試後，再移植相應代測檔案
• 隨時參考：使用 Coffeescript > try script，將檔案 CoffeeScript 轉換成 JS 參考
• Lint不可少

跑得好(Make it good)

• 讓語法更符合ES6

Reference

• https://github.com/github/hubot
• https://github.com/gasolin/webbybot
• https://github.com/gasolin/webby
• https://github.com/gasolin/saihubot
• ES6 in Depth
• 將聊天機器人框架 hubot 從 Coffescript 移植到 ES6
• How we ported Hubot from Coffeescript to ES6

Thanks