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:
  - composing functionality and vpls
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.