Designing a Dataflow Editor with TypeScript and React
research.protocol.aiThese look relevant if anyone is interested in developing node based tools with react
As someone who's been building small projects with these kinds of libraries for years now, https://x6.antv.vision/en is absolutely incredible. All the antv libraries, especially when combined, are a vast distance ahead of anything else (most importantly in their conceptual foundations and design), and I highly recommend playing with them.
Can you elaborate?
Also https://rete.js.org/
Flume and ReactFlow are Fire! Thanks for sharing.
"Our broader goal in writing this up was to illustrate some higher-level TypeScript features and type-driven design patterns in the practical context of modern web development."
Is type-driven design a think? For me it's just development ...
It's rarer these days, but there are still plenty of devs who don't think static types are important.
Is it rarer because of all the devs who decided that static types are a substitute for unit tests?
I think the reverse is more common.
Yeah, check out Type Driven Design with Idris or this presentation https://fsharpforfunandprofit.com/ddd/
It’s as opposed to db driven design, or object oriented design
The one thing that I always wonder about things like this which is basically Figma or Miro is how you persist / store the coordinate of the nodes given the user might have different screen sizes or resize their window etc.
the screen, or rather whatever container is rendered on the page, is just a viewport to an underlying canvas. The canvas can be zoomed and panned, and the focus of the panning and level of the zoom can be synced across machines. People with different size or shape viewports see slightly different cropping, but they are looking at a synchronised canvas through that viewport.
Hmm Right that makes sense but you have to give some width/height to the container right?
I guess you can set it something absurdly large.
Love to see other flow based applications. Fluxion (https://fluxion.app) was my baby for a long time.
Nice, too bad it’s React. Once you go Svelte you can’t go back.
For anyone intending to use this in production, note that it is inoperable to people who can't use mice (which can be caused by any number of disabilities or conditions).
What are some accessibility interfaces/strategies for art/design tools? Surely some of those can be adapted here.
What is the alternative?