Flutter's Architecture

[asafigan]

I just read the Flutter architectural overview. It is very interesting. I like their layered approach.

What I like the most is their focus on composition of simple components to make more complex components. The base components only solve one problem like Row layout, Column layout, Background color, Animation, or render Image. Complex components can use these components to create complex layout and features.

They have a three phase approach (figure found here): Widget tree -> Element tree -> Render tree. This is basically a virtual DOM with better UI primitives than HTML. It also looks like a better designed implementation of virtual DOM than React. This might be overkill for us but it makes high level components straight forward to implement.

If anything, I would like us to at least use a render tree of single propose components. To start, we could implement the render tree and get it working. We could use XML to render some of the UIs @Keavon has been working on. We could than discuss what the best approach to updating the render graph is. Options that I know of are virtual DOM, shadow DOM, elm architecture, and Svelte's approach.

The things that is still unclear to me are how Flutter handles events, communicating up to ancestor components, and breaking out of layout (things like drop downs, tool tips, and modals).

[Keavon]

Closing this for now since we have no imminent plans to rewrite the UI until someday doing that with Xilem if/when it's mature.