Native Web Apps: React and WebAssembly to Rewrite Native Apps

on YouTube ↗27m

" summary

A C++ game editor gets rewritten with React + WebAssembly using Emscripten to compile the core to a ~3MB .wasm module with generated glue, exposing C++ classes via Web IDL. UI uses material UI, react-virtualized for lists of thousands, react-mosaic and react-sortable-tree, and pixi.js for the WebGL level editor. Memory requires manual destroy calls, cross-world calls are costly, build iteration drops from ~1 minute to ~10 seconds, and users end up preferring the hybrid Electron/browser app.

AI-written summary · about

" chapters (12)

1. 0:00Introduction to GDevelop
2. 1:04Legacy C++ architecture
3. 2:58Migrating to web technologies
4. 5:15Implementing WebAssembly
5. 7:08Exposing C++ to JavaScript
6. 10:21Memory management and testing
7. 13:39Building complex React UI
8. 17:01WebGL and performance tips
9. 19:24Optimizing data interaction
10. 21:02Maintaining a codebase
11. 22:48Packaging and final results
12. 24:31User feedback and conclusions

" related talks

• 33mBeyond Web-Apps React, Javascript and WebAssembly to Port Legacy Native AppsFlorian Rival · React Boston 2018
• 30mNative Web Apps: React, JS & WebAssembly to rewrite native appsFlorian Rival · JSConf US 2019
• 30mBeyond Web-Apps: React, JavaScript and WebAssembly To Port Legacy Native AppsFlorian Rival · React Conf 2018
• 32mWhat WebAssembly means for ReactLin Clark · React Rally 2017
• 30mImproving web app with Rust and WASMIlya Baryshnikov · RustCon Asia 2019
• 28mThe Cyborg Future: Melding a Rust/Wasm Core with a ReasonReact UIYouxi Li · Reason Conf US 2019
• 36mWhy you should consider Web Assembly in your next frontend projectHåkan Silfvernagel · NDC Oslo 2020
• 59mOne Codebase to Rule Them All - Using React Native EverywhereJesse Weigel · NDC Minnesota 2019