bevyengine / bevyengine/bevy-website

Make live demos in the example webpages click-to-load to limit resource usage

Open
#2,150 1 comment 2 reactions 0 assignees View on GitHub
A-Examples C-Webdev D-Modest S-Ready-For-Implementation X-Contentious
Dominant language
JavaScript
Stars
249
Forks
450
Avg merge
16h 20m
Merged PRs (30d)
6

Description

Some of the examples over on https://bevyengine.org/examples/ use quite a lot of system resources when rendering live in the browser. Sometimes I just want to read the text and code on the page, but I can hear my fans start spinning up.

I think it'd be nice if the embedded examples were behind a button action labeled 'click to load live demo', I think this would have several benefits:
- Save on bandwidth as the Wasm binaries are quite large. Especially useful for users with a slow internet connection or expensive data plans.
- Reduce jank when scrolling through the page. I Noticed on mobile Firefox that some examples overwhelm the browser or its process for that page, making rendering of the entire page janky: text doesn't pop in on time after scrolling.
- Preserve battery life on mobile devices and laptops, especially when the tab is open for a longer period of time, like when someone's keeping the example code open next to their editor as a reference.
- Allow keyboard input to browser after page load without having to click out of the embedded example, since they capture the keyboard on load.

On a positive note, it does look like the examples stop running (or rather, run very slowly, like a single frame every so often? some examples have bouncing entities clumping up together when you switch tabs and back again which implies they're still running, just with very very long timesteps) when you switch tabs, so even with many examples open in different tabs, only the visible ones will use resources. I wonder if that's decided by the browser or intentional design for the site, but either way it's quite nice

Contributor guide

Open the contributing guide

Research direction

Start by tracing how the example webpages embed and load their live Wasm demos. Add a button labeled "click to load live demo" so the embedded demo does not load until activated, then verify that the page text and code remain usable before activation and that the demo loads after clicking.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wasm
Domain
frontend, performance, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.