Interactive ebook and re-using scenes

Using JavaScript with Hype
1

Hello fine people!

I have been working on what has been my most involved Hype project to date.
Almost all of this 58 page ebook runs out of a single hype file:

https://content.une.edu.au/2020/apps/interactive_ebooks/index.html

The hype file essentially uses two scenes, one scene for painting activities, and another scene for standard pages, with assets loaded in for each page.

I came up against an issue where event listeners were 'stacking up' each time a scene was loaded, however I think these are mostly fixed. Everything appears to be working nicely, however I am wondering if anyone could help me identify other elements I need to be careful of, e.g I am unsure about:

-Html canvas
-Garbage collection
-Hype's on-drag events

Should I be concerned with these things or is Hype/Javascript garbage collection likely to be sufficient? My knowledge in this area is rather limited, and I am not sure whether Hype handles some of this too when using it's built-in functions.

I have attached my working file, however it won't function correctly without disabling CORS. Please forgive my messy code :exploding_head:. The live version above + web inspector may be more insightful for some, perhaps.

Thanks everyone!!

index.zip (1.1 MB)

4 Likes
2

I am sure someone will help you with your questions but just wanted to say very cool project. :+1: :+1: :+1:

1 Like
3

In general, Hype's runtime makes sure to manage long running resources and if you use its event handlers they will not stack up. The two major outstanding issues that can cause problems are (1) Hype doesn't remove the DOM for scenes which are not shown which isn't a leak but can lead to higher memory usage than desired and (2) there's an issue with iOS videos that can lead to resource limits if there are a lot of video tags. I don't think either apply to your document.

The easiest way to make sure you're in the clear from a memory perspective is to use Chrome's developer tools - they have a specific tab that shows memory usage. Beyond this, there's no substitute for testing :).

2 Likes
4

Thanks Jonathan, this is very helpful. Also appreciate the tip about the javascript memory inspector - I was trying to find something along those lines - got it now :slight_smile:

Keep up the awesome work on Hype :1st_place_medal:

1 Like
5

The project is very interesting. 58 pages is a great challenge :+1: :+1: