It's Alive! Continuous Feedback in UI Programming

'12 IDE ACM PLDI '13

概要

Live Programmingは、プログラムを走らせたままコードを編集し、その変更を直ちに反映させて変化を観察することを可能にする技術である。このように、伝統的な編集、コンパイル、実行というサイクルを圧縮することで、プログラムのコードと振る舞いの間を行ったり来たりする認知的なギャップを小さくできる。そうすることで、プログラミング初学者がよりよくプログラミングを学べるようになり、経験者ならば生産性を向上できることが期待される。しかしながら、Model-Viewなどの切り分けがはっきりせず抽象化の足りない命令型言語でLive Programmingを実現しようとすると、応答性が悪くなったりフィードバックが分かりにくくなったりして困難が伴う。

本論文では、ユーザインタフェースを伴う一般的なプログラムの実装において、次のようにLive Programmingを実現する。すなわち、ユーザインタフェースのレンダリングを行う部分とそれ以外を綺麗に分けることによって、コードに変更があるたびに、プログラム自体を再起動せずともレンダリングだけをやりなおすことができるようにする。さらに、型(と副作用)システムを用いて、この切り分けを形式化し、コード変更時の処理手順を与える評価モデルを与える。このように、Live Programmingに対してより形式的な基盤を与えることで、Live Programmingシステムに関する本質的で技術的な議論を可能にしたい。

本研究は、Microsoft Research Redmond RiSE GroupのTouchDevelopチームにおける3か月のインターンの成果物である。Sebastian BurckhardtとMichał Moskalがメンターであった。Microsoft Research AsiaのSean McDirmidとも連絡を取り、MSRの2つのキャンパス間の協力体制を築いて研究を進めた。

技術デモ

本研究で扱っている技術によるLive Programmingを体験してみたい方はTouchDevelop Web Appの当該機能を利用しているスクリプトを開いてみてください。公式チュートリアルもあります。

なお、本機能は page を使ったときだけ有効化されます。TouchDevelopには何でもpostできる wall というレガシーなコンセプトがありますが、 page はその後継として、互換性を捨てて定義されています。

  1. TouchDevelopにログインする。
  2. リンク先のヘッダにある「edit in TouchDevelop」からスクリプトを開く。
  3. 「run」ボタンでスクリプトを実行する。
  4. 適当なところで画面右上の「一時停止」ボタンをクリック(またはタップ)すると、イベントハンドラが全て無効化されて「編集モード」になる。
  5. 画面上で「box」と呼ばれる任意のGUIコンポーネントをクリックすると選択でき、隣に「edit」ボタンが現れる。
  6. 「edit」をクリックすると、コードエディタの当該boxを表示する処理に飛ぶ。
  1. コード編集に満足したら「再開」ボタンをクリックするとプログラムが再開される。

発表文献