Инструменты для поддержки живого кодирования, например, в Bret Victor "Изобретение по принципу"

Я смотрел уже известный видео, где Брет Виктор, бывший дизайнер Apple UI, демонстрирует удивительные демонстрации с немедленными обновлениями текущего кода после изменения буквально одного символа в источнике код.

Чтобы сделать мой вопрос понятным для тех, кто не видел или не успел посмотреть видео: я хочу использовать такой инструмент, чтобы писать свое собственное программное обеспечение. Является ли инструмент, который он демонстрировал, доступным, или есть другие подобные инструменты?

Неважно, какие языки/среды, я просто хочу, чтобы мой код работал, а затем изменил строку в исходном коде и сразу же просмотрел результаты без перезагрузки.

Видео также доступно на YouTube, а ключевыми словами являются:

  • 03:30 - 05:30 - Живое кодирование графического алгоритма (пробел)
  • 11:00 - 14:30 - Живое кодирование некоторого кода игры (пробел и время)
  • 17:30 - 21:30 - Прямое кодирование локальных переменных (состояние)

Ответ 1

Кто это делает

В сообществах React и ELM вы найдете много интересного, а также в сообществах функционального программирования в целом.

Некоторые недавние платформы с полным стеком, которые каким-то образом пытаются обеспечить такую ​​среду разработки, следующие:

Eve:

A Andreessen Horowitz/ Y-Combinator стартап, 2,3 миллиона финансируемых, от Криса Грейнджера, влиятельного программиста Clojure, который уже создал LightTables.

Технологии: Rust (backend), TypeScript (frontend) с самодельной реализацией концепций React (то, что они называют "microReact" )

Unison:

Не компания (еще?), но поддерживаемая кампанией Patreon от Paul Chiusano (автор известной книги "FP in Scala" ).

Технологии: Haskell (backend), ELM (frontend).


Примечание. Вы можете видеть, что ребята из этих инструментов - опытные функциональные программисты. Проверьте раздел "как это работает".


Как это работает → функциональное программирование

Программы имеют состояние.

Почему Брет Виктор смог сделать это видео?

Потому что:

  • его архитектура явно о мутациях состояния
  • он использует функциональную чистоту
  • он записывает исторические факты как состояние, а не текущее состояние пользовательского интерфейса.

Одним из инструментов, вдохновленных этим разговором, является язык ELM.

ELM указывает, что:

Итак, в корне отладчика есть дизайн самого Elm. Если вы это сделаете не начинайте с правильного выбора дизайна на уровне языка, создание временного отладчика быстро становится чрезвычайно сложным. Даже языки, которые частично выполняют необходимый дизайн требования будут иметь серьезные проблемы.

Так что вы действительно должны понимать, что это не технология, которая интересна, но базовая архитектура программного обеспечения. Если у вас есть архитектура, добавлять такие функции отладки не так сложно.

Многие в сообществах ReactJS/Flux показали, что мы можем достичь действительно замечательных вещей с такой архитектурой. Дэвид Нолен из Om Обман ClojureScript, вероятно, является триггером, и Дэн Абрамов недавно показал, что мы можем добиться очень похожих вещей, которые сравниваются с отладкой Брета Виктора.

Я сам экспериментировал с записью видеозаписей сеансов пользователя в JSON, что также является функцией, используемой такой архитектурой.


Итак, вы должны понимать, что то, чего он добивается, не достигается умными трюками кода или суперязыком, но действительно хорошими архитектурными узорами.

Эти шаблоны даже не новы, они используются создателями баз данных и некоторыми сторонними разработчиками в течение очень долгого времени под разными именами, включая подбор команд/событий, ведение журнала... Если вы хотите введение, Блог Confluent.IO - очень педагогический источник.


Проблема заключается даже не в перезагрузке кода, а в том, что делать с состоянием после перезагрузки кода.

Что вам действительно нужно понять, так это то, что нет однозначного ответа на этот вопрос: все зависит от того, чего вы хотите достичь.

Например, в примере Брета Виктора с Марио, когда он изменяет некоторый параметр, например, гравитацию, вы можете видеть, что он может влиять как на прошлое (то, что он записал), так и на будущее (действия, которые он будет делать после кода изменение). Это означает, что намерение пользователя переинтерпретируется в другом контексте, создавая новую историю фактов (часто называемую командой-sourcing).

Хотя это действительно интересно для видеоигр, как он показал, это абсолютно бесполезно для многих других приложений. Давайте примем пример заявления о подотчетности, где налог может увеличиваться или уменьшаться каждый год. Вы действительно думаете, что изменение налога на текущий год% должно повлиять на баланс 10 лет назад? Очевидно, что нет, но он может все еще иметь последствия для текущего года.

Также поднос Mario при настройке параметра перехода, инструмент не может знать сам по себе, что он должен отображать его для элемента Mario. Вы должны быть откровенно об этом, иначе он может сделать то же самое для облаков или черепахи. И имеет ли смысл делать то же самое для приложения отчетности?

Я имею в виду, что это классная демонстрация, которая была хорошо подготовлена. Вы не можете получить подобную среду разработки, которая так хорошо работает. Но вы можете изучить архитектурные шаблоны, которые позволяют сделать это легко, и использовать такие инструменты, как ELM/Om/Redux/Flux/ReactJS (и некоторые Haskell/ Scala/Erlang тоже могут быть полезны!), Что очень поможет вам правильно внедряя их и предоставляя вам максимальную возможность для горячей перезагрузки.

Ответ 3

Я считаю, что следующее позволяет изменить строку в источнике (и увидеть непосредственные эффекты):

  • Codea Air Code: код в вашем браузере (в Lua), см. вывод на подключенном Wi-Fi iPad.
  • Water Габриэль Флорит. HTML, CSS, работает в браузере.
  • Live Scratchpad от Neonux. Расширение Mozilla.
  • Swift Интерактивные игровые площадки: поставляется с Xcode 6 для кодирования на языке программирования Swift.
  • JS Bin: HTML, CSS, Javascript, работает в браузере.
  • Таблица цветов: пример на Youtube.
  • Atom: с помощью предварительного просмотра html-плагина.

Примечание. У меня есть опыт только с 1, 5-7. Для многих из них я не думаю, что вы можете поместить курсор на определенную часть кода и выделить соответствующие части изображения.

Изменить: добавленные элементы нет. 4 (2014.10.27), 5 (2014.10.31) и 6-7 (2015.03.12).

Изменить 2 (2015.06.25): от http://sixrevisions.com/tools/code-demo-sites/ (большинство из них - HTML/CSS/Javascript).

Ответ 4

Я построил плагин Eclipse под названием Live Coding в Python, который охватывает две из трех функций, о которых вы просили. Он мгновенно обновляет результат алгоритма черепахи, когда вы вводите код.

screenshot of turtle graphics code

Он также отображает состояние локальных переменных рядом с каждым присваиванием. Вот пример отображения алгоритма бинарного поиска:

def search(n, a):              | n = 3 a = [1, 2, 4] 
    low = 0                    | low = 0 
    high = len(a) - 1          | high = 2 
    while low <= high:         |         | 
        mid = (low + high) / 2 | mid = 1 | mid = 2 
        v = a[mid]             | v = 2   | v = 4 
        if n == v:             |         | 
            return mid         |         | 
        if n < v:              |         | 
            high = mid - 1     |         | high = 1 
        else:                  |         | 
            low = mid + 1      | low = 2 | 
    return -1                  | return -1 
                               | 
i = search(3, [1, 2, 4])       | i = -1 

Ответ 5

Ноутбук IPython является шагом в этом направлении. Хотя, он больше ориентирован на Интерактивный исследовательский анализ для научной проблемы, я считаю, что это очень интерактивно и интересно разрабатывать с.

Я также только что открыл Live Code. После некоторых экспериментов, которые я нашел, он не охватывает все принципы философии Брета Виктора. Он имеет прямой синтаксис, но пользовательский интерфейс не предназначен для интерактивной разработки. У них все еще есть какой-то способ.

Тогда есть и R. Поскольку новые разработки с Shiny и knitr происходят с интересными нововведениями, которые связаны с философией Брета.

Ответ 6

Там COLT - живой инструмент кодирования для Flash (ActionScript3). Он позволяет обновлять методы, добавлять новые поля/методы/классы, обновлять внедренные активы и т.д. Во время работы, сохраняя при этом состояние приложения, как и в видео Брет Виктор. В нем есть несколько демонстрационных видеороликов, причем этот является самым впечатляющим.

Он не заставляет вас ни в какую новую IDE, это отдельный инструмент, который отправляет инкрементные обновления запущенному приложению, когда вы нажимаете "сохранить" в своей среде разработки.

Также объявлена ​​поддержка JavaScript.

Ответ 7

Недавно ребята из оркестрового оркестра выпустили свой инструментарий для воспроизведения изображений под названием C.O.L.T. Он поддерживает JavaScript и ActionScript и выглядит очень многообещающим. Очень рекомендуется попробовать его.

Ответ 8

Haskell для Mac может иметь ограниченную аудиторию с момента ее (а) конкретной платформы - как вы могли догадаться от имени - и ( б) коммерческое программное обеспечение (в настоящее время 20 долл. США). Но он очень четко основан на идеях Бретт-Викеры, как обсуждалось в раннем сообщении в блоге.

Это, безусловно, заслуживает того, чтобы быть добавленным к любому исчерпывающему списку программных сред, которые реализуют "Научное программирование".