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

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

Немає значення, які мови / середовища, я просто хочу, щоб мій код працював, а потім змінив рядок у вихідному коді і негайно побачив результати, оновлені без його перезапуску.

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

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

Хто це робить

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

Деякі нещодавні повнофункціональні платформи, які якимось чином намагаються забезпечити середовище для розвитку такого роду:

Єва :

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

Технології : Rust (бекенд), TypeScript (інтерфейс) із власною реалізацією концепцій React (те, що вони називають "microReact")

Унісон :

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

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

Примітка : ви бачите, що хлопці, які стоять за цими інструментами, є досвідченими функціональними програмістами. Перевірте розділ "як це працює".

Як це працює -> функціональне програмування

Програми мають стан.

Чому Брет Віктор зміг зняти це відео?

Оскільки:

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

Одним із інструментів, натхненних цією бесідою, є мова ELM.

ELM стверджує, що :

Отже, в основі налагоджувача лежить сам дизайн Elm. Якщо ви не починаєте з правильного вибору дизайну на мовному рівні, створення налагоджувача часу, що подорожує, швидко стає надзвичайно складним. Навіть мови, які частково виконують необхідні вимоги до дизайну, будуть мати серйозні проблеми.

Отже, що ви насправді повинні розуміти, це те, що цікавою є не технологія, а основна архітектура програмного забезпечення . Отримавши архітектуру, не так складно додати такі функції налагодження.

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

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

Отже, ви повинні розуміти, що те, чого він досягає, робиться не розумними прийомами коду чи супермовою, а справді хорошими архітектурними зразками.

Ці шаблони навіть не нові, вони дуже довго використовуються творцями баз даних та деякими розробниками серверних систем під різними іменами, включаючи пошук команд / подій, ведення журналів ... Якщо ви хочете ознайомитись, блог Confluent.IO - це дуже педагогічне джерело .

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

Насправді вам потрібно зрозуміти, що на це питання немає однозначної відповіді: все залежить від того, чого ви хочете досягти.

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

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

Також Маріо розміщує лоток під час налаштування параметра стрибка, інструмент не може сам знати, що він повинен відображати його для елемента Маріо. Ви повинні бути ясними щодо цього, інакше це може зробити те саме для хмар або черепахи. І чи є сенс робити те саме для програми звітності?

Тут я маю на увазі, що це крута демонстрація, яка була добре продумана. Ви не можете отримати подібне розробницьке середовище, яке працює так добре нестандартно. Але ви можете вивчити архітектурні зразки, що дозволяють це зробити легко, і скористатися інструментами, такими як ELM / Om / Redux / Flux / ReactJS (і деякі Haskell / Scala / Erlang теж можуть бути корисними!), Що допоможе вам у їх реалізації правильно і забезпечити вам максимум, що вони можуть для гарячого перезавантаження.

Кріс Грейнджер будує щось під назвою Світлий стіл, що виглядає як перспективний крок у цьому напрямку. Спочатку він підтримував лише Clojure, але в майбутньому він обіцяє підтримувати інші мови.

• http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/
• http://app.kodowa.com/playground

Я вважаю, що наступне дозволяє змінювати рядок у джерелі (і бачити негайні наслідки):

1. Codea Air Code : Код у вашому браузері (у Lua), див. Вихідні дані на підключеному до Wi-Fi iPad.
2. Вода Габріеля Флоріта. HTML, CSS, працює в браузері.
3. Live Scratchpad від Neonux. Розширення Mozilla.
4. Інтерактивні ігрові майданчики Swift : постачається з Xcode 6 для кодування мовою програмування Swift.
5. JS Bin : HTML, CSS, Javascript, працює в браузері.
6. Світлий стіл : приклад на 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. ганчірка
4. jsfiddle
5. kodtest
6. Планкер
7. CSSDeck
8. Reloado
9. Ідеоне
10. JQ.VER.SION
11. Скрипка SQL

Я створив плагін для Emacs, PyCharm та Eclipse під назвою Live Coding у Python, який охоплює дві з трьох функцій, про які ви запитували. Він миттєво оновлює результат графічного алгоритму черепахи під час введення коду.

Він також відображає стан локальних змінних біля кожного призначення. Ось приклад відображення двійкового алгоритму пошуку:

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 

IPython Notebook - це крок у цьому напрямку. Хоча він більше спрямований на інтерактивний дослідницький аналіз для наукової проблеми, я вважаю, що він дуже інтерактивний та цікавий для розвитку.

• http://ipython.org/

Я також щойно відкрив Live Code. Після деяких експериментів, які я виявив, вони не охоплюють усіх принципів філософії Брета Віктора. Він має прямий синтаксис, але користувальницький інтерфейс не передбачає інтерактивного розвитку. Їм ще потрібно пройти певний шлях.

• http://livecode.com/

Потім є також R. Оскільки нові розробки з Shiny та knitr відбуваються, цікаві нововведення відповідають філософії Брета.

• rНоутбук
• Демо в прямому ефірі

Існує COLT - інструмент кодування для Flash (ActionScript3). Це дозволяє оновлення методів, додавання нових полів / методів / класів, оновлення вбудованих активів тощо під час виконання, зберігаючи стан програми, як у відео Брета Віктора. Є кілька демонстраційних відеороликів про це в дії, причому це є найбільш вражаючим на сьогодні.

Це не примушує вас до будь-якої нової IDE, це окремий інструмент, який надсилає додаткові оновлення до запущеної програми, коли ви натискаєте "зберегти" в своїй IDE.

Також анонсовано підтримку JavaScript.

Хлопці з оркестру Code нещодавно випустили свій інструмент кодування під назвою COLT. Він підтримує JavaScript та ActionScript і виглядає дуже перспективно. Настійно рекомендую спробувати.

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

Це, безумовно, заслуговує на додавання до будь-якого вичерпного переліку середовищ програмування, що реалізують “Навчальне програмування”.

У наші дні для розробки інтерфейсу багато інструментів пропонують щось під назвою "гаряче перезавантаження", в основному роблячи ваші зміни в коді одразу видимими в браузері / мобільному емуляторі. Це не залежить від IDE / редактора.