Des outils à l'appui direct de codage dans le Bret Victor, “Inventer sur le Principe de” parler

J'ai regardé déjà bien connu vidéo où Bret Victor, ancien d'Apple concepteur d'INTERFACE utilisateur affiche des démos avec la mise à jour immédiate de l'exécution de code après avoir changé littéralement un symbole dans le code source.

À faire de ma question clair pour ceux qui n'ont pas vu ou n'ont pas le temps de regarder la vidéo: je veux utiliser un outil comme celui d'écrire mon propre logiciel. Est l'outil qu'il faisait une démonstration disponible, ou il y en a d'autres outils similaires?

Il n'est pas question que les langages/environnements, je veux juste avoir mon code en cours d'exécution et ensuite modifier une ligne dans la source et de voir immédiatement les résultats mis à jour sans avoir à redémarrer il.

La vidéo est également disponible sur YouTube, et les points essentiels sont:

  • 03:30 - 05:30 - en Direct de codage graphique de l'algorithme (de l'espace)
  • 11:00 - 14:30 - Live coding certains code de jeu (espace & temps)
  • 17:30 - 21:30 - en Direct de codage des variables locales (état)

InformationsquelleAutor izhak | 2012-02-25
  1. 27

    Qui ne

    Vous trouverez beaucoup de choses intéressantes dans la Réagir et l'ORME des communautés, et en frontend de la programmation fonctionnelle des communautés en général.

    Récente de la full-stack plates-formes qui sont en quelque sorte essayer de fournir un environnement de développement de ce type sont:

    Eve:

    Un Andreessen Horowitz /Y-Combinator de démarrage, de 2,3 millions de dollars financé, à partir de Chris Granger, un affluent du Clojure programmeur qui a déjà construit LightTables.

    Technologies: Rouille (backend), Tapuscrit (frontend) avec un home-made de mise en œuvre de Réagir concepts (ce qu'ils appellent "microReact")

    L'unisson:

    Pas une entreprise (encore?) mais pris en charge par un Patreon campagne, à partir de Paul Chiusano (auteur du célèbre livre "FP à la Scala").

    Technologies: Haskell (backend), l'ORME (frontend).

    Note: vous pouvez voir que le gars derrière ces outils sont expérimentés fonctionnelle des programmeurs. Cochez la case "comment ça marche" section.

    Comment cela fonctionne -> programmation fonctionnelle

    Programmes de l'état.

    Pourquoi Bret Victor est capable de faire cette vidéo?

    Parce que:

    • son architecture est explicite sur l'état des mutations
    • il utilise fonctionnelle pureté
    • il enregistrement des faits historiques que l'état, plutôt que de l'état actuel de l'INTERFACE utilisateur

    Un outil inspiré par ce discours, de l'ORME de la langue.

    ELM les états qui:

    Donc à la racine du débogueur est la conception de l'Orme lui-même. Si vous ne
    ne pas commencer par la droite des choix de conception au niveau du langage,
    la création d'un temps de voyage débogueur devient rapidement très complexe.
    Même dans des langues qui s'acquitter partiellement de la conception
    exigences ont de sérieux défis.

    Donc, ce que vous avez vraiment à comprendre, c'est que ce n'est pas la technologie qui est intéressant, mais le logiciel sous-jacent de l'architecture. Une fois que vous avez l'architecture, il n'est pas si difficile d'ajouter ces fonctionnalités de débogage.

    Beaucoup dans le ReactJS/Flux communautés ont montré que l'on peut réaliser des choses vraiment super avec ce type d'architecture. David Nolen de Om's ClojureScript hype est probablement le déclencheur, et Dan Abramov a montré récemment que nous pouvons réaliser des choses similaires qui se compare aux Bret Victor de débogage de l'.

    Moi-même j'ai fait des expériences avec des enregistrement de la session de l'utilisateur, des vidéos en JSON, qui est également une caractéristique qui est mise à profit par ce type d'architecture.

    Donc, vous devez comprendre que ce qu'il réalise n'est pas fait par clever code des astuces, ou un super langage, mais vraiment bon modèles architecturaux.

    Ces modèles ne sont même pas nouveaux, ils sont utilisés par les créateurs de bases de données et certains développeurs back pour un très long moment sous différents noms, y compris de commande/event sourcing, la journalisation... Si vous voulez une introduction, le Confluentes.IO blog est un très pédagogique source.

    Le problème n'est même pas sur de rechargement code, il est tout au sujet de ce à voir avec l'état après le code a été rechargée.

    Ce que vous avez vraiment besoin de comprendre, c'est qu'il n'y a pas de réponse unique à cette question: tout dépend de ce que vous voulez atteindre.

    Par exemple dans le Bret Victor exemple avec Mario, quand il modifie certains paramètres comme la gravité, vous pouvez voir qu'il peut affecter à la fois le passé (ce qu'il a enregistrées) et le futur (les actions qu'il va faire après le changement de code). Cela signifie que l'utilisateur intention est réinterprété dans un contexte différent, la production d'une nouvelle histoire de faits (souvent appelé commande-sourcing).

    Tout ce qui est vraiment intéressant pour les jeux vidéo, comme il l'a montré, il est tout à fait inutile pour de nombreuses autres applications. Prenons un exemple d'une responsabilisation de l'application, où l'impôt % pouvez augmenter ou diminuer chaque année. Pensez-vous vraiment modifier l'exercice en cours impôts % devrait avoir aucun effet sur le bilan de 10 ans? Évidemment pas, mais il peut néanmoins avoir des effets sur l'année en cours.

    Aussi le Mario positions de plateau lors du réglage du paramètre de saut, l'outil ne peut pas savoir par lui-même qu'il est à l'affiche pour le Mario élément. Vous devez être explicite à ce sujet sinon il pourrait faire de même pour les nuages ou la tortue. Et est-il judicieux de faire de même pour la responsabilité de l'app?

    Ce que je veux dire ici, c'est que c'est une démo fraîche, qui a été bien réalisée. Vous ne pouvez pas obtenir le même environnement de dev qui travaillent si bien hors de la boîte. Mais vous pouvez apprendre les formes architecturales qui permettent de le faire facilement, et utiliser des outils comme l'ORME /Om /Redux /Flux /ReactJS (et certains Haskell /Scala /Erlang peut être utile aussi!), qui vous aidera grandement dans la mise en œuvre correctement et de vous fournir le plus qu'ils peuvent pour chaud de rechargement.

    • En comptabilité, vous avez de l'impôt de l'année n, l'impôt de l'année n+1, etc. Ils sont différents des taux, de sorte que les différentes entités. Le changement de l'un ne modifie pas les autres.
    • Existe-il des outils similaires disponibles pour modéliser les instructions SQL en temps réel? Ne vous souciez pas vraiment qui SGBDR.
    InformationsquelleAutor Sebastien Lorber
  2. 12

    Chris Granger est la construction de quelque chose qui s'appelle la Lumière de la Table qui semble prometteuse aller dans cette direction. D'abord il ne l'appui Clojure, mais il est prometteur à soutenir d'autres langues dans le futur.

    • À compter de janvier 2014 LightTable 0.6.0 est maintenant open source et hébergé sur GitHub. Il prend désormais en charge Clojure, Python, JavaScript, HTML et CSS (et le plus possible via les plugins).
    InformationsquelleAutor Eamonn O'Brien-Strain
  3. 10

    Je crois suivantes permettent de changer une ligne dans la source (et de voir les effets immédiats):

    1. Codea Code Air: Code sur votre navigateur (en Lua), voir la sortie sur un wifi connecté à l'iPad.
    2. L'eau par Gabriel Florit. HTML, CSS, s'exécute dans un navigateur.
    3. Vivre Pavé par Neonux. Mozilla extension.
    4. Swift Interactive des aires de jeux: livré avec Xcode 6, pour la codification dans le langage de programmation Swift.
    5. JS Bin: HTML, CSS, Javascript s'exécute dans un navigateur.
    6. Table Lumineuse: exemple sur Youtube.
    7. Atom: avec aperçu html plugin.

    Remarque: j'ai de l'expérience avec 1, 5-7. Pour beaucoup de ces pays, je ne pense pas que vous pouvez mettre votre curseur sur une certaine partie du code et les parties pertinentes de l'image en surbrillance.

    Edit: ajout d'éléments pas. 4 (2014.10.27), 5 (2014.10.31), et 6-7 (2015.03.12).

    Edit 2 (2015.06.25): à partir de http://sixrevisions.com/tools/code-demo-sites/ (la plupart de ces sont en 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 Violon
    InformationsquelleAutor nathanielng
  4. 10

    J'ai construit un plug-in pour Emacs, PyCharm, et Eclipse appelé Vivre Codage en Python qui couvre deux des trois caractéristiques vous m'avez demandé. Il instantanément les mises à jour à la suite d'une tortue graphique de l'algorithme pendant que vous tapez le code.

    Des outils à l'appui direct de codage dans le Bret Victor, “Inventer sur le Principe de” parler

    Il affiche également l'état des variables locales à côté de chaque mission. Voici un exemple d'affichage d'un code binaire de l'algorithme de recherche:

    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
    InformationsquelleAutor Don Kirkby
  5. 3

    La IPython Notebook est pas dans cette direction. Bien que, il est plus orienté vers Interactive Analyse Exploratoire de problème scientifique, je trouve que c'est très interactif et amusant pour développer avec.

    Je viens aussi de découverte de Code en Direct. Après quelques essais, j'ai trouvé, il n'englobe pas tous les principes de Bret Victor philosophie. Il dispose d'un droit de l'avant de la syntaxe, mais l'INTERFACE n'est pas de développement interactif. Ils ont encore du chemin à parcourir.

    Puis il y a aussi R. Depuis les nouveaux développements avec Brillant et knitr quelques innovations intéressantes ont lieu, qui est en ligne avec Bret de la philosophie.

    InformationsquelleAutor Oq01
  6. 2

    Il y a COLT — en direct d'un outil de codage pour Flash (ActionScript3). Il permet à des méthodes de mises à jour, l'ajout de nouveaux champs/méthodes/classes, la mise à jour intégré actifs, etc au moment de l'exécution, tout en préservant l'état de l'application, tout comme dans le Bret Victor vidéo. Il y a quelques vidéos de démonstration en action, avec cette être le plus impressionnant à ce jour.

    Il ne vous force pas à tout nouvel IDE, c'est un autre outil qui envoie les mises à jour incrémentielles à l'application en cours d'exécution lorsque vous cliquez sur 'enregistrer' dans votre IDE.

    Prise en charge de JavaScript est également annoncé.

    InformationsquelleAutor Alexander Eliseyev
  7. 0

    Code de l'orchestre gars a sorti récemment son livecoding outil appelé C. O. L. T. Il prend en charge JavaScript et ActionScript et semble très prometteur. Hautement recommandé de l'essayer.

    InformationsquelleAutor Michael Tkachuk
  8. 0

    Haskell pour Mac peut avoir un public limité, puisque c'est (a) une plate-forme spécifique — comme vous avez pu le deviner à partir du nom et (b) d'un logiciel commercial (de 20$à l'heure actuelle). Mais c'est très explicitement sur Brett Victor idées, tel que discuté dans un des premiers post de blog.

    Il mérite certainement d'être ajouté à toute la liste exhaustive des environnements de programmation que de mettre en œuvre “faciles à apprendre la Programmation”.

    InformationsquelleAutor wjv
  9. 0

    Ces jours pour le frontend développement de nombreux outils d'offrir quelque chose qui s'appelle "hot-rechargement", en gros de faire vos modifications dans le code immédiatement visible dans le navigateur/mobile emulator. Ceci est indépendant de l'IDE/éditeur.

    InformationsquelleAutor Torsten Engelbrecht