React and WebAssembly to Rewrite Native Apps

React and WebAssembly to Rewrite Native Apps

This talk introduces how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones – with the real-world example of my open-source game development software

What is WebAssembly?

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

WebAssembly is: An improvement to JavaScript: Implement your performance critical stuff in wasm and import it like a standard JavaScript module. A new language: WebAssembly code defines an AST (Abstract Syntax Tree) represented in a binary format. You can author and debug in a text format so it’s readable.

A browser improvement: Browsers will understand the binary format, which means we’ll be able to compile binary bundles that compress smaller than the text JavaScript we use today. Smaller payloads mean faster delivery. Depending on compile-time optimization opportunities, WebAssembly bundles may run faster than JavaScript, too!

A Compile Target: A way for other languages to get first-class binary support across the entire web platform stack.

What Exactly is WebAssembly?

WebAssembly defines an Abstract Syntax Tree (AST) that gets stored in a binary format. Binary is great because it means we can create smaller app bundles. You’re probably wondering how we’ll debug a binary language format.

Luckily, while we’re stepping through the debugger that will inevitably appear in browsers, the AST will be represented in a (moderately) friendly text format. I’d love to show you examples, but they’re a bit scarce right now. It will probably be a bit less readable than handwritten JavaScript, but about as readable as compiled asm.js. Maybe more readable. We’ll see. What will WebAssembly be used for?

Among other things, it will be easy to express things like threads and SIMD — a fancy word that means you can line up multiple chunks of data next to each other and invoke a single instruction to operate on all of them at the same time. It stands for Single Instruction, Multiple Data.

That means fat, parallel processing pipelines for your realtime video stream effects processor. If you have your finger on the pulse, you’ve probably already heard of doing this in JS, but I’ve always found it a bit awkward to try to do low level stuff like this using JavaScript’s existing type system.

This is one of those cases where you’ll probably want to forget about the object system, the garbage collector, and all the fancy dynamic stuff. Just line up some raw bits in little rows and crunch through them as fast as possible.

WebAssembly Brings Language Diversity to the Web Platform

We don’t really need WebAssembly to bring other languages to the web platform. We already have the best AAA game engines running smoothly at stunning quality by compiling to JavaScript.

WebAssembly adds things that most JS developers would agree we don’t need in JavaScript. We may still get those things, but not because we need them for JavaScript code. We’ll get them to support compiling from other languages which use them. WebAssembly gives us an alternative compile target — One specifically designed for that purpose.

It will be easier now to port code that relies heavily on features like shared memory threads. I’d bet that the process of writing a compiler for WebAssembly will be somewhat less complicated than writing a compiler for JavaScript, simply because there’s a better mapping from the source language features to the target AST.

As great as it is to hear that all the old languages we know and love will run on the web platform now, WebAssembly means one more very important thing:

WebAssembly is an open invitation to developers building future programming languages.

The future of the web platform has never looked brighter. You’d better pull out your shades.

React and WebAssembly to Rewrite Native Apps

Can React and web technologies compete with native toolkits when it comes to making super complex, rich desktop apps? Can we go further and create better-than-native applications?? Sounds like a good challenge

This talk introduces how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones – with the real-world example of my open-source game development software. I’ll show how to leverage the React ecosystem to create performant applications: architecture, patterns, typing, useful open-source modules… and how to go one step further and provide a better user experience as well as a better developer experience.

These apps are not web apps, they are not native apps, they are hybrid “Native Web Apps” and can provide the best of both worlds.

react reactjs WebAssembly javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How use React, JavaScript and WebAssembly to Rewrite Native Apps

This talk introduces how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones – with the real-world example of my open-source game development software. I’ll show how to leverage the React ecosystem to create performant applications: architecture, patterns, typing, useful open-source modules… and how to go one step further and provide a better user experience as well as a better developer experience.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

React, JavaScript and WebAssembly to Port Legacy Native Apps

ReactNext 2018 www.react-next.com Tel Aviv, Israel Can we create or port an existing native desktop application to a complete "React powered" web-app matchin...

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.