Learnable Programming

[jjgod]

http://worrydream.com/LearnableProgramming/

Bret Victor 大神的新作一出，Twitter 上纷纷传阅，其核心思想和 Inventing on Principle (<amp-vimeo data-videoid="36579366" layout="responsive" width="16" height="9"></amp-vimeo>) 其实没有大的差异，还是重在编程过程的可视化。但假如不是直接用 Processing、JavaScript 这种简单的绘图程序，实际应用中这种方法该如何呈现呢？比如如何帮助程序员理解下面这些概念？

* 多线程编程的并发处理机制
* UI 编程的 MvC 模型、data source、delegate 机制 (例如 UICollectionView 这样新的类怎样快速理解它的运作)

会是很有趣的问题。

[tedd]

OMG, this is soooo cool! Thank you so much for sharing!

[flyingkid]

想知道vimeo真实地址，switchysharp加一下白名单。

[flyingkid]

There was an error encountered while loading this video.

无法加载。

[jjgod]

Bret Victor 在文章的总结段落里认为，前面提的这个问题“现实世界如何应用”是提了一个错误的问题，真正的问题应该是如何*重新设计*现实世界中的编程语言和环境，使得应用这些可视化原理成为必备。

然而我不禁想到：既然现在我们不依赖可视化工具，采用盲人摸象 (文中说 blindfolded) 的办法已经可以创造出如此复杂的软件，是否正说明了人类的逻辑推理能力并不很依赖可视化呢？

而假定可视化真的有很大的作用，以此作为踏脚石，我们能否更快地创造出漏洞更少而更复杂的系统呢？现实地想，不完全重新设计现有系统，而是在 IDE 上添加片段的可视化，哪怕只是对一个循环、一个函数的简单可视化，以此作为垫脚石，也许我们就能触及比现在高得多的东西。

当然，如果能在更宏观的角度上，提供对大型复杂系统的 X-ray 方式的透视，把大型系统的模块之间的相互作用关系自动用简单的图形表示出来，也能大大方便人的理解吧——想象一下假如可以把 Core Animation 或者 Core Data 的运作方式简单表现出来。

[picasso250]

新方法有时会带来新的结果，尤其是好玩的方法。

[dreamer]

我觉得这家伙更像个艺术家，而不是工程师。视频里他说当看到一个 idea 无法实现的时候，他觉得自己看到了一个 tragedy.

如果他的关于“可视化”的方法可以实现，影响最大的应该是那些利用新媒介进行创作的艺术家，他用来做 demo 的那些东西也几乎都是绘画、游戏和动画。以前的那些艺术形式，比如绘画和雕塑，都是“可视化的”，随时可以在创作的时候进行调整，而现在新兴的艺术形式，比如游戏和动画，要做到以前那种程度的控制就要多花好多心血。希望他早点儿把 demo 中的工具公布出来，这样应该会促进很多好作品的出现。

[jjgod]

@dreamer: 影响肯定不只是艺术作品，我自己在做比较复杂的程序时，往往需要在大脑里或者纸上反复推演这段程序的执行过程，以至于我相信这种推演能力和程序员的经验是正相关的，假如这个过程可以让计算机自动完成，程序员的思维就能解放出来去处理更抽象更复杂的逻辑了。

[dreamer]

@jjgod 恩，“验证自己的推演是否正确”其实更多是测试工作，如果能在编码的同时做测试工作，就不用在事后回想 Bug 可能出现的地方，会节省很多精力。

[yinyunqiao]

@jjgod 在我们给QtQuick 2.0做demo的时候，Alan和我们的UX designer 为QML设计了一个和Bret Victor演示的效果类似的QML editor，现在不知遗落到了何处了。

关于多线程的代码的可视化，在写QtQuick 2.0的时候，每天穿越renderer thread, main thread无数次时, 我曾想过如果在注释中给点hints，比如在一个method前//@thread:render这样，然后IDE给出不同的highlight提醒，这也会对我这种非常粗心的程序员有很大帮助了。

[jjgod]

@yinyunqiao: Andrew Baldwin 的这个也是 QML 的: <amp-youtube data-videoid="0j-Wakm5B84" layout="responsive" width="480" height="270"></amp-youtube>