logoalt Hacker News

samstress • today at 8:57 AM • 1 reply • view on HN

I'm genuinely curious — do people really prefer this HTML-style syntax like

  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
I appreciate that React & Co. have established it as a standard. I've used A-Frame lately, which lets you build WebVR components, and even there you declare your scene as

  <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  </a-scene>
and I feel this is getting a bit much. Wouldn't it be better to have a JS API that lets you define objects and properties and compose your shader / scene etc. programmatically? (I've seen that Shaders offers that too — just asking in principle.)

Replies

drawfloat • today at 9:21 AM

Personally I don't mind it, but would say the main advantages offered by JSX for this kind of work (see: React Three Fiber) are more in its ease of composition and structuring larger projects.

Often in R3F projects you'll end up running per frame animations via the normal declarative property API in the useFrame hook anyway, as adjusting props in a loop is not great for performance. The JSX instead becomes a way to easily understand the hierarchy and nesting of objects, as well as quickly mount/unmount new elements.