Cirru 演进历程: 2012 ~ 2016

延续以前的一篇文章
Cirru Project in 2015

Cirru 的初衷是的逃脱文本语法的麻烦, 摆脱文本的局限,
基于 S-Expression 简化的结构用来表示表达式嵌套, 做为存储结构,
而后 Cirru Editor 基于这个结构实现, 经过图形界面来修改代码,
早期 Cirru 也提供了文本格式来兼容, 如今倾向于不使用.
目前基于 Cirru 设计的最重要的工具是 Stack Editor, 用于生成 Clojure 代码.
Stack Editor 须要维护和功能修补, 后续进展应该是很是缓慢的.

一个好的想法不会消亡, 可是 Cirru 目前的载体却可能被时间淹没,
也许将来别的代码方案会吸取 AST 编辑的想法, 只是不会用 Cirru 的代号了.
我但愿将来 Cirru 能在某些场景发挥做用带来价值, 那也是个人价值...
对于 Cirru 的探索已经走到了一个岔路的尽头了, 但我没有开新项目的实力.
一个领域呈现的初期, 须要有人大胆想象用于开拓, 孤独地飞奔和碰壁,
等到行业成熟, 又须要维护和发展的能力, 要说服一大帮人一块儿缓慢直行.
有的人擅长探索, 有的人擅长守业, 有的人适合踏实作事, 只能找到本身的位置吧.

这篇文章我想梳理一下 Cirru 至今的历程, 改变, 和挫折,
Cirru 是基于 MIT 开源的, 或者说其实就是个想法, 自由传播吧,
一个想法可能会是另外一个想法里缺失的一环, 随便拿去用吧.
后面的历史基于回忆和微博整理而成, 具体时间以微博为准:
http://weibo.com/jiyinyiyong/...
时隔过久, 我显然不能回忆起每一个细节, 总之供参考吧.

背景

当你像是玩具同样使用代码时, 语法设计的轻巧, 修改逻辑的便利, 就变得很是重要.
特别是写代码时你在思考, 那时繁琐的语法就会带来不是的分心和打断,
越是努力去思考问题, 越是反感这种语法上报错带来的打断. 就像在控制本身的手.
我认定了基于严格缩进设计的最精简语法才是我想要的工具, 好比 coffee.

因此很早的时候我作了一些试验, 把代码的层次尽可能展现出来.
而在全部编程语言语法设计当中, 最明确表达这个理念的是 Lisp,
我也尝试过将 Lisp 跨行的括号用缩进取代, 其实也就是 Cirru 文本格式的雏形.

早期图形

那年王垠发了个文章"Unix的缺陷(1) - 从命令行谈起", 带给我不小的震撼,
https://www.zhihu.com/questio...
文本只是程序结构的一种表示而已, 咱们能够换一种表示, 呈现相同的程序.
当时可能看过结构化编辑器的例子了, 而后我萌生了想法,
也就是用简化的 AST 表示代码, 再用图形界面去编辑, 绕过文本的限制.

如今能追溯到的最先的原型是 2012.05 放假期间发布的,
我用 DOM 实现了一个简单的 demo, 同时监听浏览器全局键盘事件进行操做,
每次操做诚心绘制整个页面, 输入文本都用的 prompt:
http://video.tudou.com/v/XMjE...

稍后几天还有一次样式的改进, 当时的嵌套的比较密集的,
布局算法过于简单, 随便写一点代码, 界面就有点难看懂了:
http://video.tudou.com/v/XMjE...

五月底通过一些样式的从新设计, 已经能够用来展现比较复杂的代码了,
重点仍是在布局算法, 文本语法写的代码比较好看, 图形界面怎样才能作到更好看:
http://weibo.com/1651843872/y...

七月初, 尝试了去优化树内容输入的问题, 去掉 prompt 引入 <div contenteditable>,
Cirru 这个名字大概是那时候取的, 参考微博的时间线, 不少信息遗漏了.
http://video.tudou.com/v/XMjE...

而后作的一个尝试是模仿 Sublime Text 自动提示已有的词语, 很是粗糙:
http://weibo.com/1651843872/y...

七月底作一次尝试是在表达式上增长解释器执行的结果, 很稚嫩, 但有点意思吧,
模仿 LightTable 在每一行结尾显示当前结果, 我显示在表达式上:
http://video.tudou.com/v/XMjE...

十月初作了一次重写, 记不清当时的细节, 看上去背景色改变比较明显.
源代码我都还保留在 https://github.com/Cirru, 可是项目名对不上了.
http://weibo.com/1651843872/y...

十月底我借助重构好的 Cirru Editor 作出了一个比较复杂的解释器的 demo,
demo 能被直接编辑, 而后点击触发运行, 行为相对复杂了:
http://weibo.com/1651843872/z...

文本语法

早期的图形方案实现不好, 性能不好, 体验通常, 显然无法使用,
并且当时没有强大的模块化方案, 个人代码复用起来也挺麻烦的.
因而我开始考虑一个文本格式, 也就是去掉跨行括号的 Lisp, 等效图形界面的数据结构.

早期文本的写法要考虑特殊处理空格, 我是强行转义的,
当时应该会写简单的 Lisp 语法的 parser 了, 可能使用取巧的写法.
十二月份的时候, 居然还尝试了作 Sublime Text 的语法高亮:
http://weibo.com/1651843872/z...

2013 年一月底, 弄了一个看上去比较清爽的文本写法的
http://weibo.com/1651843872/z...

后来语法通过一些修修补补, 增长了引号, 美圆符, 逗号, 逐渐到如今的样子
十月份的时候 Sublime 高亮已经至关成熟.
http://weibo.com/1651843872/z...

同时基于 Cirru 探索了一下解释器, 当时本身在学习这块东西:
http://weibo.com/1651843872/A...

逐渐开始用 Cirru 文本语法尝试对付前端的问题. 好比生成 HTML.
http://weibo.com/1651843872/A...

十月底增长了 codemirror 高亮:
http://weibo.com/1651843872/A...

到 2014 年 2 月, 整个文本格式和 parser 算比较成熟了.
http://video.tudou.com/v/XMjI...

2014.10 界面也作过一些调整, 细节改进.
http://weibo.com/1651843872/A...

仍是那个基于表达式显示值的想法, 基于另外一个思路作了探索:
http://video.tudou.com/v/XMjI...

四月底, 基于 Pygments 作了高亮, 几个月后 GitHub 支持 Cirru 的高亮.
http://weibo.com/1651843872/B...
后面还有些多语言的 parser 之类的项目, 没有仔细追踪...

2015.08 试验基于 Cirru 的 Diff/Patch 算法.
http://weibo.com/1651843872/C...

2016.01 制造了 GIF 来展现 Cirru 文本格式的解析.
http://weibo.com/1651843872/D...

生成 AST

2013.10 也尝试了用 Cirru 生成 JavaScript, 还尝试了一下 SourceMaps.
http://weibo.com/1651843872/A...

2014.03 Cirru HTML 作了一个比较清晰的版本.
http://video.tudou.com/v/XMjI...

2015.04 用 Cirru 生成 Ruby AST, 而后生成 Ruby 代码.

2015.01 CirruScript 基本成熟,
http://weibo.com/1651843872/C...

2015.05 切换到了如今的 Logo.
http://weibo.com/1651843872/C...

图形界面

2014.10 重构了 Cirru Editor, 并且实现了简单的 Light Editor,
Light Editor 能够经过 WebSocket 发送代码给后端保存为文件,
这样就能作到从网页编辑器直接编辑保存文件了, 也就是 Stack Editor 的原型.
http://weibo.com/1651843872/B...

2015.03 月底基于 React 重构了 Cirru Editor, 同时 Light Editor 更新.
这时候 React 实现的编辑器很慢, 没有基于 Immutable 优化.
http://video.tudou.com/v/XMjM...

2015 年三月, 基于的 React 进行 Cirru Editor 的重构,
然而没有解决性能问题, 只是解决了组件化的问题.
http://weibo.com/1651843872/C...

2015.10 基于尝试了一下用分形来展现 Cirru 的 AST.
http://weibo.com/1651843872/C...

2016.03 想到了一个能够扩展 Cirru 布局的办法, 也就是如今的疯狂缩进模式.
http://weibo.com/1651843872/D...

2016.05 尝试了一下在触摸屏上输入 Cirru 代码.

2016.06 制做教程用到个图片, 已经用 Light Editor 写了挺久的代码.
http://weibo.com/1651843872/D...

2016.07 使用 Light Editor 编写网页的体验.
http://weibo.com/1651843872/D...

2016.08 用 ClojureScript 从新实现了 Cirru Editor 和 Light Editor.
http://weibo.com/1651843872/E...

2016.08 Stack Editor 原型已经完成. 而且作了不少的小的改进.
http://weibo.com/1651843872/E...

2016.08 演示了一下布局算法.
http://weibo.com/1651843872/E...

2016.08 更新了一下折叠表达式的功能, 虽而后来不多用.
http://weibo.com/1651843872/E...

2017.02 Stack Editor 存储格式已经整个是基于 EDN 了.
http://weibo.com/1651843872/E...

总结

2016 以后的修改不少. 2017 年有不少的 Stack Editor 相关的修改. 都没有整理完成
本文主要基于微博整理. 后续的更新在 https://twitter.com/cirrulang
因为 Twitter 上记录比较详细, 我也不重复梳理一遍了.
更详细的时间要对照 GitHub, 然而那样很是无聊.
若是有时间, 把我微博, Twitter, GitHub 上全部相关信息爬一遍应该是最完整的.

基于时间线能够看到, 最初 Cirru 为了图形编辑器而设计, 实现比较粗糙,
当时我就记着尝试去配合解释器来实现 IDE 方向的一些功能了, 很原始.
随后的为了实用性, 设计了缩进的文本格式, 而且基于文本格式作了大量的应用,
好比 Cirru Html, CirruScript, 还有各类生成好比 Clojure 代码的 sepal.clj .
期间随着 React, ClojureScript 生态完善, 我用这些技术从新实现了图形编辑器,
这时有不可变数据优化的编辑器性能和体验就提高了不少, 复用性也不错.
而且基于编辑器逐步扩展成了整个文件夹源码编辑的 Stack Editor.

如今 Cirru 当初的想法稳定在 Stack Editor 这个工具上.在 Stack Editor 里还加入了不少功能, 最主要的就是跳转到定义.前面也说了, Stack Editor 会占用大量的精力维护, 很难继续探索 Cirru 了.我相信基于 AST 的编程方案还有不少的可能性.