Automatic Message Batching #2421

futursolo · 2022-01-29T04:47:55Z

Description

This is the first step towards concurrent mode.

When working on Bounce, a Yew state management library, I find that when a message is sent outside of a scheduled runner (e.g.: event handlers), it triggers a render immediately. Which can be inefficient when a component subscribes to many states.

Example:

master.mov

In the example, the components on the first row subscribe to 1 state,
the components on the second row subscribe to 2 states
and the component on the third row subscribes to 3 states.

As the video above demonstrated, currently, even if the updates are dispatched back-to-back, this still results in multiple renders for components with multiple states.

This can be solved by running updates in a Runnable but I think the better way to solve this issue is to give Yew (part of) concurrent mode so any messages that are sent in a blocking task can be batched automatically.

This pull request makes Yew to automatically batch the messages for components and no longer triggers a render immediately.
The scheduler now runs at the next browser tick (or at the end of current tick if it is spawned by another future).

pr.mov

As a side effect, this allows most generics to be removed from the runners and hence all examples received a 10%~20% size reduction. (Some examples are now smaller than 0.19.3)

PR      master  example
416K	444K	examples/boids
312K	360K	examples/contexts
236K	252K	examples/counter
256K	280K	examples/dyn_create_destroy_apps
268K	288K	examples/file_upload
436K	552K	examples/function_memory_game
456K	512K	examples/function_todomvc
488K	504K	examples/futures
296K	312K	examples/game_of_life
224K	240K	examples/inner_html
240K	256K	examples/js_callback
432K	456K	examples/keyed_list
240K	256K	examples/mount_point
332K	348K	examples/nested_list
248K	268K	examples/node_refs
2.1M	2.1M	examples/password_strength
264K	276K	examples/portals
828K	996K	examples/router
308K	340K	examples/suspense
252K	268K	examples/timer
368K	384K	examples/todomvc
240K	252K	examples/two_apps
248K	264K	examples/webgl

Requires #2420 (due to messing up git history)

Checklist

I have run cargo make pr-flow (pr-flow is broken on macOS #2403)
I have reviewed my own code
I have added tests

github-actions · 2022-01-29T04:53:42Z

Visit the preview URL for this PR (updated for commit 2ef8c2d):

https://yew-rs--pr2421-concurrent-mode-e5tgtrkq.web.app

_{(expires Mon, 07 Feb 2022 02:53:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

futursolo · 2022-01-29T05:15:18Z

Hmm, the tests need to become async as well.

futursolo · 2022-01-30T12:34:05Z

@voidpumpkin Labeling should be -A-yew-router +breaking change?

ranile · 2022-01-30T13:23:41Z

@futursolo do you want to rebase to fix the git history or is it fine as-is? It's going to get squashed anyway but I'm wondering if you want to rebase.

futursolo · 2022-01-30T13:38:32Z

Oh, I think the entirety of the work on this branch has been destroyed.

ranile · 2022-01-30T13:40:28Z

Oh wow, that's rough. Do you also not have any local copy of the work?

futursolo · 2022-01-30T13:59:02Z

This is stupid. But I managed to recover the work from Time Machine.

futursolo · 2022-01-30T14:40:36Z

This branch should have been restored and is ready for review.

ranile

Looks good to me, just these one comment that needs to be addressed

Labeling should be -A-yew-router +breaking change?

What's the breaking change here.

packages/yew/src/html/component/lifecycle.rs

packages/yew/src/scheduler.rs

packages/yew/tests/suspense.rs

packages/yew/src/html/component/scope.rs

packages/yew-router/tests/browser_router.rs

packages/yew/src/html/component/lifecycle.rs

…sages.

futursolo · 2022-01-31T02:54:51Z

What's the breaking change here.

If one is expecting to send a message and see the effect immediately, then they will be "disappointed" (like in the tests).

This might be a bigger change than one thinks. The migration documentation has explained this in detail:

https://github.com/yewstack/yew/pull/2421/files#diff-d12f7bf5d9bc0713eebab16b0d6c45dfad36a381f46639c372171b713a3a77aeR19

voidpumpkin · 2022-01-31T09:38:16Z

@futursolo You changed yew-router and yew files so imo it needs both those labels.
The breaking change tag imo is useless atm so I tend to forget to apply it.
Our changelog generation currently does not utilize that tag.

cc @hamza1311

futursolo · 2022-01-31T13:50:44Z

@futursolo You changed yew-router and yew files so imo it needs both those labels.

Should this label also apply if it only changed the test case to add yielding points and has no real changes on the code itself?

voidpumpkin

I cant say am very "familiar with asynchronous IO",
but nice PR :D
I love the optimizations and the results of them.

ranile

Looks good to me.

Just wondering why these are needed:

    sleep(Duration::ZERO).await;

ranile · 2022-02-07T15:34:56Z

packages/yew/src/html/component/scope.rs

+    pub fn push(&self, msg: Msg) -> usize {
+        let mut inner = self.0.borrow_mut();
+        inner.push(msg);
+
+        inner.len()
+    }
+
+    pub fn append(&self, other: &mut Vec<Msg>) -> usize {
+        let mut inner = self.0.borrow_mut();
+        inner.append(other);
+
+        inner.len()
+    }
+
+    pub fn drain(&self) -> Vec<Msg> {
+        let mut other_queue = Vec::new();
+        let mut inner = self.0.borrow_mut();
+
+        std::mem::swap(&mut *inner, &mut other_queue);
+
+        other_queue
+    }
+}


~~A Deref/DerefMut impl is better than this. Not that it matters too much since this isn't exposed API~~

I misread. It's fine as is

futursolo marked this pull request as draft January 29, 2022 05:44

futursolo marked this pull request as ready for review January 29, 2022 07:56

voidpumpkin added A-yew Area: The main yew crate A-yew-router Area: The yew-router crate labels Jan 30, 2022

ranile added breaking change and removed A-yew-router Area: The yew-router crate labels Jan 30, 2022

futursolo closed this Jan 30, 2022

futursolo force-pushed the concurrent-mode branch from 7fb565d to b7b28ba Compare January 30, 2022 13:35

(○｀дﾉ´)ﾉ┳┳･ﾟ･┻┻･ﾟ･｡

1c31de0

futursolo reopened this Jan 30, 2022

futursolo added 3 commits January 30, 2022 23:05

Recover docs as well.

c9c7337

Make scheduler synchronous for now.

79cbf87

Disable Component IDs as they are not useful at the moment.

74dc6a7

ranile reviewed Jan 30, 2022

View reviewed changes

packages/yew/src/html/component/lifecycle.rs Show resolved Hide resolved

packages/yew/src/scheduler.rs Show resolved Hide resolved

packages/yew/tests/suspense.rs Show resolved Hide resolved

WorldSEnder reviewed Jan 30, 2022

View reviewed changes

packages/yew/src/html/component/scope.rs Outdated Show resolved Hide resolved

WorldSEnder reviewed Jan 30, 2022

View reviewed changes

packages/yew-router/tests/browser_router.rs Show resolved Hide resolved

WorldSEnder reviewed Jan 30, 2022

View reviewed changes

packages/yew/src/html/component/lifecycle.rs Show resolved Hide resolved

WorldSEnder reviewed Jan 30, 2022

View reviewed changes

packages/yew/src/html/component/lifecycle.rs Show resolved Hide resolved

Minor fixing, amending messages and apply optimisation on batched mes…

2ef8c2d

…sages.

WorldSEnder mentioned this pull request Jan 31, 2022

Introduce explicit internal datastructures modeling dom state #2330

Merged

3 tasks

voidpumpkin approved these changes Jan 31, 2022

View reviewed changes

voidpumpkin requested a review from ranile January 31, 2022 20:17

ranile approved these changes Feb 7, 2022

View reviewed changes

ranile merged commit e56ff20 into yewstack:master Feb 7, 2022

WorldSEnder mentioned this pull request Mar 2, 2022

Push ComponentState into the scheduler instead of boxed runners #2485

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatic Message Batching #2421

Automatic Message Batching #2421

futursolo commented Jan 29, 2022 •

edited

Loading

github-actions bot commented Jan 29, 2022 •

edited

Loading

futursolo commented Jan 29, 2022

futursolo commented Jan 30, 2022

ranile commented Jan 30, 2022

futursolo commented Jan 30, 2022

ranile commented Jan 30, 2022

futursolo commented Jan 30, 2022

futursolo commented Jan 30, 2022

ranile left a comment

futursolo commented Jan 31, 2022

voidpumpkin commented Jan 31, 2022 •

edited

Loading

futursolo commented Jan 31, 2022 •

edited

Loading

voidpumpkin left a comment

ranile left a comment

ranile Feb 7, 2022 •

edited

Loading

Automatic Message Batching #2421

Automatic Message Batching #2421

Conversation

futursolo commented Jan 29, 2022 • edited Loading

Description

Checklist

github-actions bot commented Jan 29, 2022 • edited Loading

futursolo commented Jan 29, 2022

futursolo commented Jan 30, 2022

ranile commented Jan 30, 2022

futursolo commented Jan 30, 2022

ranile commented Jan 30, 2022

futursolo commented Jan 30, 2022

futursolo commented Jan 30, 2022

ranile left a comment

Choose a reason for hiding this comment

futursolo commented Jan 31, 2022

voidpumpkin commented Jan 31, 2022 • edited Loading

futursolo commented Jan 31, 2022 • edited Loading

voidpumpkin left a comment

Choose a reason for hiding this comment

ranile left a comment

Choose a reason for hiding this comment

ranile Feb 7, 2022 • edited Loading

Choose a reason for hiding this comment

futursolo commented Jan 29, 2022 •

edited

Loading

github-actions bot commented Jan 29, 2022 •

edited

Loading

voidpumpkin commented Jan 31, 2022 •

edited

Loading

futursolo commented Jan 31, 2022 •

edited

Loading

ranile Feb 7, 2022 •

edited

Loading