Инструменты для поддержки живого кодирования, как в лекции Брета Виктора «Изобретая по принципу» - PullRequest
Новая
       32

Инструменты для поддержки живого кодирования, как в лекции Брета Виктора «Изобретая по принципу»

75 голосов
/ 26 февраля 2012

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

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

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

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

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

Ответы [ 9 ]

27 голосов
/ 13 июля 2015

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

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

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

Ева

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

Технологии : Rust (бэкэнд), TypeScript (веб-интерфейс) с самодельной реализацией концепций React (что они называют «микрореакт»)

Unison

Не компания (пока?), Но поддерживаемая кампанией Patreon, от Пола Кьюзано (автора знаменитой книги "FP in Scala").

Технологии : Haskell (бэкэнд), ELM (интерфейс).

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

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

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

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

Потому что:

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

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

ELM утверждает, что :

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

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

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

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

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

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

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

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

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

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

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

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

12 голосов
/ 18 ноября 2012

Крис Грейнджер строит нечто, называемое Light Table, которое выглядит как многообещающий шаг в этом направлении. Первоначально он поддерживает только Clojure, но в будущем он обещает поддерживать другие языки.

10 голосов
/ 14 июня 2015

Я создал плагин для Emacs, PyCharm и 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
10 голосов
/ 04 сентября 2013

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

  1. Код воздуха Codea : код в вашем браузере (на Lua), см.выход на iPad, подключенный к Wi-Fi.
  2. Вода от Габриэля Флорита.HTML, CSS запускается в браузере.
  3. Live Scratchpad от Neonux.Расширение Mozilla.
  4. Swift Интерактивные игровые площадки: поставляется с Xcode 6 для кодирования на языке программирования Swift.
  5. JS Bin : HTML, CSS, Javascript, работает в браузере.
  6. Light Table : пример на Youtube .
  7. 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).

  1. Codepen
  2. Liveweave
  3. dabblet
  4. jsfiddle
  5. кодтест
  6. Плункер
  7. CSSDeck
  8. Reloado
  9. ideone
  10. JQ.VER.SION
  11. SQL Fiddle
3 голосов
/ 15 июня 2013

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

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

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

2 голосов
/ 25 мая 2013

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

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

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

0 голосов
/ 23 октября 2018

В наши дни для разработки веб-интерфейса многие инструменты предлагают так называемую «горячую перезагрузку», благодаря которой ваши изменения в коде сразу видны в браузере / мобильном эмуляторе. Это не зависит от IDE / редактора.

0 голосов
/ 28 января 2016

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

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

0 голосов
/ 25 сентября 2013

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

...