As a web dev I can't count the number of hours I've had to spend on re-loading a web page after an edit, and then clicking my way back to the state I'm actually trying to iterate on, even with hot module replacement enabled. Anyone know of visual programming projects where the user can execute their program, interact to change program state, pause program execution, edit the program to make changes, and then resume execution from that point on with a modified program? My current thinking is that there's a lot of potential edge cases where the program could break or fail due to undefined semantics, but there could be a sweet-spot for doing minor edits and staying productive due to not having to restart the program from scratch. Hot module replacement has become widely used, but that's limited by having to do traditional text-based coding, and it's only able to replace code at the module level. I'll illustrate one use case where I think there's a good tradeoff between complexity and reward for the user: • Open a page in the product being coded in a VPL environment • Open some kind of overlay, e.g. a dialog • Pause the program • Tweak the appearance of the dialog while remaining in the context of the current program state • Add new UI elements to the dialog (non-breaking changes) • Resume the program

yeah I literally just posted a livestream of me doing it. It uses observable that does hot-code reloading at a spreadsheet cell level https://futureofcoding.slack.com/archives/CCL5VVBAN/p1655305481506719?thread_ts=1654599838.770959&cid=CCL5VVBAN

Anyone know of visual programming projects where the user can execute their program, interact to change program state, pause program execution, edit the program to make changes, and then resume execution from that point on with a modified program?

I'd like that too. https://ivanish.ca/hest-time-travel/

@Ivan Reese time travel would be mind-blowing as well! Any recent developments since that blog post? I've seen replay.io doing some cool things here, but they had to go to the browser runtime level to make it possible if I understand their approach correctly.

I did a fair bit more prototyping after that blog post, and discussed it in a podcast mini-series. The project is on hold right now because I need to take care of some other things at work. Planning to pick it up again around this time next year, but we'll see.

Yep, working on visual programming for UX designers: https://futureofcoding.slack.com/archives/CCL5VVBAN/p1653320954120799

Observable manges to avoid the "pause/play" interaction by reactive hot-code reloading cells on any code change. It also avoids the switching between code and output by using per cells editors so its all interleaved in the same browser env. It is made for developing visualizations so it meets your criteria of being graphical (its by the creator of D3 to address the ergonomics of dataviz creation). This notebook is fairly mind blowing in its visual innovation https://observablehq.com/@makio135/creative-coding

@Tom Larkworthy Wow, that's a pretty wild demo of the capabilities 👍 With Observable the trigger to enter edit mode is focusing the code editor and typing. With a visual canvas, it's a single interaction target, so I don't see how we'd understand whether the user is looking to interact or edit without a toggle button for interact/edit mode. Still, that toggle button is only a single click, same as focusing/clicking in the code editor in Observable, so not a significant friction.

Oh I did not understand you meant against direct manipulation, wow, that sounds interesting! I see in your other thread you are struggling with determining the dependency graph over Typescript. I am fairly sure Observable uses Acorn because their early developer made the following notebook which I think hints at how they figured out cross references in their private compiler: https://observablehq.com/@tmcw/notebook-distiller Then they put all the cells in their open source runtime that does the auto-invalidation and recomputation.:- https://github.com/observablehq/runtime There is a project trying to recreate the private compiler.

@Tom Larkworthy Thanks, will take a look 🙂 And yes, it's interesting work, that's for sure!

I’m working on CodeParadise a Smalltalk web framework. It has a MVP model in which Views are WebComponents which will visually update (in all running sessions) as soon as its HTML or CSS is changed/saved. When View logic (written in Smalltalk) is changed, it gets installed in the running sessions as well. So the click handler can be changed while the dialog is already shown. All in Smalltalk style: direct manipulation of objects. I’m preparing some demos and hope to share soon.

@Erik Stel Ah, that's pretty cool. If I understand correctly, the program modifications are taken care of by Smalltalk? Can you point to me any docs around how they manage this, and the limitations?

Hi @Jim Meyer Will reply later with more details (on mobile only atm). In part it's default Smalltalk behaviour to manipulate live objects in an image based environment in which both dev tools and business objects exist. In part it’s my own code listening to relevant change announcements (events) in the code base.

One of the talks from hytradboi had a proposal for this: https://www.hytradboi.com/2022/building-data-centric-apps-with-a-reactive-relational-database If literally everything including the current UI state is in a database, then you can stop your solution and start it up again exactly where you left off. If the database supports time travel, you could also debug the application by re-running exactly what happened. @Geoffrey Litt was one of the authors (not sure if the others are in this Slack).

@Timothy Johnson Thanks for the link 🙂 That's a really cool way to approach state persistence!