Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize rendering & dispose(s) #19

Merged
merged 7 commits into from Aug 5, 2022
Merged

Optimize rendering & dispose(s) #19

merged 7 commits into from Aug 5, 2022

Conversation

hamsbrar
Copy link
Member

@hamsbrar hamsbrar commented Aug 1, 2022

This pull request contains:

  1. RenderEvents, a event system for RenderElements.
  2. Couple of optimizations, major one being the ability to short-circuit dispose(s) using RenderEvents.

Render events

RenderEvents are the events that framework will emit when it interacts with a RenderElement. Just like we can add event listeners for user interactions on DOM elements, we can now add event listeners for framework interactions on RenderElements. Similar to DOM events, we've different types of RenderEvents for different types of interactions which are listed below:

  • didRender is a event that's emitted after framework finishes rendering the output of render to the DOM.
  • didUpdate is a event that's emitted after framework finishes rendering the output of update to the DOM.
  • willUnMount is a event that's emitted when framework is about to remove the widget from the DOM.
  • didUnMount is a event that's emitted after framework finishes removing the widget from the DOM.

RenderElements can decide to listen to a particular or all render events by adding event listeners.

Comparing RenderEvents with DOM events, there are few differences & restrictions:

  • RenderEvents do not have capture/bubble phase.
  • RenderEvents are meant to be listened internally inside RenderElements.
  • Listeners for RenderEvents can be attached only during initial render, and cannot be updated.

These restrictions are temporary and we'll lift them when needed.

RenderEvents are meant to solve the problem of limited control over lifecycle in RenderElements. Previously we were providing a sub-class WatchfulRenderElement with hardcoded lifecycle. Now, using the new RenderEvents API, users can add as much or as little lifecycle as they want, to any RenderElement(widget). This new API effectively makes WatchfulRenderElement obsolete(but we'll keep it for backward compatibility).

Benchmark results

@hamsbrar hamsbrar mentioned this pull request Aug 1, 2022
6 tasks
@hamsbrar hamsbrar marked this pull request as ready for review August 2, 2022 11:18
@hamsbrar hamsbrar marked this pull request as draft August 3, 2022 03:54
@hamsbrar hamsbrar force-pushed the dev-optimizations branch 3 times, most recently from cc9bada to 0021bda Compare August 3, 2022 08:36
@hamsbrar hamsbrar marked this pull request as ready for review August 3, 2022 08:37
JS is unlikely to have jump tables so we should try to bail out early for update types that happens more often(such as update, dispose)
Short-circuit dispose on parts of tree that doesn't contain any un-mount event listeners
@hamsbrar
Copy link
Member Author

hamsbrar commented Aug 3, 2022

Alright it's ready now. I can see long term benefits in going with RenderEvents, and we can optimize a lot more using them if needed but that's already more than enough for now.

I'm bit tired and probably going to merge this in 1-2 days. In case anyone wanna suggest/review changes, feel free to do so!

Prepositions like after/before are not a good choice. They were choosen because:

- StatefulWidget: We can add didRenderWidget in State but didUpdateWidget is already there and it's semantically different from afterUpdate. didUpdateWidget happens before render while afterUpdate happens after DOM updates are flushed. So I choosed afterRender & afterUpdate, completely different.

- Choosing after/before in WatchfulRenderElement was my mistake. It should be didRender, didUpdate, willUnMount and didUnMount.
@hamsbrar hamsbrar merged commit 2c55ff3 into main Aug 5, 2022
@hamsbrar hamsbrar deleted the dev-optimizations branch August 5, 2022 03:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant