Add a diagram of the component lifecycle

[jstarry]

Something like:

Render Cycle

1. create()
2. view()
3. (yew renders to page)
4. mounted()

Note: should explain how children components are rendered... (Parent view -> Child view -> Child mount -> Parent mount)

Update Cycle

1. (trigger event / callback / send message)
2. update()
3. (optional) view()
4. (yew renders to page)

Change Cycle

1. (render component with new props)
2. update()
3. (optional) view()
4. (yew renders to page)

DOC TODO: https://yew.rs/docs/concepts/components#lifecycle

[connor4312]

I would be happy to help with this. How do you think we should generate graphs? Something that's worked for me in the past is having graphviz .dot files (e.g.) and makefiles or other build task that render those--makes them easy to edit/diff with no special software. Thoughts?

[jstarry]

@connor4312 thanks for your interest in helping out! Yeah, that's basically what I had in mind 👍

[teymour-aldridge]

@connor4312 Do you plan on implementing this? I'd be happy to do it otherwise!

[rlasjunies]

@jstarry Here are 2 proposals using the same tool as the one of the Agent lifecycle. Let us know what is your feeling.

@teymour-aldridge fyi

All in one

General lifecycle

Change and Update lifecycle

The nomnoml code I've used for these diag

rendering done with a vscode plugin to render it in markdown

[Create]->[View]
[View]->[Rendered]
[Rendered]->[...]
[...]->[Update cycle]
[...]->[Change cycle]

[...]->[Destroy]
[Update cycle]->[...]
[Change cycle]->[...]

[Update cycle|update is called bla bla bla|
  [Update]->[<choice>Should render?]
  [<choice>Should render?]->false[<end>e]
  [<choice>Should render?]->true[view]
]

[Change cycle|change is called bla bla bla|
  [Change]->[<choice>Should render?]
  [<choice>Should render?]->false[<end>e]
  [<choice>Should render?]->true[view]
]

[Create]->[View]
[View]->[Rendered]
[Rendered]->[...]
[...]->[Update cycle]
[...]->[Change cycle]

[Update cycle|update is called bla bla bla|
  [Update]->[<choice>Should render?]
  [<choice>Should render?]->false[<end>e]
  [<choice>Should render?]->true[view]
]

[Change cycle|change is called bla bla bla|
  [Change]->[<choice>Should render?]
  [<choice>Should render?]->false[<end>e]
  [<choice>Should render?]->true[view]
]

[...]->[Destroy]
[Update cycle]->[...]
[Change cycle]->[...]

[teymour-aldridge]

For the final thing an SVG (rather than a PNG which is what I think we have here) would offer better resolution. I think that the diagrams are too complex for my liking. I think that the node titled “…” should be renamed something like “event loop” or “main loop.” “Change cycle” and “update cycle” should be altered slightly because they’re not “cycles” as such.

On 10 May 2020, at 19:03, Richard Lasjunies [email protected] wrote:

@jstarry https://github.com/jstarry Here are 2 proposals using the same tool as the one of the Agent lifecycle. Let us know what is your feeling.

@teymour-aldridge https://github.com/teymour-aldridge fyi

All in one

https://user-images.githubusercontent.com/1439791/81506685-7d4d8b00-92f8-11ea-9b87-df24c0d3d2b1.png General lifecycle

https://user-images.githubusercontent.com/1439791/81506719-aff78380-92f8-11ea-8a0f-d8014b414315.png Change and Update lifecycle

https://user-images.githubusercontent.com/1439791/81506734-c4d41700-92f8-11ea-920d-4bcd6126546a.png The nomnoml code I've used for these diag

rendering done with a vscode plugin to render it in markdown

[Create]->[View] [View]->[Rendered] [Rendered]->[...] [...]->[Update cycle] [...]->[Change cycle]

[...]->[Destroy] [Update cycle]->[...] [Change cycle]->[...]

[Update cycle|update is called bla bla bla| [Update]->[Should render?] [Should render?]->false[e] [Should render?]->true[view] ]

[Change cycle|change is called bla bla bla| [Change]->[Should render?] [Should render?]->false[e] [Should render?]->true[view] ] [Create]->[View] [View]->[Rendered] [Rendered]->[...] [...]->[Update cycle] [...]->[Change cycle]

[Update cycle|update is called bla bla bla| [Update]->[Should render?] [Should render?]->false[e] [Should render?]->true[view] ]

[Change cycle|change is called bla bla bla| [Change]->[Should render?] [Should render?]->false[e] [Should render?]->true[view] ]

[...]->[Destroy] [Update cycle]->[...] [Change cycle]->[...] — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yewstack/docs/issues/22#issuecomment-626365954, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKFSTPMGBEHELHRIBUTWGODRQ3T7FANCNFSM4KR6K5BQ.

[rlasjunies]

@teymour-aldridge

• right for the svg/png ... we will take care for the final version
• I do agree for the "...", good proposals. I was also thinking to "idle".
• "Update"/"Change" cycle ... I reused the initial text proposal. Anyway I did not found a better way to express this "loop".

I shared the nomnoml code to accelarate the collaboration. Do not hesitate to update the proposals.