Ich habe ein bereits bekanntes Video gesehen, in dem Bret Victor, ehemaliger Apple UI-Designer, erstaunliche Demos mit sofortigen Aktualisierungen des laufenden Codes zeigt, nachdem buchstäblich ein Symbol im Quellcode geändert wurde.

Um meine Frage denjenigen klar zu machen, die das Video nicht gesehen haben oder keine Zeit haben, es anzuschauen: Ich möchte ein solches Tool verwenden, um meine eigene Software zu schreiben. Ist das von ihm demonstrierte Tool verfügbar oder gibt es andere ähnliche Tools?

Es spielt keine Rolle, welche Sprachen / Umgebungen ich möchte, ich möchte nur, dass mein Code ausgeführt wird und dann eine Zeile in der Quelle ändert und die Ergebnisse sofort aktualisiert werden, ohne sie neu zu starten.

Das Video ist auch auf YouTube verfügbar. Die wichtigsten Punkte sind:

• 03:30 - 05:30 - Live-Codierung eines grafischen Algorithmus (Leerzeichen)
• 11:00 - 14:30 - Live-Codierung von Spielcode (Raum & Zeit)
• 17:30 - 21:30 - Live-Codierung lokaler Variablen (Status)

Wer macht es

Sie finden viele interessante Dinge in den React- und ELM-Communities und in den Frontend-Communitys für funktionale Programmierung im Allgemeinen.

Einige neuere Full-Stack-Plattformen, die irgendwie versuchen, eine Entwicklungsumgebung dieser Art bereitzustellen, sind:

Eva :

Ein 2,3 Millionen finanziertes Startup von Andreessen Horowitz / Y-Combinator von Chris Granger, einem einflussreichen Clojure-Programmierer, der bereits LightTables erstellt hat.

Technologien : Rust (Backend), TypeScript (Frontend) mit einer hausgemachten Implementierung von React-Konzepten (was sie "microReact" nennen)

Unison :

Noch keine Firma, aber unterstützt von einer Patreon-Kampagne von Paul Chiusano (Autor des berühmten Buches "FP in Scala").

Technologien : Haskell (Backend), ELM (Frontend).

Hinweis : Sie können sehen, dass die Leute hinter diesen Tools erfahrene funktionale Programmierer sind. Überprüfen Sie den Abschnitt "Wie es funktioniert".

Wie es funktioniert -> funktionale Programmierung

Programme haben Status.

Warum konnte Bret Victor dieses Video machen?

Weil:

• In seiner Architektur geht es explizit um Zustandsmutationen
• er verwendet funktionale Reinheit
• Er zeichnet historische Fakten als Status und nicht als aktuellen UI-Status auf

Ein von diesem Vortrag inspiriertes Werkzeug ist die ELM-Sprache.

ELM gibt an, dass :

Die Wurzel des Debuggers ist also das Design von Elm selbst. Wenn Sie auf Sprachebene nicht mit den richtigen Designoptionen beginnen, wird das Erstellen eines zeitreisenden Debuggers schnell äußerst komplex. Selbst Sprachen, die die erforderlichen Designanforderungen teilweise erfüllen, werden ernsthafte Herausforderungen haben.

Was Sie also wirklich verstehen müssen, ist, dass nicht die Technologie interessant ist, sondern die zugrunde liegende Softwarearchitektur . Sobald Sie die Architektur haben, ist es nicht so schwer, solche Debugging-Funktionen hinzuzufügen.

Viele in den ReactJS / Flux-Communities haben gezeigt, dass wir mit dieser Art von Architektur wirklich großartige Dinge erreichen können. David Nolen von Om 's ClojureScript-Hype ist wahrscheinlich der Auslöser, und Dan Abramov hat kürzlich gezeigt, dass wir sehr ähnliche Dinge erreichen können, die mit Bret Victors Debugging vergleichbar sind .

Ich selbst habe mit der Aufzeichnung von Videos von Benutzersitzungen in JSON experimentiert. Dies ist auch eine Funktion, die von dieser Art von Architektur genutzt wird.

Man muss also verstehen, dass das, was er erreicht, nicht durch clevere Code-Tricks oder eine Supersprache erreicht wird, sondern durch wirklich gute Architekturmuster.

Diese Muster sind nicht einmal neu, sie werden von Datenbankerstellern und einigen Backend-Entwicklern sehr lange unter verschiedenen Namen verwendet, einschließlich Befehls- / Ereignisbeschaffung, Journaling ... Wenn Sie eine Einführung wünschen, ist der Confluent.IO-Blog ein sehr guter pädagogische Quelle .

Das Problem besteht nicht einmal darin, Code neu zu laden, sondern darin, was mit dem Status zu tun ist, nachdem der Code neu geladen wurde.

Was Sie wirklich verstehen müssen, ist, dass es keine eindeutige Antwort auf diese Frage gibt: Alles hängt davon ab, was Sie erreichen möchten.

Wenn Sie beispielsweise in Bret Victors Beispiel mit Mario einen Parameter wie die Schwerkraft ändern, können Sie sehen, dass dies sowohl die Vergangenheit (was er aufgezeichnet hat) als auch die Zukunft (die Aktionen, die er nach der Codeänderung ausführen wird) beeinflussen kann. Dies bedeutet, dass die Benutzerabsicht in einem anderen Kontext neu interpretiert wird, wodurch eine neue Historie von Fakten entsteht (häufig als Command-Sourcing bezeichnet).

Während dies für Videospiele, wie er gezeigt hat, wirklich interessant ist, ist dies für viele andere Anwendungen absolut nutzlos. Nehmen wir ein Beispiel für einen Antrag auf Rechenschaftspflicht, bei dem der Steuerprozentsatz jedes Jahr erhöht oder verringert werden kann. Denken Sie wirklich, dass eine Änderung des Steuerprozentsatzes für das laufende Jahr Auswirkungen auf die Bilanz vor 10 Jahren haben sollte? Natürlich nicht, aber es kann immer noch Auswirkungen auf das laufende Jahr haben.

Auch das Mario-Positionsfach beim Anpassen des Sprungparameters kann das Werkzeug nicht selbst wissen, dass es für das Mario-Element angezeigt werden muss. Sie müssen explizit darüber sein, sonst könnte es dasselbe für die Wolken oder die Schildkröte tun. Und ist es sinnvoll, dasselbe für die App zur Rechenschaftspflicht zu tun?

Was ich hier meine ist, dass dies eine coole Demo ist, die gut produziert wurde. Sie können keine ähnliche Entwicklungsumgebung bekommen, die sofort so gut funktioniert. Sie können jedoch die Architekturmuster erlernen, die dies ermöglichen, und Tools wie ELM / Om / Redux / Flux / ReactJS (und einige Haskell / Scala / Erlang können ebenfalls nützlich sein!) Verwenden, die Ihnen bei der Implementierung sehr helfen richtig und bieten Ihnen das Beste, was sie für das Nachladen im laufenden Betrieb können.

Chris Granger baut etwas namens Light Table, das wie ein vielversprechender Schritt in diese Richtung aussieht. Anfangs unterstützt es nur Clojure, aber er verspricht, in Zukunft andere Sprachen zu unterstützen.

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

Ich glaube, das Folgende erlaubt es, eine Zeile in der Quelle zu ändern (und die unmittelbaren Auswirkungen zu sehen):

1. Codea Air Code : Code in Ihrem Browser (in Lua), siehe Ausgabe auf einem iPad mit WLAN-Verbindung.
2. Wasser von Gabriel Florit. HTML, CSS, wird in einem Browser ausgeführt.
3. Live Scratchpad von Neonux. Mozilla-Erweiterung.
4. Swift Interactive Playgrounds: Wird mit Xcode 6 zum Codieren in der Programmiersprache Swift geliefert.
5. JS Bin : HTML, CSS, Javascript wird in einem Browser ausgeführt.
6. Leuchttisch : Beispiel auf Youtube .
7. Atom : mit Vorschau HTML Plugin.

Hinweis: Ich habe nur Erfahrung mit 1, 5-7. Für viele von diesen glaube ich nicht, dass Sie Ihren Cursor auf einen bestimmten Teil des Codes setzen und die relevanten Teile des Bildes hervorheben können.

Bearbeiten: Artikel hinzugefügt Nr. 4 (2014.10.27), 5 (2014.10.31) und 6-7 (2015.03.12).

Edit 2 (2015.06.25): von http://sixrevisions.com/tools/code-demo-sites/ (die meisten davon sind HTML / CSS / Javascript).

1. Codepen
2. Liveweave
3. Dabblet
4. jsfiddle
5. Kodtest
6. Plunker
7. CSSDeck
8. Reloado
9. ideone
10. JQ.VER.SION
11. SQL Fiddle

Ich habe ein Plug-In für Emacs, PyCharm und Eclipse namens Live Coding in Python erstellt , das zwei der drei Funktionen abdeckt, nach denen Sie gefragt haben. Während Sie den Code eingeben, wird das Ergebnis eines Turtle-Grafikalgorithmus sofort aktualisiert.

Außerdem wird neben jeder Zuweisung der Status lokaler Variablen angezeigt. Hier ist eine Beispielanzeige eines binären Suchalgorithmus:

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 

Das IPython Notebook ist ein Schritt in diese Richtung. Obwohl es eher auf interaktive exploratorische Analyse für wissenschaftliche Probleme ausgerichtet ist, finde ich es sehr interaktiv und macht Spaß, es zu entwickeln.

• http://ipython.org/

Ich habe auch gerade Live Code entdeckt. Nach einigen Experimenten fand ich heraus, dass es nicht alle Prinzipien der Bret Victor-Philosophie umfasst. Es hat eine einfache Syntax, aber die Benutzeroberfläche ermöglicht keine interaktive Entwicklung. Sie haben noch einen weiten Weg vor sich.

• http://livecode.com/

Dann gibt es auch R. Seit den neuen Entwicklungen mit Shiny und Knitr finden einige interessante Innovationen statt, die der Philosophie von Bret entsprechen.

• rNotebook
• Live-Demo

Es gibt COLT - ein Live-Codierungswerkzeug für Flash (ActionScript3). Es ermöglicht Methodenaktualisierungen, das Hinzufügen neuer Felder / Methoden / Klassen, das Aktualisieren eingebetteter Assets usw. zur Laufzeit unter Beibehaltung des Anwendungsstatus, genau wie in Bret Victors Video. Es gibt einige Demo-Videos davon in Aktion, wobei dies das bisher beeindruckendste ist.

Es zwingt Sie nicht zu einer neuen IDE, sondern ist ein separates Tool, das die inkrementellen Updates an die laufende App sendet, wenn Sie in Ihrer IDE auf "Speichern" klicken.

JavaScript-Unterstützung wird ebenfalls angekündigt.

Die Jungs von Code Orchestra haben kürzlich ihr Livecoding-Tool namens COLT veröffentlicht. Es unterstützt JavaScript und ActionScript und sieht sehr vielversprechend aus. Sehr zu empfehlen, es auszuprobieren.

Haskell für Mac hat möglicherweise ein begrenztes Publikum, da es (a) plattformspezifisch ist - wie Sie vielleicht anhand des Namens erraten haben - und (b) kommerzielle Software (derzeit 20 US-Dollar). Aber es basiert sehr explizit auf Brett Victors Ideen, wie in einem frühen Blog-Beitrag besprochen .

Es verdient auf jeden Fall, zu einer umfassenden Liste von Programmierumgebungen hinzugefügt zu werden, die „Learnable Programming“ implementieren.

Heutzutage bieten viele Tools für die Frontend-Entwicklung das sogenannte "Hot-Reloading" an, wodurch Ihre Codeänderungen im Browser / mobilen Emulator sofort sichtbar werden. Dies ist unabhängig von der IDE / dem Editor.