How to enable WebAssembly in SharePoint Framework
Exciting news! I’m currently working on PnP SPFx live reloader version 1.2. The next release is packed with more detailed information about their capabilities on the web fonts loaded on the page.
When reading binary files such as font files, JavaScript is not the fastest and easiest way to deal with those file types.
Other programming languages, such as C, C++, C# (Blazor), or Rust, are better suited for this task. This is where WebAssemblies come into play.
What are WebAssembly?
WebAssembly (often abbreviated as Wasm) is a binary instruction format designed to run code on the web at near-native speeds. It’s not a replacement for JavaScript but a powerful companion. This means developers can write performance-critical applications in the programming languages mentioned before and still have the familiarity and flexibility of JavaScript.
The main draw is its speed and efficiency. It provides a way to execute code quickly, crucial for complex applications like games, 3D rendering, and scientific simulations. Because it operates alongside JavaScript, it can enhance web experiences without completely replacing the traditional web stack.
As for security, it is built with a focus on safety. It runs in a sandboxed environment, similar to JavaScript, which means it has limited access to the host system. This isolation helps mitigate risks associated with running untrusted code. However, like any technology, it’s not immune to vulnerabilities. WebAssembly code can introduce risks if poorly designed.
WebAssembly is an exciting advancement for web development. It offers performance benefits while maintaining a security-first approach. However, as with any tool, it’s important to use it responsibly.
SharePoint Framework comes with native support for WASM
The file extension for WebAssembly is WASM. By inspecting the SharePoint Framework 1.20 webpack configuration, the file extension is already included in the build chain.
This .wasm entry has been in place for a long time. Webpack 4 was the first version that supported this.
Including WASM files does not mean you can immediately use WebAssembly in your code. Additional configurations are required, especially with WebPack5.
For my use case, I use fontkit, a web assembly specifically for reading all common web font formats and can list all their capabilities.
Configure SharePoint Framework Webpack
The first thing I had to add to Microsoft’s default configuration of the build chain was to create a new Webpack rule.
generatedConfiguration.module.rules.push({
test: /\.wasm$/,
type: 'webassembly/async', // Async WebAssembly handling
});
This rule tells webpack to load WebAssembly in a non-blocking way, making the overall performance more efficient. It will load only when required for specific tasks.
Another thing we need to add to the configuration is the experimental support for WebAssembly.
generatedConfiguration.experiments = {
asyncWebAssembly: true, // Enables async WebAssembly imports
}
This enables the asynchronous loading of WebAssembly for the web pack, which is currently in an experimental phase.
It does not mean that it is experimental. This web technology has been around, since 2015, become a Working Group in the World Wide Web Consortium (W3C) in 2019.
The overall configuration for SharePoint Framework Webpack looks now like this.
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push({
test: /\.wasm$/,
type: 'webassembly/async', // Async WebAssembly handling
});
generatedConfiguration.experiments = {
asyncWebAssembly: true, // Enables async WebAssembly imports
}
return generatedConfiguration;
}
});
How does the code for look like?
In my case, you just import the WebAssembly as it was completely written in JavaScript/Typescript.
import * as fontkit from 'fontkit';
You import the WebAssembly and use it where needed in your code.
// Fetch the font in an arrayBuffer
const arrayBuffer = await fetchFont(fontUrl);
// Create font from ArrayBuffer
const font = fontkit.create(new Buffer(arrayBuffer));
console.debug('FONT::: ', font);
console.debug(`Font Family: ${font.familyName}`);
console.debug(`Font Subfamily: ${font.subfamilyName}`);
console.debug(`Number of Glyphs: ${font.numGlyphs}`);
The code above simply reads the file from the binary sources and hands it to the “fontkit”. It then performs its magic and returns information such as the name of the font family or the number of glyphs/characters stored in the font.
How does it look in the browser
The result, for now, is represented in the browser’s tools, like in the screenshot below.
Would this have been possible with only JavaScript? Maybe, but it would be more complex and less performant.
In summary
Having web assemblies in your SharePoint Framework is a great opportunity for tasks requiring high performance, especially in binary files.
Would you like to apply an Instagram filter to an image stored in SharePoint? There is probably a WebAssembly that helps you with this task. On top of that, you can enhance SPFx with C#,
WebAssembly is an exciting advancement for web development, offering performance benefits while maintaining a security-first approach. However, as with any tool, it’s important to use it responsibly. Understanding and mitigating potential risks is key to harnessing its full power without compromising security.