Bret Victor et le futur des interfaces de développement

Bret Victor est un concepteur logiciel/développeur/visionnaire. Il a travaillé 4 ans chez Apple et a plus récemment travaille sur l’excellent livre interactif Our Choice sur iPad. Hier matin, la toile était en ébullition devant une vidéo d’une conférence de Bret Victor au CUSEC2012 : « Inventing on Principle« . Au cours de cette conférence, il explique l’importance dans le monde informatique d’avoir des principes qui guident vos choix, vos décisions techniques et vos créations. Et il détaille son propre principe :

Si nous écrivons du code sur un ordinateur, pourquoi est-ce que nous simulons ce que l’ordinateur devrait faire dans notre tête ? Pourquoi l’ordinateur ne peux pas juste le faire et nous le montrer ?

Au cours des 35 premières minutes de sa conférence, Bret présente différents outils et interfaces qu’il a développé pour faciliter sa créativité, et obtenir un rendu immédiat de tout son code. Si vous faites du développement JavaScript, du développement Flash, de l’animation pour le web ou du web en général, vous devez impérativement regarder cette conférence.

Au cas où vous n’auriez pas le temps de regarder cette vidéo ou ne seriez pas encore totalement convaincu, voici quelques détails sur sa présentation.

En premier lieu, Bret présente un éditeur Canvas HTML5. La particularité de cet éditeur, fidèle à son principe de création, est d’afficher en temps réel la moindre modification. Il présente d’abord l’exemple d’une illustration d’un paysage en Canvas (de 2’30 à 9’30), puis d’un mini jeu de plates-formes inspiré de Braid (de 10’30 à 16’30). Si vous n’avez que quelques minutes, prenez le temps de regarder ce deuxième exemple (et si Vimeo vous insupporte, j’ai uploadé cet extrait sur Youtube).

Un éditeur de jeux

Outre les petits détails bien pensés de son interface (comme la possibilité de moduler rapidement la valeur d’une variable, numérique ou d’une couleur par exemple), la nature même de JavaScript et son exécution à la volée est ici mise en avant de façon extraordinaire. Si vous faites du Flash, ça risque d’être difficile de revenir à la réalité et à votre routine habituelle : je code pendant 5 minutes, je compile pendant 1 minute, je teste 30 secondes, et je recommence.

Un des gros avantages de JavaScript et son exécution à la volée est également mis en avant à travers un 3ème exemple (de 17′ à 23′): la création d’un algorithme de tri binaire. Si vous développez, vous connaissez la routine : vous réfléchissez à un algorithme, vous codez une première version, vous testez un premier cas, vous ajustez si nécessaire, vous testez un deuxième cas, vous réajustez si nécessaire, etc… Ici, une partie de l’interface retranscrit en direct les valeurs des différentes variables de votre code, tout en précisant vous même les valeurs de tests des paramètres passés à votre fonction.

Un éditeur d'algorithme

S’en suit une présentation d’un 4ème exemple (de 23′ à 28′) démontrant cette fois-ci l’intérêt d’une interface en temps réel hors programmation informatique avec des circuits électroniques. Et enfin, le clou du spectacle (de 29′ à 34′), la réalisation en 2 minutes d’une animation sur iPad, littéralement faite à la main, qui aurait pris une journée à faire sur l’IDE de Flash pour un néophyte.

Cette conférence véhicule pleins de valeurs que j’essaie de défendre à travers mes articles : l’importance d’un mantra, la pertinence de JavaScript comme étant un langage digne de ce nom, ou encore le fait que HTML5 pousse à la créativité au delà des limites de tout IDE. Comprenez, donc, mon emballement.

 

  1. Luc, le

    Savez-vous quel éditeur il utilise ?

  2. lionel, le

    Ca illustre bien un problème de la création numérique actuelle.
    Ce qu’il met en évidence dans sa conf, avec ses outils, c’est le manque d’outils vraiment adaptés au besoin du développeur, de l’animateur, du monteur vidéo.
    Après ramener ça au javascript,… mouais… c’est vrai pour n’importe quel langage.

    D’un autre coté, un développeur expert n’a pas autant besoin de tester / voir ce qu’il fait en temps réel, c’est perdre beaucoup de temps. Pour de l’expérimentation, de la création c’est par contre bien plus productif, plus adapté pour des artistes numériques.

  3. Rémi, le

    @Luc : c’est un éditeur maison.
    @lionel : J’ai ramené ça à JavaScript parce que ça serait impossible avec n’importe quel langage compilé (ActionScript, par exemple).

  4. lionel, le

    @remy oui c’est envisageable pour n’importe quel langage de script (huhu, actionscript comme par hasard, et pourquoi pas Java ?)

  5. mythos, le

    « ça serait impossible avec n’importe quel langage compilé »

    Notch sous jRebel : http://www.youtube.com/watch?v=BES9EKK4Aw4

    C’est déjà le cas pour tous les langages, c’est le principe du debugger. Sous Eclipse (Flash, Java, C++), CTRL + SHIFT + B puis F11, tweaker le code, admirer le résultat. C’est comme ça que travaille un développeur dans un langage compilé.

    C’est juste une démo assez classique de hot-swap, rien de neuf, si ce n’est que c’est du JS, qui dispose pas de ce genre d’outil à la base, alors que c’est fourni par défaut sur les langages compilés.

    « Si vous faites du Flash, ça risque d’être difficile de revenir à la réalité et à votre routine habituelle : je code pendant 5 minutes, je compile pendant 1 minute, je teste 30 secondes, et je recommence. ».

    Se servir d’un debugger c’est un peu une compétence de base … Un développeur – même Flash dans une sous-agence Web de province comme stagiaire – qui travaillerait de la façon que tu décris ça n’existe pas dans le milieu professionnel. Un build d’application non-triviale prend plusieurs minutes, il n’est pas possible de travailler ainsi.

    Ne pas faire de billet sur le développement quand on est intégrateur HTML ! C’est un métier !

  6. Rémi, le

    Ta condescendance me va droit au coeur.