:wave: Hey everyone! I wanted to share a project I...

# compose-ui-showcase

[Armond Avanes]

👋 Hey everyone! I wanted to share a project I've been working on — Kids Math Lab, a free app designed to help K–5 students practice math in a fun and engaging way.

It's built with Compose Multiplatform and is available on Android, iOS, iPadOS, macOS (M-series), and Web (WasmJS) platforms. You can check it out here: https://www.kidsmathlab.com

Thanks for taking a look!

[Jacob Ras]

Looks great! Minor issue: in onboarding, swiping only works on the text, while I tried to swipe on the image.

[Jacob Ras]

What is one supposed to count here? 😅 I see five squares but that answer isn't there

[Armond Avanes]

@Jacob Ras There is also a rod (group of ten) at the top of those 5 units. So the answer is 15.

I agree that the rod needs to be a bit larger. Sometimes scaling that works in both portrait and landscape modes (with different layouts) on different devices with different screen sizes gets tricky.

Thanks for the feedback. I will try to fix this in a next release.

[Phuc]

Hi @Armond Avanes
Congratulations on the launch. My son tries it and he likes it.
(I’m also building educational apps here with Flutter, but I will soon use KMP for new apps)

[Armond Avanes]

Happy to hear that you've liked the app! Thanks a lot for the feedback.

[bashor]

@Armond Avanes great job!
Your js file is included twice which may lead to double download and run of the app.

[bashor]

@Armond Avanes also, it would be nice to on compression for files on your server

[Armond Avanes]

@bashor Thanks a lot for the feedback. You've raised very valid points. I just fixed the double JS file issue (leftover from when I was working on adding a loading page before the app gets fully downloaded/visible) and also enabled the compression on my [Ktor] server. It cut the downloaded resources from 33.5MB down to 6.4MB which is huge, thanks to your suggestions!
Please check it out and see if all is good now, or if more can be improved.

[bashor]

@Armond Avanes, it’s much better now. From what I see, cache-related headers are missed, so the browser can’t cache files properly.

[Armond Avanes]

@bashor I appreciate your feedback. Is there any best practice, guide or document to show me what content types are good candidates to be caches in WasmJS environment? Also what max-age and visibility is recommended?
From the files that are being served, obviously *.wasm is the largest. Then I have some assets (mp3, etc) and finally JS files. The rest are smaller files.
Not sure they can be all cached safely (thinking about when I upload a new release and whether users can have access to the latest changes quickly).

[Armond Avanes]

Update: After a quick research, I noticed that only the *.wasm files are fingerprinted and can be safely cached. Everything else, including all files in composeResources and the generated JS and CSS files, are not fingerprinted so not good candidates for caching (I'm thinking about future changes to those resources while their file names stay unchanged).
Although I don't have an answer yet for the recommended caching max-age or visibility, but overall am I on the right track?

[bashor]

@Armond Avanes
Disclaimer: I’m not expert in browser’s cache topic.
I believe it’s not specific to wasm nor kotlin.
I think the most (all?) static files (including js, wasm, css files) could be cached.
For specific headers and values you can take a look how it’s done on static hosting like github pages.

Here are some links what could be useful with the topic:
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Caching
• https://simonhearne.com/2022/caching-header-best-practices/
• https://web.dev/articles/http-cache

[Armond Avanes]

I truly appreciate your response. I'll definitely take a look at those references.