Natto.dev – A Canvas for JavaScript
natto.dev
natto.dev
I'm actively working on natto.dev and it really is in "preview". I'm excited about the future of programming and having a canvas to explore it on. still looking for "crazier" ideas - my favorite current one is dragging a column out of a table. https://twitter.com/_paulshen/status/1366801887341649924
The more I work on it, the more confident I am that there's something there. If you try it, I'd love to hear your feedback!
natto takes inspiration from a whole lot of work. non-exhaustive list: Yahoo Pipes, Excel, design tools (Figma), Observable, darklang, GToolkit, SmallTalk (repl-driven), http://joshuahhh.com/projects/pane/, http://www.lamdu.org/, https://futureofcoding.org/catalog/
As much as I love natto (the food), I'll likely rename it at some point. Pronunciation hit rate has been 0%
Thank you very much for making it!
I consider natto a much?-code approach in realm of no/low-code. Instead of building abstractions (no-code), what if we built new environments and UI for code? I'm spending most time building UI and trying to keep execution abstractions as minimal as possible.
I'm interested in hearing what you think are some of the more difficult problems or bugs you've come across during development. Did you hit any stumbling blocks around handling user code or integrating babel or the terminal? Do you have any insights about preventing errors or crashes in how you parse and eval user code? (My typical test of a while(true) loop crashes this system, but you're still in good company; it crashes replit, browser dev tools, observable and just about every other clientside execution tool I've come across. The most popular solution appears to be the loop timeout transformation.)
I think the examples pages do a better than usual job of demonstrating your system, in particular the ubiquity of one liners and your connections between them. Do you have ideas or responses about the classic "mess of wires" critique that graphical coding systems inevitably receive?
This is such a fun domain to think about, thanks for sharing your work!
For more actual environments you can use I recommend https://observablehq.com/, https://starboard.gg/ and emacs along with the links above.
The expression is only transformed with Babel if you enable the JSX React transform. Otherwise, it's just straight eval-ed by your browser. It's by no means battle-tested (eg while (true)). I haven't tested circular deps and am leaving that as a surprise for myself in a little bit. One thing that I do is run the canvas in an iframe on a different domain for security reasons.
Parsing is something I'm trying to avoid as much as possible but it's likely I'll add it. Referencing things as inputs[2] doesn't feel stable. May help with implicit deps and avoiding wires (see observablehq.com)
As for mess of wires, I'm still forming my opinion! I want to learn more about nodes-and-wire programming and why it isn't mainstream. The hunch I'm getting is that visual programming feels better to create than consume. The space is great for exploration but looking at someone else's canvas can be chaotic. Maybe there are features that can alleviate this (multiple views, autolayout). Look at this haha https://twitter.com/_paulshen/status/1321872376234082305
It seems a little tough to visualize "flow" at first glance - some optional animations might be handy? e.g: when data comes in, animate a little bubble moving along the path, or little conveyor-belt style animations. An undo/redo feature (or more complex version control) would also be appreciated, I deleted a node and couldn't find a clear way to restore it.
Agree about undo/redo! on the todo list.
I've seen https://reactflow.dev/ but haven't used it myself. The core drag interaction is not much code but feel free to reach out on twitter. happy to share more!
Was a big fan of Pipes back in the day, so good job / neat work otherwise!
This is an incredibly cool product that is by their own words "very alpha" and people jump to "OMG i know what hijacking is so I'll point it out" for attention. It's kind of a tired trope. This is obviously not an intentional hacking of users but rather a quite harmless bug in the implementation of an undo/permalinking feature.
Great job to the devs and I hope I can find a utility for this product in the future, it's kind of a javascriptable excel concept, really cool.
I hate it when sites break the back button, but that's really not the same thing
The url should be updated to reference the current app view - this way you can copy the url for that particular resource and access it again by pasting with the same url.
This is how it worked for headers when websites were just plain documents. It's a very powerful feature and is exactly what the web is about - sharing resources easily.
Browsers have different ways of dealing with this like grouping items in the back history by domain, so that it's easy to leave the site back to page previous to the app session.
My prototype was not as neat and at some point I got convinced that it's actually easer to reason over algorithms when written in code and this visual style of programming works well as long as you deal with algorithms on very high level with no implementation detail considerations. When implementation details need to be part of the work, i.e. you need to think about how to fetch and transform a JSON file and match it with a CSV data it's actually easier to learn how to code and build your logic procedurally. Maybe people are not good at visually following large number of active objects and I think it's not only me because I'm sure that people get exponentially more confused with the addition of a new button or number to the scene.
When you don't have a simple enforced structure like "instructions execute from top to bottom" the visual freedom becomes yet another thing that you need to think. I find that the most visual processing tools that are helpful are spreadsheets, they have a good and simple structure to follow for storing and representing data and powerful features enabling calculations on that data. Google Docs also has data fetching functionality(not sure about Excel), making it a very interesting data processing software.
This is a very clever/usable implementation of flow-based programming (FBP), which is dear to many people's heart in HN and out.
FBP matches very easily the mental model of data flow and calls for quick mouse- or touch-based manipulation. Coming up with a usable UX for such paradigm is not trivial though, and your project seems on a good track.
I can only encourage you to take the (harsh) criticism in this comments' section with the necessary distance, and keep working on the project, because it's very good! Well done!
For interested readers there is a decent article[0] and previous discussion[1] a few months back which discusses this topic.
https://natto.dev/@dazld/7168773775bd401481366b7d62d14e8c
It's quite fun to think about the restrictions of this - getting an animation loop going, for example.
I imagine this might be quite useful to understand data-flow, but I worry that it would be tedious to manage the connections via positions during development.
It would be cool to have an auto-format/auto-layout: - data flowing left to right - draw pipes like yahoo pipes used to - minimize crossing pipes.
When in the programming loop, could the connections be established automatically via references? Name each output and then reference it somewhere else, which implicitly establishes the connection. Then click "auto-layout" (or just hit save) and as Steve would say "BOOM".
I love how everything snaps to the grid, and that it's achieved via CSS transforms.
It's just an unfortunate design choice which should have been avoided.
Maybe you can blame Apple and Safari, and maybe I’m unfair, but if that’s the first impression I get from something related to programming, well...
Given that this isn’t “Show HN”, please don’t comment about this.
* Some navigation buttons for zooming and panning quickly, maybe the mousewheel or a minimap?
* I like how you can drag arrows around to different windows, I think the icon there isn't super intuitive but that's a minor gripe! :)
I think one of the examples is broken, but dang you should add more examples, I like this kind of tool!
Mousewheel should pan! You can hold down spacebar to pan anywhere (also dragging). Clicking the 100% in the toolbar lets you zoom. Some more shortcuts here https://twitter.com/_paulshen/status/1381744260945379331
Which example isn't working for you? and I plan to add more examples (maybe community?) and interactive tutorial in the future!
Bonus: if you collapse a box, it becomes a black box.
Looks cool though!
Some background on Twitter too: https://twitter.com/_paulshen/status/1380292393291841541
I'd really like to see something like this in browser developer tools someday.
Right click -> add text Then type +/- in the text box
Being able to stuff it on its own little instance with no "back" to go to would allow people getting a cursory look at it to divert attention from the whole usability etiquette and concentrate on the thing itself, plus there might be some interesting gains in doing so too.
One other thing I'd love to have is an interactive tutorial, I'd love to be able to follow some steps to understand the thing better.