Add visual explanation on some concepts

[fskreuz]

Things like bubbling, mappings, vtree and those concepts are hard to explain textually. They end up being a wall of words at best. It might be a good idea to provide sketches and diagrams of the concepts to aid explanation.

Ascii art works too.

[simonlayfield]

I'm happy to tackle this if anyone has any specific concepts they think should be visualised. Can we form a list?

[fskreuz]

This article was the inspiration for this issue. This is to explain visually the architecture section. Of course, Ractive doesn't do diffing and its vdom implementation is different from React, so the graphics for explaining the concept will be different for Ractive. General concepts would include:

• How Ractive translates data to models.
• How Ractive translates the AST to vdom.
• How models mutate on changes.
• How model changes mutate the vdom.
• How the vdom is rendered, initially and on changes.

[evs-chris]

I think the most important one would be the path of change propagation from the model to the DOM, as most people see VDOM and assume diffing. It's funny seeing people re-invent Ractive's (and to a certain extent, Svelte's) update model as an assumed novelty after having only explored React 😄.

I'm super lousy at docs, but I'm more than happy to try to stumble my way through explaining what happens so that someone more coherent can translate it to English (or any other language for that matter).

[simonlayfield]

Sure ok, well I'll do some initial thinking on it then and see what I can do. It'll be interesting to see how stuff turns out because I don't have a granular understanding of a lot of these things as it is (even if I do appreciate them).

With that said, what would help is maybe some scribbles on napkins or whatever - just to get me started, even if it's rehashed versions of the illustrations in the article you referenced.

If not I'll give it a shot anyway, just be warned that I may be a bit off the mark here and there with my interpretations!