Jonas Gebhardt - Evolving the Visual Programming Environment with React at react-europe 2016

[@excitedbox5705]

too bad this didn't go anywhere. I was really looking forward to this.

[@cryptodude_btc]

Not exact same thing but cool none the less, check out Node-Red.

[@HenleyBailey]

This is cool. Reminds me of Unreal Engine (the game engine) with their blueprints, you can also build 2D games but there might not be a reason you couldn't put together apps using it if you were creative.

[@paulofalca0]

I love the idea of using js / html to make a custom UI for each node! Very cool :)

[@metropolis10]

reminds me a lot of Khan Academy's visual js editor and Bret Victor's famous talk "Learrnable Programming".

[@mfpears]

I'm really really sad this wasn't open sourced.

[@gggiiia147]

bruh sometimes u do need to be payed for your work, not every time, just a lil bit u know xd

[@DustinRodriguez1_0]

He mentions that the nodes represent pure functions... yet earlier, he had a node which output a time value. That's pretty much a canonical example of an impure function. Is it treated specially? Also, around @18:40 or so he mentions 'you could conceivably group those functions into a single function'... why just 'conceivably'? That's what I consider to be the biggest downfall of visual programming languages done thus far. Any large system ends up, at best, extremely difficult to deal with because you have so many nodes and so many connections going everywhere. And you end up with tons of repeated patterns of nodes if you have no way to take a certain pattern and group it so that it is usable as its own type of node. When he showed the prototyping slide, I immediately thought the point of explaining that designers are coding and showing what the design behind the prototype looks like was to show what a screaming horrible mess it was. But apparently not, he wanted to reuse it (!). Some VPLs permit this, where you can select a group of nodes and hit a key or select a menu item to collapse them into a new 'function node' which takes all the inputs necessary to feed the grouped nodes as its own input, and then produces the collected output of all the selected nodes as its output. But every single one I have seen takes 1 of 2 equally bad approaches. The most popular one is after the nodes have been grouped, they collapse to a single node, and if you want to review the contents of that node it either opens that node as your new workspace, or else opens it in a new window. The other option is to simply put a band around the group and leave all the components nodes and their connections visible, providing logical segmentation but not really helping with the problem of there simply being too much content that has to be scrolled all around in order to follow how the system works. I have an idea for an option that I think would work better. Anyone feel free to steal it, I mostly stole it from somewhere else anyway. The game Supreme Commander specifically. It's a top-down perspective real time strategy game which operates on different scales, both physical and conceptual. In order to move from one scale, say being fully 'zoomed in' and examining a single unit under your control, up to fully 'zoomed out' where you're viewing a gigantic map with your units locations only indicated by points, you hold the shift key and roll the mousewheel. That's it. You continuously move from the deepest, out to the most general view, and the details of the deeper situation disappear, making the larger strategy clear. Such a thing is needed for a VPL, and that exact interface is probably what is needed. Discrete jumps don't work. Leaving everything visible is like trying to understand or maintain an application with a single file of C code. Making more capable opaque nodes and adding them to your toolbelt does little to solve the problem. When you inevitably need to delve inside those nodes, you can't. That ends up driving the tool to being useful for prototyping or similar but not for final implementation. And it leaves things like adding two numbers together taking up just as much real estate as fetching and filtering a web page. Programming is inherently more multi-dimensional than this. You need to be able to go 'out' and 'in' just as easily as you can go up or down. My recommendation would be to make a VPL where the user is completely restricted and can never scroll their primary workspace canvas. If a bit of functionality is cluttering the entire screen with nodes and connections, you need to start grouping the logical parts of your program and collapsing them into their own nodes. Your top level should be 1 node called 'run application' or similar. And you should be able to continuously 'zoom' in from there down to the most atomic operations which were all composed to build your system. In a web environment, it'd probably be asm.js code or something. That's the dream anyway. And I think far more important than direct manipulation at least.

[@clankill3r]

Did you ever use ICE from softimage? For me it is the best FBP I ever used.

[@corpusc]

i think 2D visual programming can never live up to the promise (of empowering you to quickly & visually digest / download the logic into your brain). outside of trivial or limited domain scripting, such as graphical shaders. but i think 3D visual coding will be huge some day. in 3D, you can group most related things really close to each other with the help of the extra dimension. thus keeping the majority of your connecting lines (between those parts) extremely short. similar to real-world physical machines/engines.

[@joelwilson9784]

Tersus Studio handled this zooming method pretty well, but it hasn't progressed much in years.

[@osvibascur4601]

Looks good. Please let me know when you have a usable editor to connect and experience it.

[@DrToddles]

When will this be available?

[@brennan123]

Which libraries did you use to make the visual node editor?

[@twinreverb87]

Take a look at the D3 Tree Diagram. The "node" that is rendered will be a custom component containing the controls. Add some interactivity, and you can build something similar.

[@cryptodude_btc]

Node-Red for those looking for a simple visual scripting via wired nodes like this guys "Combine"

[@dr-maybe]

Very interesting project and insights!

[@mr_erdk]

Both impressing and inspiring

[@GuillermoValleCosmos]

I'm very annoyed at not being able to see the code, asjlkasjds

[@gggiiia147]

bruh he said what he used at the beginning, the implementation is trivial

[@iRedee]

If there are recursive graphs and quality commenting (or note taking) In would much rather use this then Jupyter

[@grzegorzdvipek]

This is great! Is this thing still in development? Or did it die??

[@mfpears]

Grzegorz D. Did you ever find anything out about this?

[@grzegorzdvipek]

Yep. I asked Jonas directly on Twitter: twitter.com/grzegorzdyrda/status/883631606103248896

[@mfpears]

Grzegorz D. That's awesome! Thanks!

[@JulianMerghart]

Amazing

[@mfpears]

What's the status on this? Anybody working on something similar?

[@nicholaslogan5185]

Yes, but mine is only a side project and is very early on. Damn paying jobs right?

[@lucasalberto]

share code?

[@JosefCZE]

There is Luna (www.luna-lang.org)

[@onecoding]

I'm working on something like this too. Started long before discovering the video. Ended up at a lot of the same insights. Happy to share ideas :)

[@KostyaKurilov]

@@nicholaslogan5185 Im making similar. Are you still in game?)

[@5imian]

He basically build Max/Msp

[@raviteza8]

Enter Matlab/Simulink

[@jigz347]

The development would've been a lot faster if this was open sourced so people could contribute to the project.