ReactとWebpackが便利です。
ReactとWebpackを使ってテンプレートを作成する
例えば、react-terminalというものがあります。
これはjquery.terminalのような動きをします。
具体的には、Webからユーザーのリクエストを受けて表示内容を決める Web Terminal のようなページを作成するためのツールですね。
$ git clone https://github.com/wmdmark/react-terminal
$ cd react-terminal
$ npm i -g react-tools webpack webpack-dev-server
$ npm i
$ webpack
$ webpack-dev-server --content-base build/ -d
or
$ cd ./build
$ jekyll server
$ curl -sL localhost:8080
何がどのように動作しているのかは、コードを見ればだいたい分かると思います。例えば、新しいコマンドを追加してみましょう。
$ vim src/commands/basic.coffee
+ ls = (state, args...)->
+ output = "index.coffee"
+ state.buffer.push(output)
+ {buffer: state.buffer}
- module.exports = {help, clear, echo, su}
+ module.exports = {help, clear, echo, su, ls}
これで、localhost:8080にアクセスし、lsを実行してみましょう。index.coffeeがあれば成功です。もちろん、実際にあるわけではなく見せかけです。
ちなみに、webpack-dev-serverが動作している間は、変更が反映されますので、わざわざwebpackコマンドでビルドする必要はありません。最終的にはwebpackでビルドします。