Native Web Apps: React, JS & WebAssembly to rewrite native apps

on YouTube ↗30m

" summary

GDevelop gets ported from a C++ desktop app into a React + JavaScript UI with a C++ core compiled to WebAssembly, claiming better-than-native UX. Build uses Emscripten + WebIDL bindings expose C++ core to JS, UI relies on Material‑UI, react‑virtualized and react‑sortable‑hoc for large lists, rendering/canvas uses Pixi.js; heavy use of Electron packaging. Notes: wasm ~3 MB, packaged app ~300 MB, manual memory frees required, bridge call overhead observable, initial feature gaps but final result runs faster with more contributors.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 2:49The editor is getting old
3. 5:55Writing WebAssembly
4. 6:34Using Emscripten
5. 7:13Expose existing classes
6. 8:22Use Emscripten classes
7. 11:09Things to know (3)
8. 13:08Find a component library
9. 15:57Use a tiling window library
10. 16:36Virtualization again!
11. 19:05Profile the rendering
12. 21:40Stick to your components
13. 22:45but create visual stories
14. 25:00Consider your packaging options
15. 27:48What are users saying?

" related talks

• 30mBeyond Web-Apps: React, JavaScript and WebAssembly To Port Legacy Native AppsFlorian Rival · React Conf 2018
• 27mNative Web Apps: React and WebAssembly to Rewrite Native AppsFlorian Rival · ReactiveConf 2019
• 33mBeyond Web-Apps React, Javascript and WebAssembly to Port Legacy Native AppsFlorian Rival · React Boston 2018
• 34mModern Web Game DevelopmentTom Greenaway · Google I/O 2019
• 42mBuilding Desktop applications with Electron and ReactVladimir Jovanović · Armada JS 2019
• 27mBridging React Native Back to its RootsVincent Riemer · ReactEurope 2018
• 36mWhy you should consider Web Assembly in your next frontend projectHåkan Silfvernagel · NDC Oslo 2020
• 05mLightning Talk: The Present and Future of Cross-Platform GUI in C++Matt Aber · CppCon 2024