想象一下將來如何寫代碼和調試

放假中間想到一些東西, 原本想更新一下個人 fractal editor, 失敗了
原本若是成功的話, 我之後的 CirruScript 就能夠脫離 Sublime 寫的
從技術難度上評估, 也許還要摸索個半年吧, 雖然已經快進行了一年了
Demo 沒能用代碼寫出來, 只能討點嘴上的便宜了
這篇文章是想梳理一下相關的兩個想法, 就是代碼熱替換和分形查看

期間也看過幾個 StrangeLoop 上關於 Future Programming 的視頻
以爲很顛覆人思惟的大概是這三個:

'Eve' by Chris Granger
A Live Programming Experience
'Visualising program execution' by Jan Paul Posma

中間忘了哪一個視頻提到一句話, 描述 Live Coding, 我還截了圖的:

其中的 "React for Compilers" 我以爲頗有意思, 代碼如何增量編譯呢?
編譯器能識別代碼的更新, 而後更新自身編譯結果的, 調試過程大概很是有幫助

首先 Live Coding 帶來的生產力提高, 也許對於後端或者腳本開發體會不到
然而對於圖形開發而言就大不同了, 好比上個月看到的 Arcadia 框架的例子
直接在 VR 當中開 Emacs 調試 Clojure, 同時動態地操做着圖形

能夠開高清看看他的視頻, 甚至理解一下, 這個是在 VR 的環境中開發的
https://www.youtube.com/watch?feature=youtu.be&v=_p0co13WYPI
若是能很動態地更新運行時, 調整運行時, 至少在修飾最終效果時很是有趣

而後來回顧一下底層, 熟悉 Lisp 的同窗對於 Prefix 語法的 AST 應該很熟悉
當編輯着各類圓括號的時候, 實際上也僅僅是在編輯這個語法樹而已
那麼, 固然能夠更進一步, 爲何不能編輯這個語法樹呢?
Cirru Editor 多多少少嘗試過這麼作了, 畢竟 Cirru 基於 DOM 的編輯器也不難

那麼, 再進一步呢, 這個語法樹可能有多個節點, 可是能夠稍加轉換
轉換之後能夠成爲二叉樹, 極端的狀況下, 二叉樹的全部枝葉都在, 那麼, 就成了分形~
至少在計算機當中, 生成分形, 調整分形是比較容易

因而有了的 Cirru Fractal Editor, 用二叉樹分形來顯示 Cirru AST
注意四個稍大的圓點, 我綁定了 Touch API 能夠對圓點進行拖拽, 也就是能夠調整分形的形狀
深藍色的圓點表示語法樹被摺疊, 不然這棵樹看起來會更誇張一些
我前面說了, 能力不夠還沒作完, 因此如今直接在上邊編輯效果不好, 還須要一些時間

這個還能夠再延伸一下, 跟分形類似的不只僅是語法樹, 還有代碼的執行過程
把每一個函數調用看作是一個分支, 最終的值看做是葉節點, 那麼能夠畫成一棵樹
Chrome Devtools 是的火焰圖實際上已經這樣將 JavaScript 的運行過程可視化了
可是考慮一下當咱們有好比 VR 這樣更豐富的界面時, 用分形樹來展現不是更天然嗎?

考慮一下, 將來並不遙遠的時候, 也許就不用按行寫代碼, 而是直接在大屏幕上編輯語法樹
或者可能 VR 當中, 這棵分形樹上能夠改變形狀, 方便摺疊和查看不一樣區域的代碼
而每個界面上的改變的節點有本身的 id, 能夠給編譯器識別
當編譯器檢測到更新, 而後動態地對編譯結果, 也就是運行時, 進行熱替換
也許整個代碼運行的過程也像分形樹同樣, 能夠快速地縮放和查找
這比起一行一行寫代碼, 而後按照行號斷點, 查找 bug 的位置, 要有趣地多