DAG and Tree Representations of Code

• representing layout as a tree:
• React `JSX`:
``````<button onClick={onClick}>
{text}
</button>``````
• hiccup:
``["button", { onClick }, text]``
• representing CAD as a tree
• modeler:
``````<Union>
<Path closed={true}>
<Point x={0}  y={0} />
<Point x={10} y={20} />
<Point x={10} y={30} />
<Point x={9}  y={42} />
</Path>
<Circle r={10} x={0} y={0}/>
</Union>``````
notice that parents impact children: `Union` calculates over `Path` and `Circle`, in "normal" code representation that would be:
``````union(
path({ closed: true, points }),
circle({ r: 10, x: 0, y: 0 })
)``````
• hiccup-sdf:
``````["intersection", [
["box", { s: [0.1, 0.1, 0.1] }],
translatedSphere([0.15, 0, 0], 0.2),
]]``````
• representing code as a "tree" gives us a way to create UIs close to visual tools:
• layers by having multiple top-level items
• show/hide components by toggling on/off from the tree, or just setting `alpha={0}`
• visual pickers for properties (and calculated properties using lambdas)
• references:
• representing as a DAG (nodes and edges):
• this is a DAG:
``````+->B->E-+
|       |
A       +->F->G
|       |
+->C->D-+
``````
represented as a tree:
``````A
+ B
| + E
|   + F
|     + G
+ C
+ D
+ F
+ G
``````
• DAGs can make describing relations simpler: `F` depends on `E` and `D` - this is used in `Makefiles` for example
• node-and-edge languages (VPLs) are DAGs describing computations - they are best modeled with streams, event emitters, etc.