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 的編程方案還有不少的可能性.