Bret Victor的“ Inventing on Principle”演讲中支持实时编码的工具


77

我观看了一个已经众所周知的视频,其中,前Apple UI设计师Bret Victor在更改了源代码中的一个符号后,立即运行代码更新,展示了惊人的演示。

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

不管哪种语言/环境,我都只想运行我的代码,然后在源代码中更改一行,并立即查看更新的结果,而无需重新启动它。

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

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

我没有看过视频。“更改源代码行并立即看到您的代码已更新”是什么意思?
奥利弗·查尔斯沃思

2
我正在使用EclipsePython版本@Sven,并且已经看过Javascript演示
唐·柯比

1
莫滕·詹森(Morten Jensen)似乎也正在研究某些东西,但是我还没有看到它在任何地方发布。
唐·柯比


5
这些新视频令人赞叹,但令他沮丧的是,他没有提及或提及何时/如何使用他的“工具”。参考:停止绘制死鱼绘制动态可视化文件
凯文·坎特威尔

Answers:


28

谁做的

通常,在React和ELM社区以及前端功能编程社区中,您会发现很多有趣的东西。

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

前夕

Andreessen Horowitz / Y-Combinator初创企业,由著名的Clojure程序员Chris Granger资助了230万美元,他已经创建了LightTables。

技术:Rust(后端),TypeScript(前端)以及React概念的自制实现(它们称为“ microReact”)

Unison

还不是公司(还?),但是得到了Paul Chiusano(著名著作“ Scala FP”的作者)的Patreon运动的支持。

技术:Haskell(后端),ELM(前端)。


注意:您会发现这些工具背后的人都是经验丰富的函数式程序员。检查“它是如何工作的”部分。


工作原理->函数式编程

程序有状态。

为什么Bret Victor可以制作该视频?

因为:

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

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

ELM指出

因此,调试器的根本是Elm本身的设计。如果您没有在语言级别上从正确的设计选择入手,那么快速创建时间旅行调试器将变得极为复杂。即使部分满足必要设计要求的语言也将面临严峻挑战。

因此,您真正要了解的是,有趣的不是技术,而是底层的软件体系结构。一旦有了体系结构,添加此类调试功能就很容易了。

ReactJS / Flux社区中的许多人已经表明,使用这种架构可以实现真正的伟大成就。Om的ClojureScript炒作的David Nolen可能是触发器,并且Dan Abramov最近证明,与Bret Victor的调试相比我们可以实现非常相似的功能

我自己一直在尝试用JSON记录用户会话视频,这也是这种架构所利用的功能。


因此,您必须了解,他的成就不是通过巧妙的代码技巧或超级语言完成的,而是真正好的架构模式。

这些模式甚至都不是新模式,它们被数据库创建者和一些后端开发人员以不同的名称使用了很长时间,包括命令/事件源,日志记录...。如果您需要介绍,Confluent.IO博客是教育学资料


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

您真正需要了解的是,这个问题没有唯一的答案:这完全取决于您要实现的目标。

例如,在布雷特·维克多(Bret Victor)与马里奥(Mario)的示例中,当他修改诸如引力之类的参数时,您会看到它既会影响过去(他记录的内容)又会影响未来(代码更改后他将执行的操作)。这意味着将在不同的上下文中重新解释用户的意图,从而产生新的事实历史记录(通常称为命令源)。

尽管对于他所展示的视频游戏而言,这确实很有趣,但对于许多其他应用程序而言,这绝对是没有用的。让我们以问责制应用程序为例,其中税率百分比每年都可以增加或减少。您是否真的认为修改当年的税收百分比会对10年前的资产负债表产生影响?显然不会,但是它可能仍会对当年产生影响。

同样,在调整跳转参数时,Mario会定位托盘,该工具自己不知道必须为Mario元素显示它。您必须明确说明它,否则它可能对云或乌龟也一样。对问责制应用程序执行相同操作是否有意义?

我的意思是,这是一个很棒的演示,已经制作精良。开箱即用,您无法获得类似的开发环境。但是您可以学习允许轻松实现的架构模式,并使用ELM / Om / Redux / Flux / ReactJS之类的工具(有些Haskell / Scala / Erlang也可能有用!),这将极大地帮助您实现它们正确地为您提供尽可能多的热装。


在会计中,您将在n年缴税,在n + 1年缴税,依此类推。它们的税率不同,因此实体不同。改变一个不会改变其他的。
ctrl-alt-delor

是否有类似的工具可用于实时建模SQL语句?真的不在乎哪个RDBMS。
Dan Loughney '17

13

克里斯·格兰杰(Chris Granger)正在建造一种名为“光桌”的产品,这似乎是朝这个方向迈出的有希望的一步。最初,它仅支持Clojure,但他有望在将来支持其他语言。


2
自2014年1月起,LightTable 0.6.0现在是开源的,并托管在GitHub上。现在,它支持Clojure,Python,JavaScript,HTML和CSS(并且更多可能通过插件)。
David Wheaton 2014年

10

我相信以下内容允许更改源代码中的一行(并查看直接影响):

  1. Codea Air Code:浏览器中的代码(在Lua中),请在连接wifi的iPad上查看输出。
  2. 加布里埃尔·弗洛里特的。HTML,CSS在浏览器中运行。
  3. Neonux的Live Scratchpad。Mozilla扩展。
  4. Swift Interactive Playgrounds:随附Xcode 6,用于使用Swift编程语言进行编码。
  5. JS Bin:HTML,CSS,Javascript在浏览器中运行。
  6. 灯表Youtube上的示例
  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. 码笔
  2. 活织
  3. 涉猎
  4. jsfiddle
  5. 考德
  6. 柱塞
  7. CSSDeck
  8. Reloado
  9. 异丁酮
  10. JQ版本
  11. SQL小提琴

与水的链接已断开,但我只是用同一人在Google github.com/gabrielflorit/livecoding上搜索
ctrl-alt-delor

10

我为Emacs,PyCharm和Eclipse构建了一个名为“ Live Coding in Python”的插件,该插件涵盖了您所要求的三个功能中的两个。在您键入代码时,它会立即更新turtle图形算法的结果。

龟图形代码的屏幕截图

它还在每个分配旁边显示局部变量的状态。这是二进制搜索算法的示例显示:

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 

3

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

我也刚刚发现了Live Code。经过一些实验,我发现它并不包含布雷特·维克多哲学的所有原理。它具有简单明了的语法,但UI不适用于交互式开发。他们还有一段路要走。

然后还有R。由于Shiny和knitr的新发展,正在发生一些有趣的创新,这与Bret的哲学相一致。


2

COLT —一种Flash实时编码工具(ActionScript3)。就像Bret Victor的视频一样,它允许在运行时更新方法,添加新字段/方法/类,更新嵌入式资产等,同时保留应用程序状态。有一些演示视频正在运行,是迄今为止最令人印象深刻的视频。

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

还宣布了对JavaScript的支持。


Flash版本(可能还支持Javascript)现已开源(Twitter公告在这里:twitter.com/UnknownFlasher/status/585427598248960001
bigp 2015年

0

交响乐队的家伙们最近发布了他们的实时编码工具COLT,它支持JavaScript和ActionScript,并且看起来非常有前途。强烈建议尝试一下。


0

Haskell for Mac的受众可能有限,因为它是(a)特定于平台的(您可能已经从名称中猜到了)和(b)商用软件(目前为20美元)。但这是布雷特·维克多(Brett Victor)的思想,非常明确地基于该思想,这在早期的博客文章中已有讨论。

当然,应该将其添加到实现“可学习编程”的编程环境的所有详尽列表中。


0

如今,对于前端开发而言,许多工具提供了一种称为“热重载”的功能,基本上使您对代码的更改在浏览器/移动仿真器中立即可见。这独立于IDE /编辑器。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.