支持实时编码的工具,例如 Bret Victor 的“原理上的发明”演讲

我看了一个已经广为人知的 视频,前苹果用户界面设计师 Bret Victor 在其中展示了令人惊奇的演示,在改变了源代码中的一个符号之后,他立即更新了运行中的代码。

为了让那些没有看过或者没有时间看视频的人明白我的问题: 我想使用一个像这样的工具来编写我自己的软件。他演示的工具是否可用,还是有其他类似的工具?

不管是哪种语言/环境,我只想让我的代码运行起来,然后在源代码中修改一行代码,不需要重新启动,就可以立即看到更新后的结果。

该视频也可以在 YouTube上看到,重点是:

  • 03:30 -05:30-实时编码图形算法(空间)
  • 11:00 -14:30-现场编码一些游戏代码(空间和时间)
  • 17:30 -21:30-实时编码局部变量(状态)
12492 次浏览

Chris Granger 正在构建一个叫做 Light Table 的东西,看起来是朝着这个方向发展的一个很有前途的举措。最初它只支持 Clojure,但他承诺将来会支持其他语言。

还有 柯尔特ーー一个用于 Flash 的实时编码工具(ActionScript3)。它允许方法更新、添加新字段/方法/类、在运行时更新嵌入资产等,同时保留应用程序状态,就像 Bret Victor 的视频中一样。有一些演示视频的行动,与 这个是迄今为止最令人印象深刻的一个。

它不会强迫你使用任何新的 IDE,它是一个单独的工具,当你在 IDE 中点击“保存”时,它会将增量更新发送给正在运行的应用程序。

还宣布了对 JavaScript 的支持。

IPython Notebook 正朝着这个方向迈进。尽管它更倾向于用于科学问题的交互式探索性分析,但我发现它非常具有交互性,并且开发起来非常有趣。

我还发现了 Live Code。经过一些实验,我发现,它并不包括所有的原则,维克多哲学布雷特。它有一个直接的语法,但 UI 不适合交互式开发。他们还有很长的路要走。

然后还有 R。自从 Shiny 和针织的新发展以来,一些有趣的创新正在发生,这符合 Bret 的哲学。

我认为下面的内容允许在源代码中改变一行(并看到立即的效果) :

  1. Codea Air Code : 浏览器上的代码(Lua) ,查看连接 wifi 的 iPad 上的输出。
  2. 作者 Gabriel Florit. HTML,CSS,在浏览器中运行。
  3. 现场 Scratchpad 由 Neonux。 Mozilla 扩展。
  4. 交互式游乐场: Xcode 6附带,用 Swift 编程语言编写代码。
  5. JS Bin : HTML,CSS,Javascript,在浏览器中运行。
  6. 光表 : 视频网站上的例子
  7. Atom : 带有预览 html 插件。

注意: 我只有1,5-7的经验。对于其中的大多数,我不认为你可以把你的光标放在代码的某一部分,并有图像的相关部分突出显示。

编辑: 添加项目4(2014.10.27) ,5(2014.10.31)和6-7(2015.03.12)。

编辑2(2015.06.25) : 来自 http://sixrevisions.com/tools/code-demo-sites/(大部分是 HTML/CSS/Javascript)。

  1. Codepen
  2. 活编织
  3. 浅尝辄止
  4. Jsfiddle
  5. Kodtest
  6. 笨蛋
  7. CSSDeck
  8. 重装上膛
  9. 想法
  10. JQ.version
  11. SQL Fiddle

代码管弦乐队的人最近发布了他们的实时编码工具,叫做 C.O.L.T。它支持 JavaScript 和 ActionScript,看起来非常有前途。强烈推荐你去试试。

我已经为 Emacs、 PyCharm 和 Eclipse 构建了一个名为 Python 中的实时编码的插件,它涵盖了您所询问的三个特性中的两个。在您输入代码时,它会立即更新 Turtle 图形算法的结果。

screenshot of turtle graphics code

它还显示每个赋值旁边的局部变量的状态。下面是一个二进制搜索算法的示例显示:

def search(n, a):              | n = 3 a = [1, 2, 4]
low = 0                    | low = 0
high = len(a) - 1          | high = 2
while low <= high:         |         |
mid = (low + high) / 2 | mid = 1 | mid = 2
v = a[mid]             | v = 2   | v = 4
if n == v:             |         |
return mid         |         |
if n < v:              |         |
high = mid - 1     |         | high = 1
else:                  |         |
low = mid + 1      | low = 2 |
return -1                  | return -1
|
i = search(3, [1, 2, 4])       | i = -1

是谁干的

您将在 React 和 ELM 社区以及一般的前端函数式编程社区中发现许多有趣的东西。

最近的一些全栈平台以某种方式试图提供这种开发环境:

夏娃 :

一个安德森·霍罗威茨/Y-Combinator 初创公司,230万资金来源于一个有影响力的 Clojure 程序员克里斯 · 格兰杰,他已经建立了 LightTables。

Technologies : Rust (后端) ,TypeScript (前端)和自制的 React 概念实现(他们称之为“ microReact”)

Unison :

还不是一家公司(还没有?) ,但是得到了 Patreon 活动的支持,来自 Paul Chiusano (著名书籍“ FP in Scala”的作者)。

Technologies : Haskell (后端) ,ELM (前端)。


注意 : 您可以看到这些工具背后的家伙都是经验丰富的函数式程序员。


它是如何工作的-> 函数式编程

程序是有状态的。

为什么布莱特 · 维克多能做那个视频?

因为:

  • 他的架构对于状态突变非常明确
  • 他用的是功能纯度
  • 将历史事实记录为状态,而不是当前的 UI 状态

受此演讲启发的一个工具是 ELM 语言。

ELM 声明:

因此,调试器的根本是 Elm 本身的设计 而不是从语言层面的正确设计选择开始, 创建一个时间旅行调试器很快变得极其复杂。 即使是部分满足必要设计的语言 需求将面临严峻挑战。

所以你真正需要理解的是 有趣的不是技术,而是底层的软件架构。一旦有了架构,添加这样的调试特性就不那么困难了。

ReactJS/Flux 社区中的许多人已经证明,我们可以用这种架构实现真正伟大的事情。大卫诺伦的 的 ClojureScript 炒作可能是触发器,丹阿布拉莫夫最近表明,我们可以做到和 Bret Victor 的调试非常相似的事情

我自己一直在尝试使用 在 JSON 录制用户会话视频,这也是这种架构所利用的一个特性。


因此,您必须明白,他所实现的不是通过巧妙的代码技巧或超级语言,而是通过真正优秀的架构模式。

这些模式甚至不是新的,它们被数据库创建者和一些后端开发人员以不同的名称使用了很长时间,包括命令/事件源、日志... ... 如果你想要一个介绍,IO blog 是一个非常有教育意义的资源


问题甚至不在于重新加载代码,而在于重新加载代码后如何处理状态。

你真正需要理解的是,这个问题没有唯一的答案: 这完全取决于你想要实现什么。

例如,在 Bret Victor 和 Mario 的例子中,当他修改一些参数,比如重力,你可以看到它可以影响过去(他所记录的)和未来(他在代码改变后的行为)。这意味着在不同的上下文中重新解释用户意图,产生新的事实历史(通常称为命令源)。

虽然这对于像他所展示的视频游戏来说真的很有趣,但是对于其他许多应用程序来说这是绝对没有用的。让我们以一个问责制应用程序为例,其中税率每年可以增加或减少。你真的认为调整当年的税率会对10年前的资产负债表产生影响吗?显然不是,但它仍可能对今年产生影响。

马里奥位置托盘时,调整跳跃参数,该工具不能自己知道,它必须显示它的马里奥元素。你必须明确说出来,否则它也可以对云或乌龟做同样的事情。对问责应用程序做同样的事情有意义吗?

我的意思是,这是一个很酷的演示,已经制作良好。你不能得到一个类似的开发环境,工作这么好的开箱即用。但是您可以学习支持这种方法的体系结构模式,并使用诸如 ELM/Om/Redux/Flux/ReactJS 之类的工具(以及一些 Haskell/Scala/Erlang 可能也很有用!),这将极大地帮助您正确实现它们,并为您提供它们可以热重新加载的最大限度。

Haskell for Mac 的受众可能有限,因为它(a)是特定于平台的ーー正如你可能从名称中猜到的ーー以及(b)商业软件(目前售价20美元)。但是它非常明确地基于 Brett Victor 的想法,就像在 早期的博客文章中讨论的那样。

它当然值得添加到任何实现“可学习编程”的编程环境的详尽列表中。

现在很多前端开发工具都提供了一种叫做“热重载”的功能,基本上就是在浏览器/移动模拟器中可以立即看到代码的变化。这是独立于 IDE/编辑器的。