I think it would be very useful if there were a way to box other boxes, possibly designating specifc ones as the input/outputs of the big box.
Bonus: if you collapse a box, it becomes a black box.
Natto.dev – A Canvas for JavaScript
51–60 of 101 posts
Re: Natto.dev – A Canvas for JavaScript
#52Hi all! Developer here before first coffee 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.…
The Yahoo Pipes inspiration is obvious I think - which is a good thing. How do you judge the changes between your service and it? As far as I can see, you picked the code heavy approach, while Pipes was more "here is a block that does X". Natto feels to me more like programming, with Pipes being more about composing fixed functions to manipulate data. Conscious choice? Worth the complexity? Do I judge that wrong?
Yes, very intentional! I'm taking a JavaScript-first approach. I know JavaScript, you probably know JavaScript, and the browser runs JavaScript. It's not the perfect language but here we are. It has lot of nice qualities!
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.
Re: Natto.dev – A Canvas for JavaScript
#53Hi all! Developer here before first coffee 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.…
This is a great project in a space that I've been playing around for a little while, fun to see it here!
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!
Re: Natto.dev – A Canvas for JavaScript
#54I think it would be very useful if there were a way to box other boxes, possibly designating specifc ones as the input/outputs of the big box. Bonus: if you collapse a box, it becomes a black box.
yes! This is what I'm exploring next, composability. One idea is to make "big boxes" like you describe. The other approach is to make canvases have special input/output pane and the ability to reference/run other canvases.
Re: Natto.dev – A Canvas for JavaScript
#55I think it would be very useful if there were a way to box other boxes, possibly designating specifc ones as the input/outputs of the big box. Bonus: if you collapse a box, it becomes a black box.
Check out Tangible Functional Programming by Conal Elliott for an interesting take on this approach
Re: Natto.dev – A Canvas for JavaScript
#56Hi all! Developer here before first coffee 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.…
This is so cool! I am very excited to give it a proper go!
Re: Natto.dev – A Canvas for JavaScript
#57this is awesome, great job. by the way, i'm the creator of the API you're using for the nba example :)
Re: Natto.dev – A Canvas for JavaScript
#58Hi all! Developer here before first coffee 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.…
This is a great project in a space that I've been playing around for a little while, fun to see it here! 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…
Would you mind sharing other interesting examples of projects in this vein? Thanks!
Re: Natto.dev – A Canvas for JavaScript
#59I'm surprised no one's mentioned Node.red yet, something this reminds me on and could see evolving as a competitor to.
Re: Natto.dev – A Canvas for JavaScript
#60Hi all! Developer here before first coffee 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.…
This is a great project in a space that I've been playing around for a little while, fun to see it here! 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…
The eval of natto maps surprisingly well to React's primitives (memoization, effects). This is pseudocode for the main eval https://gist.github.com/paulshen/9889b6067609f9053a0d56d4641...
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