Native Web Apps - Use React and WebAssembly to Rewrite Native Apps

Overview

Explore how React and WebAssembly can be used to create powerful desktop applications that rival or surpass native toolkits in a talk from React Amsterdam 2019. Dive into the process of writing new ambitious apps or porting existing ones using web technologies, with real-world examples provided. Learn how to leverage the React ecosystem to build performant applications, covering architecture, patterns, typing, useful open-source modules, and tooling. Discover techniques for enhancing both user and developer experiences in these hybrid 'Native Web Apps'. Gain insights on writing WebAssembly, using Emscripten, creating complex UIs with component libraries, optimizing performance through virtualization, and implementing effective testing strategies. Understand the advantages of this approach and why users may prefer these applications over traditional native apps.

Syllabus

Intro
The editor is getting old
Writing WebAssembly
Using Emscripten
Expose existing classes
Use Emscripten classes
Things to know (3)
Creating a complex UI?
Find a component library
Virtualized lists
Panels/resizable editors
Use a tiling window library
Virtualization again!
Levels rendering or visualizations
Don't forget the DOM
Profile the rendering
Inspect calls to WebAssembly
Stick to your components
Don't unit test your visual components...
but create visual stories
Use types
Consider your packaging options
What are users saying?
The native web app is better than the native app