5 ms·
React's threejs/pixijs bindings are a great example of what vdom diffing can let you do. Since they bring their own reconcile(a, b, diff) function to React, th
by hombre_fatal 1y ago
React's threejs/pixijs bindings are a great example of what vdom diffing can let you do.
Since they bring their own reconcile(a, b, diff) function to React, these libs can turn:
const world = new World()
const player = new Player()
world.add(player)
// somehow wire up the code to keep
// player.pos updated
Into:
const [x, setX] = useState(0)
return <World>
<Player x={x} />
</World>
In other words, you write declarative code, and it does the hard imperative work of adding/removing/disposing/updating things for you.
Just like how it helps you sync your data model to underlying stateful DOM nodes; the idea can be applied on top of any stateful system.
- cjonas 1y agoJust to clarify, you'd write the bottom code (declarative) and the library translates it to the above (imperative) code?
- MortyWaves 1y agoThat’s right
- cjonas 1y agoAre there any guides on using the "react style" framework (JSX / State) to generate outputs other than DOM? I've been interested in the idea of doing something similar for JSON or markdown document generation.
- cwackerfuss 1y agoI don't have a good guide for you, but this is the lib you use to create custom React renderers: https://www.npmjs.com/package/react-reconciler https://www.npmjs.com/package/react-reconciler
- atoko 1y agoI’m working on the documentation, but I have a useful implementation of <GithubActions > JSX: https://github.com/levicape/fourtwo https://github.com/levicape/fourtwo The best way to use template JSX is either with a CLI, or by using #! pragma to output the constructed yaml after using a builder.
- didgeoridoo 1y agoThis imperative/declarative shift happened as part of UIKit -> SwiftUI too. However, it’s still pretty well accepted that if you’re doing anything “complicated” you’re going to end up writing UIKit imperative code. I wonder if there’s any research (PL or maybe even more philosophical) on whether declarative approaches can logically cover all imperative use cases. Basically: is there something special about “verbs” (imperative) that let you do things that “nouns” (declarative) cannot, at least within reasonable verbosity constraints?
- nicce 1y agoAren’t declarative approaches just abstractions over imperative? Somehow you need to get there. (Processor executes instructions, in the end)
- eyelidlessness 1y agoA (the?) major area where this is generally considered unanswered, and active in PL research, is “effects” (as in, side-effects).
- banalico 1y agoI think there are declarative languages that are Turning-complete, like Prolog, etc. So declarative approaches should be equally good.
- hombre_fatal 1y agoYeah, one of the qualities of the abstraction is how often you have to reach for the escape hatch, how nice it is to use the escape hatch, and whether it's an escape hatch vs. just two clean modes of tooling working together. SwiftUI has failed pretty much all of those for me. In react-pixi / react-three, you have your declarative component tree alongside a `useTick`/`useFrame` function that you can use to do more surgical work, and it works well together. Each component can tap into the tick to update itself. const Enemy = ({ initalPos, size }) => { const [pos, setPos] = useState(initialPos) useTick(dt => { setPos(/* Move in a circle */) }) return <Sprite src="/enemy.png" size={size} pos={pos} /> } I've migrated a few medium-sized pixi/three projects to their React wrappers, and the code cleaned up so well that I could work on them again. Before that, I'd tried modeling games in Elm and then using its port system to send the game state to JS which then updates the pixi/three world. But it's exactly this updateWorld(oldWorld, newState) that's hard to write, yet that's what these libs do for you.
- eyelidlessness 1y agoMinor nit, because this is one of my weird special interests: this (being render-agnostic) isn’t necessarily a property of React’s virtual DOM. It’s a property of JSX being explicitly specified without semantics. For instance, Solid also supports custom JSX renderer, but doesn’t use a VDOM to achieve that. I find it helpful to think of JSX as analogous to a macro (in the lispy sense of the term), except that its syntax and implementation are decoupled. Most compiler tooling assumes the implementation maps to a function call, but even that isn’t strictly required (and again, Solid is a counter example).
- deleted 1y ago[deleted]
- deleted 1y ago[deleted]
- ttfkam 1y agoAnd JSX is not needed either, as seen with Threlte. https://threlte.xyz/ https://threlte.xyz/ When all you know is React, everything gets viewed through that limited lens.
- hombre_fatal 1y agoSheesh. The point is about the declarative abstraction and how it's useful for people who don't know what "React Three" might entail, not to enumerate all the frameworks that have it under a submission about "React Three Ecosystem".
- hombre_fatal 1y agoJSX gets compiled to a tree of function calls, but the hard part is done using react (or solid, or svelte, or ...) to hook in to the lifecycle of nodes in that tree.
- brundolf 1y agoSomething I wish is that you could "render" JSX agnostically and just get a JSON data structure describing a tree of tags, which is not specific to the platform or even the framework, and then you could pass that off to whichever subsystem for whichever purpose (or even serialize it or send it over a wire). We wouldn't need separate build plugins for each JSX-using framework, you'd just pass them your data
- darepublic 1y agoThis declarative system often is less intuitive once you get into the nitty gritty of things imo. Showing the hello world most basic example proves nothing
- socalgal2 1y agoIt's worse IMO. In a real three.js example, to repo their example, you'd make one BoxGeometry and 2 Mesh(es) But that wouldn't be idomatic React so they don't show it.
- jonas21 1y agoIt's great... except that it turns out to be a performance pitfall if the state needs to be frequently updated. The React Three Fiber docs mention this here: https://r3f.docs.pmnd.rs/advanced/pitfalls#avoid-setstate-in-loops https://r3f.docs.pmnd.rs/advanced/pitfalls#avoid-setstate-in... To fix this, they suggest using useRef and manually updating the object. But then your code ends up just as complicated, if not more so, than if you had just stuck with vanilla three.js.
- rafram 1y agoYeah, I can only imagine what removing an element from the middle of a thousand-element array of entities would do. This has always been a performance weak point for React, but React trees aren’t typically rebuilt from the root 60 times a second. With this, they are.
- afavour 1y agoSadly I’ve lost the URL but there was once a great comparison of Svelte vs React for this exact functionality. The performance was orders of magnitude better IIRC. React code looks great, the dev experience is fantastic. But user experience sometimes less so. Hooks kind of hide what’s going on.
- 90s_dev 1y agoI am exploring this area in a pet project, because some part of me has always been absolutely confident that we can do better than both vdom and custom compilers. So far, I have made really exciting progress, though it has never been more than 2-3 levels deep, for example a basic todo list, so it's hard to say that it will solve the main difficulty elegantly, but so far it seems to do so in principle, and I hope soon to come up with a use-case that allows me to finally create the deepRef function that I can just tell is the final piece of the puzzle.
- baxuz 1y agoThe only way to have performant rendering in a React app is to eject from React's rendering pipeline — that is, to not use it at all. State should basically only be used as "keyframes"
- ericmcer 1y agoYeh that seems problematic because you no longer have access to the render loop, you are letting React manage your render loop which seems kinda problematic for a game where you want very granular control over what happens each iteration, fps, etc.
- zeroq 1y agoIt's called Maslow's hammer. If the only tool you have is React everything around you start looking remarkably similar to JSX.