Light Table ——一種新的IDE概念

Light Table介面在kickstarter上可以看到。

儘管軟體介面明顯趨向於簡潔化，但每一版的開發工具還是在不斷地為工作空間新增功能。即使有這些功能，我們仍會陷入一大堆的檔案和組織中——為什麼我們在編碼的時候還在到處找所需的檔案？為什麼所有東西都是靜態文字？

Bret Victor推薦了一種比現在更好用方法——可以即使反饋，展示更改系統的效果。我將證明他是對的。

不過在說更好的方法之前，我想先推薦一個視訊估計要翻牆看

Light Table是一個很簡單的概念：我們需要真正的工作皮膚，不只是編輯器和專案管理器。我們可以把東西儘量整潔地堆在這裡，需要的時候可以把資料直接拿出來看。這是它預設模式下的外觀：

Light Table概念有以下幾個特點：

• 你不必專門去翻看文件
• 程式碼不再只能用檔案形式來表示，用序列化的方式更方便
• 皮膚的任何地方都可以檢視和編輯——不只限於文字
• 多去嘗試更改——效果會立刻顯示出來
• 相關的程式碼會以高亮顯示

我們來看看這些特點在Light Table平臺上是如何表現的

文件隨處可見

當你在瀏覽一段全新程式碼時，總是希望能最快速度看到與之關聯的其他關鍵程式碼。通常你必須特意去找有關函式定義的程式碼，不過在這個平臺，資訊會在旁邊浮現出來。想要知道partial函式的相關資訊？只需要把你的滑鼠指標放在它上面就能看到了。如此你就不必再擔心忘記了引數順序了。

我們每天都在寫新的程式碼，很難記住所有的函式相連的頁面是什麼——我們在編碼時如果能立即看到相關檔案就能更好地掌握程式碼。不記得noir.core名稱空間裡有哪些東西？現在可以直接找到了。

這樣非常易於尋找和檢視你根本不知道位置的函式。不必去專門找其他生成的文件了。

即時反饋

在Inventing on Principle（需翻牆）視訊裡，Bret展示瞭如何在編輯器裡重寫遊戲和二進位制搜尋就可以立刻執行並顯示出效果。許多lisp程式設計師會使用REPL建立類似的環境。不過在這裡卻更方便——我們可以在同一介面上立即顯示出效果。舉個例子，我在這裡輸入程式碼（+3 4），就可以馬上看到它的結果7——不用去按ctrl-enter鍵或做其他事情。

Ligth Table的功能不只是在旁邊顯示變數值，還能自動填充程式碼。這樣做能讓你在複雜的函式組裡看到程式碼執行流程。

通過這種實時計算和視覺化功能，等於說擁有了一個實時偵錯程式，可以讓你輸入各種東西並快速看到程式碼流程。沒有比這種實時觀察程式程式更好用的除錯方法了。

使用草圖皮膚

在使用Visual Studio工作的一段時間內，我總結出用視窗來展示工作介面並不是最好的方案。某些引擎使用的平臺包含了繪圖，工具和一些相關資訊。草圖平臺對於我們更好用。程式碼有非常複雜的互動性，所以我們要把相關的元件集中在一起的平臺，而不是非要在那種把每個最小單元視為檔案的環境裡工作。

我們來看一個Code Bubbles的例子，當然這個還不算最完美——為什麼我們不能把正在執行的遊戲嵌入到我們的工作介面平臺上？我們可以每當有輸入的時候，都會獲得開發環境的結果反饋。

給程式碼高亮顯示

開發工具沒有理由不幫我們理解程式裡的程式碼是如何組成的。在高亮模式裡，Light Table能突出顯示當前環境里正在使用的函式，它不僅會在程式碼裡高亮顯示，還會把函式的程式碼在旁邊浮現出來。

這樣我們就不需要不停來來去去地切換介面來瀏覽相關的各種程式碼。

總之，這個功能不僅能讓我們看到輸入的東西的計算結果，還能看到在程式碼庫裡的執行流程。這裡我找到了一個沒有輸入正確的x導致的bug。我輸入（greetings["chris"]）不僅可以立刻看到當前函式裡的值，也能看到所有使用了這個數值的函式。

它是如何工作的

你在視訊裡可以看到一個這樣的原型。它是一個使用了Noir，各種ClojureScript庫和CodeMirror的web應用。我使用了一個修改版的Clojure編譯器來保持表單的後設資料（像是列位置和其它位置資料）。

關於語言

我對於Clojure像是對lisp一樣喜愛，是我用過最容易的語言，但它卻不能在任何語言的動態執行時裡起作用。其餘就是AST的簡單分析和一些智慧引用。Light Table將來會預設使用JS嗎？當然，希望這個早晚就能實現。

關於機遇

我一直很關心開發工具——能建立有價值的東西。現在我們有改變構建方式的機會，可以向全世界灌輸。我用Visual Studio工作的時候，我就開始想看到結果。這只是開始。是時候跳出框框了，要重新構思能讓我們建立我們所知世界的東西。

可以在HackerNews上進行相關討論

原文連結：Light Table - a new IDE concept