WebAssembly and React: A New Era of High-Performance Web Applications

Rate this content
Bookmark
Slides

Hold on, WebAssembly on the server?! I thought it was for browser!

In this talk, we'll explore the benefits of using low-level languages on the server-side, and the different possibilities that WebAssembly provides for building high-performance web applications. We'll dive into different providers for WebAssembly functions, as well as practical use cases for integrating WebAssembly with React.

By the end of this talk, you'll walk away with a deeper understanding of how server-side WebAssembly and React can be used together. You'll also gain practical insights into how to use low-level languages on the server-side, and tips for overcoming common challenges when integrating WebAssembly with React.

Carmen Huidobro
Carmen Huidobro
14 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

WebAssembly is a binary instruction format for a stack-based virtual machine, enabling deployment of code in languages like Go, Rust, or C++ to run in the browser. It allows for efficient image compression algorithms and whole runtimes like Node.js in the browser. WebAssembly provides a capability-based security layer and eliminates the need to worry about server setup. It is already being used by well-known organizations and platforms, and continues to evolve with upcoming features such as a component model, neural network capabilities, garbage collection, and multithreading. WebAssembly modules can be used in React and as a server tool.

1. Introduction to WebAssembly

Short description:

Hi. Welcome. Thank you for tuning in today. I'm excited to talk about WebAssembly. WebAssembly, abbreviated as Wasm, is a binary instruction format for a stack-based virtual machine. It's a compilation target for programming languages, enabling deployment on the web for client and server applications. WebAssembly is not a programming language, but a standard for low-level bytecode. It allows us to compile code in languages like Go, Rust, or C++ to run in the browser. Examples of WebAssembly in the browser include running old games through archive.org or the Wayback Machine.

Hi. Welcome. Thank you so much for tuning in today. I'm so excited to talk to you about WebAssembly. And, you know, we're online, I just, I can't see you, but I still want to get a raise of hands. Do you know WebAssembly? I see some hands up. Maybe, maybe I don't. Do you know me? Raise your hand. No, I'm just kidding.

Hi. My name is Ramon. My pronouns are he, him, co-founder of the Bad Web Site Club Free Learning Initiative and a big advocate for community and learning mutually and from a community focus. It's, just gives me life. Let's dive right in. You might have heard of WebAssembly, or I'm going to call it sometimes Wasm. Let's dive right into what it is, and who better than the official website to give us the definition. WebAssembly, abbreviated as Wasm, is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. And this is kind of a collaborative creation, and I'm so excited about this in particular.

But when we think about WebAssembly, I want to make a couple things clear. First of all, WebAssembly is not a programming language, and I've found myself thinking this as well. I want to go and learn WebAssembly, but I can't learn it the same way as I would say React. It's not a front-end framework that we learn and apply. What WebAssembly is is a standard for low-level bytecode. It's a compilation target, and you might think, what is a compilation target? It's something that we use a lot of the time when computing. It is a standard that we take our code, say in Go or Rust or C++, we compile it or translate it to WebAssembly, which we can then run in the browser. And I want to show you a couple of examples of WebAssembly running in the browser, which are quite fun. You might have heard of archive.org or, you know, the Wayback Machine. They have a library of old software that you can run, for example, with DOSBox in WebAssembly, like old games. By the way, small note, if you're doing a talk like this, don't go and research this, because you're going to spend a lot of time playing these games as well.

2. WebAssembly for Software Development

Short description:

Prince of Persia is still one of my favorites. WebAssembly allows running low-level, efficient image compression algorithms in the browser. It's not just algorithms, but whole runtimes like Node.js. Server-side WebAssembly with WASI allows running WebAssembly anywhere. WASI provides access to system resources without being an operating system. Wasmtime is one of the most prolific WebAssembly runtimes.

Prince of Persia is still one of my favorites. But it's not just for games. It's also for high-end software. For example, Squoosh is a software that is an online software in the browser that lets you run low-level, really efficient image compression algorithms. Now, you might think, well, can't I do that in JavaScript? And of course you can. But what's incredible about this is that it makes it possible for doing these image compressions in a really efficient way in places where JavaScript might be an unideal language for image compression. So you can take your pre-existing algorithms in C or C++ and run them in the browser.

But it's not just algorithms, it's whole run times. You might have heard of StackBlitz. This is a project that lets you do coding in the browser, but it's running a Node.js runtime in WebAssembly. Not your JavaScript engine from the browser, a Node.js runtime. And this can be as big as an entire piece of software. Some folks have got LibreOffice, if you're familiar with it. It's an open source Microsoft Office kind of software running code for code in the browser. It is a 300 megabyte download, but it's still amazing to me that you can run this in your browser.

But OK, Ramon, you've been talking about all of this browser stuff. What about server-side WebAssembly? Surely WebAssembly can't just run anywhere. And you'd be right, except the folks who have been working on this standard have been doing some incredible things. WebAssembly with a system interface or WASI allows us to have these system interfaces so that we can run WebAssembly pretty much anywhere. Now, if you're familiar with it—oh, by the way, you've got to see this guide that I've linked here from Lynn Clark. She's done this illustrated guide to WebAssembly, and it is incredible. So the way a program works is that it needs to interface with a system's resources, which a lot of the times are protected by a kernel. So the kernel will do things like give you access to your file system and other resources of your computer. So what WASI allows us to do is to have these and have these access to these system calls. But to be clear, it's not an operating system. I'm going to let them explain it better than I can. From the Wasmtime project, it's an API provided by the Wasmtime project that provides access to several operating system-like features, including files, file systems, Berkeley sockets, clocks, random numbers. It is incredible. So what you can do in currently when running programs is you take your C code, you translate it, you or compile it to elf for Linux, portable executable for Windows or Mac o for Mac, which is all well and good, but when it comes to WebAssembly, now we can take our C code, create a Wasm or WebAssembly binary, which can then be run on any operating system with this very important part here, a WebAssembly runtime. I'm going to quickly run through a couple of examples of these, because of course I mentioned Wasmtime, which is one of the most prolific ones, but there's a whole bunch of them.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
Using Next.JS and Redux for Epic Noscript Web Apps
React Advanced Conference 2021React Advanced Conference 2021
21 min
Using Next.JS and Redux for Epic Noscript Web Apps
A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding!
Data Loaders - Elevating Data Fetching in Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Data Loaders - Elevating Data Fetching in Vue
Data fetching is a critical part of modern web applications. It's a complex problem that has been (partially) solved in many different ways. In this talk, we'll explore the new Data Loaders API for Vue Router, how it compares to existing solutions, and how it can greatly simplify data fetching in your Vue applications.

Workshops on related topic

Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
React Advanced Conference 2021React Advanced Conference 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.