
Show HN: Render abstract syntax trees using React - codejamninja
https://github.com/codejamninja/react-ast
======
JasonSage
Neat project! I wanted to leave some feedback for the author.

If you just want an interface for building up an AST using composition, you
can do this without React. You can even continue to use JSX—it's as simple as
having a function definition to create AST primitives and have a JSX pragma
that calls into it.

What React is excellent at is taking two trees and finding a set of mutations
to transform the nodes from the first tree to the second—with utter disregard
to how those trees came to be. That's what the renderer provides—the set of
operations that can be performed on nodes.

I don't see how the actual React part can be used here. Even the suggested
uses are all single-pass operations where this diffing will never come into
play.

That said, to me this project (in its current state and with the goals
expressed) would be so much simpler and more efficient written as a JSX
pragma, without the React part.

Maybe there's more to the React functionality in this project that I'm
missing. I don't want to discourage the author from doing something with React
for this project—there's many directions you could take this that could make
excellent use of React.

~~~
codejamninja
Great feedback. The points you make are good. Listed below are the reasons I
chose to go with react.

1\. I'm getting my feet wet with React rendering (I will be building a full
react renderer in the future for another project)

2\. It may be useful in the future for dynamic code editing (not sure but a
possible use case)

3\. Though react really shines in the render lifecycle, it does provide a nice
pattern for building components. I see this project being used as a way to
componentize composable code generators and snippets.

~~~
JasonSage
> I see this project being used as a way to componentize composable code
> generators and snippets.

You can do this without React though, using only JSX. I've implemented this
pattern in a library (not open source yet) that builds in a lot of these
composition patterns (pass children as child or prop, etc) so that you can use
it in familiar ways while still just being JSX.

------
huhtenberg
Can someone explain what's this is about?

> _Please (star) this repo if you found it useful (star) (star) (star)_

Gotta be very important for _something_ , since it's literally the second line
in the readme.

~~~
burning-madness
Recruiters use GitHub profiles as a proxy for engagement and, I would assume,
amount-of-stars-in-pet-project to be used as a KPI in this measurement.

I think that's asinine but I don't make the rules.

That's not how _I_ evaluate people when I'm doing the hire.

------
SkyPuncher
Gotta say, this is falling flat for me.

Some pretty big, wordy claims in your intro paragraphs (basically over the top
marketing speak). Then the examples seem to completely miss the point for me.
The examples include so much implicit knowledge, it's hard to follow.

What would I ever need to use this for? Looks useful if I were building a
testing tool or IDE tool, but I can't see much use outside of that.

------
oh_teh_meows
The Code component seems like a catch all. If it were to support actual AST,
surely

<Code>const a = 3</Code>

Would have looked something like:

<Assign> <Lhs constant><Id>a</Id></Lhs> <Rhs><Literal>3</Literal></Rhs>
</Assign>

~~~
codejamninja
The Code component would do a poor job at nesting code in a body. The point of
this project is to make it easy to generate code through an AST, hence the
<Code /> "catch call".

------
tenaciousDaniel
I admittedly haven't given this much thought, but...why would I want to do
this?

~~~
dymk
Probably to learn about how ASTs and React rendering work.

I've had thoughts about writing a WebGL backend so I could describe a scene
graph with React; this would probably be a good stepping stone to learn how to
do that

------
AmazingTurtle
no demo / screenshot? not buying it

~~~
Pt_
There is an example in the Readme. From what I can tell this isnt "rendering"
an AST to the DOM, its using JSX to "render" source code.

~~~
codejamninja
Exactly :)

------
Deukhoofd
No demo or screenshots of the product, only a link to the developer's own
personal page. Not a great showing to be honest.

