We (Fred Lin & Ray Lin) have ported Github's popular chat robot framework 'Hubot' from Coffeescript to plain Javascript with ES6 features. Currently I name it webbybot to denote ES6 version of hubot, to better test the port result and avoid the naming confusion with the original hubot.
Now webbybot is fully functional and still support all coffeescript written plugins.
If you have an existing bot generated by hubot-generator, you can install webbybot via npm install webbybot command, follow with simple instruction and see your bot works smoothly with webbybot core.
(For experienced developer, the instruction guide you to replace script in generated '/bin' folder from 'hubot' to 'webby'. And change the adapter library import from 'hubot' to 'webbybot'.)
As time goes to 2016, there're less reason to use Coffeescript instead of standard ES6 Javascript. During the porting we do learned something that might helpful for your projects.
1. Use npm script directly instead of gulp or grunt
With npm we can define some scripts directly in the 'script' attribution of 'package.json' file. Webbybot use 'npm run build' command to compile ES6 to plain javascript via Babel. Do style checking via 'npm run lint' command.
2. Use babel directly instead of webpack
At the beginning we count on webpack's babel-loader to convert ES6 to plain javascript. Alas its a beginning of 'Try and Error' journey. Webpack is originally designed for front-end packaging and works very well on that purpose. But for backend program like webbybot that feature is not important for us. Webpack also bring 'require' keyword to the front-end, but its not suit for backend program that depends on dynamic import. As a framework, hubot heavily counts on NODE require to load plugins. Webpack treat all 'require' as its keyword and try hard in vain to find external modules from packed files.
We tried several ways to detour these side effects, and finally replaced the full webpack stack with one line npm build script. Now its easier to debug and no hacks needed in source code.
3. return or not return, its the question
We use the "Try Coffeescript" utility provide form Coffeescript official site, which you can paste Coffeescript the page will convert the source to Javascript instantly.
The converted code is... not all pretty for human read, and all converted functions will contain a return statement even its unnecessary. It needs check by hand.
4. test cases matter
Hubot itself contains good coverage of unit tests. So we are able to test one ported script file with one ported test file when we start the porting. The unit test files contain great number of redundant return sentences when convert from coffeescript.
5. class and super
Hubot use Class syntax from Coffeescript。Thanksfully ES6 support the Class syntax, which is a bit different from Coffeescript. You can check how to use Class and super on MDN.
6. Default + rest + spread
Hubot contain several syntax like 'reply(strings...)'. The syntax 'strings...' in Coffeescript is correspondent to "...strings" in ES6（The order of '...' is reversed）.
'...strings' denotes an array and I feel its a bit hard to figure out when to expand it or not.
7. for..of instead of for..in
To use for..in loop in ES6, we need add 'hasOwnProperty' check to make sure inherited property are not looped. Or we can rewrite for..in loop in Coffeescript to forEach iteration. Though there are some cases that need 'break' or 'return' from a loop.
Now we use ES6 for..of loop in Webbybot to replace forEach and for..in loop. You need wrap object with Object.keys syntax to iterate with object. ex: for (let item of Object.keys(TargetObj)) {...}.
8. Object.assign instead of Extend
We can use Object.assign to extend a object without handmade extend function or lodash!
9. Do you know hubot also support write plugin with plain javascript?
Learning how chat bot works is the main reason we start porting hubot to ES6!
A simple plain javascript plugin could be as easy as: (src/simple.js)
> module.exports = function(robot) {
> robot.respond(/(hello)/i, function(res) {
> res.send('hi');
> });
> }You can put it in generated plugin folder and it will just work.
I've created a ticket on hubot issue list to start a discussion if hubot would like to go with ES6 in its future version.
The webbybot source is at https://github.com/gasolin/webbybot
Do you have a project ported from coffeescript to ES6? Welcome to drop by your thoughts.
5. 最後再透過相片軟體選擇分享到 Facebook 即可。如果成功，可以看到相片下角出現球狀 360 影片圖示。