Performance Improvements in Interactive Web Maps Using WebAssembly

In today's web landscape, a seamless user experience reigns supreme. Single-Page Applications (SPAs) constantly push the boundaries of browser capabilities. However, with growing data complexity and user interactions, traditional JavaScript code can sometimes struggle to keep up. This is where WebAssembly (WASM) steps in, offering a powerful tool to enhance frontend performance.

This blog explores our experience using WASM with a React application to significantly improve the performance of a map component built with React Leaflet.

About the Use Case

As part of a grid monitoring use case, we have integrated a map that displays various grid elements using React Leaflet. The map includes the following components:

• Substation
• Power Transformer
• Energy Consumer
• Battery Unit
• Photovoltaic Unit
• AC Line Segment
• Loading Heatmap and
• Voltage Heatmap

In addition to the above, users can view detailed information about Substations and Transformers. We implemented these features to provide a smooth and responsive user experience.

What is WASM and How Does It Enhance Frontend Performance?

Think of WASM as a way to inject a shot of speed into your web app. It allows you to write the most demanding parts of your code in a super-fast language like C++. This C++ code then gets compiled into WASM modules that the browser can understand and execute nearly as fast as native code on the user's machine.

Here's how WASM brings the power to the app:

• Superior Performance: WASM code excels at processing data and performing calculations. This translates to a significantly faster map rendering, especially when handling large datasets.
• Efficient Memory Control: Unlike JavaScript's automatic memory management, C++ offers fine-grained control over memory usage. This can make your map app use memory more efficiently, improving overall performance.
• Cross-Platform Compatibility: WASM plays nicely with all major browsers, ensuring your app runs smoothly on a wide range of devices.

WASM and SQLite: Boosting Performance Together

We didn't just use WASM by itself in our use case. We combined WASM with SQLite, a strong database system, to enhance the rendering of the React Leaflet map and unlock additional benefits for the application:

• Offline Functionality: Even without an internet connection, users can still access data stored in the WASM module's SQLite database. This keeps the map usable on the go, a huge advantage for mobile users.
• Reduced Server Load: By caching frequently accessed data in SQLite, WASM prevents overwhelming the server with requests. This reduces network traffic, leading to a more responsive and fluid user experience.

Implementing WASM in Our React Application

Let's see how WASM can be applied to a practical scenario: a grid monitoring use case built with React Leaflet, a popular JavaScript library for interactive maps.

• Developing C++ Modules: We create C++ modules to handle the computationally intensive tasks – fetching geometry data, transforming it for the leaflet, and storing it in the SQLite database.
• Compiling to WASM: Tools like Emscripten help us convert our C++ code into WASM modules that the browser can understand and execute.

Makefile

# Compiler
CXX = emcc

# Flags
CXXFLAGS = -O3 -gsource-map

# Directories
SRC_DIR = cpp
OBJ_DIR = obj
OUTPUT_DIR = public/wasm

# Source files
SRCS := $(wildcard $(SRC_DIR)/*.cpp)
OBJS = $(patsubst $(SRC_DIR)/%.cpp,$(OBJ_DIR)/%.o,$(SRCS))

# Output files
MODULE_NAME = ${SRC_DIR}/BrtWasm.cpp
OUTPUT_JS = $(OUTPUT_DIR)/wasm-module.js
OUTPUT_WASM = $(OUTPUT_DIR)/wasm-module.wasm
EXPORT_NAME = BrtWasm

# Targets
all: $(OUTPUT_JS)

$(OUTPUT_JS): $(OBJS)
	$(CXX) --bind $(OBJS) $(MODULE_NAME) -o $(OUTPUT_JS) -O3 -gsource-map -s FETCH=1 -s WASM=1 -s USE_SQLITE3=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" -s NO_EXIT_RUNTIME=1 -s ASSERTIONS=1 -s AGGRESSIVE_VARIABLE_ELIMINATION=1 -s ELIMINATE_DUPLICATE_FUNCTIONS=1 --profiling -s 'EXPORT_NAME="$(EXPORT_NAME)"' -s 'ENVIRONMENT="web"' -s FORCE_FILESYSTEM=1

$(OBJ_DIR)/%.o: $(SRC_DIR)/%.cpp
	@mkdir -p $(OBJ_DIR)
	$(CXX) -c $< -o $@ $(CXXFLAGS) -I$(SRC_DIR)

clean:
	rm -rf $(OBJ_DIR) $(OUTPUT_JS) $(OUTPUT_WASM)

.PHONY: all clean        

• Integrating with React: We integrate the WASM modules into our React application and use JavaScript as an intermediary. This allows React and the WASM modules to communicate seamlessly, ensuring smooth data flow.

let brtWasmModuleInstance = null;

const initializeBrtWasm = async () => {
  if (!brtWasmModuleInstance) {
    try {
      brtWasmModuleInstance = await import("../wasm/wasm-module");
      console.log("Module created!");
    } catch (error) {
      console.error("Error initializing BrtWasm module:", error);
      throw error;
    }
  }
  return brtWasmModuleInstance;
};        

Advantages of WASM Integration: Enhancing Grid Monitoring Use Case Performance

By integrating WASM, our use case experiences several significant improvements:

• Faster Data Display: Fetching and displaying data on the map becomes significantly faster, resulting in quicker loading times and a smoother user experience.
• Enhanced Interaction: Offloading tasks to WASM frees up JavaScript, making the entire map feel more responsive, especially when zooming or panning across large datasets.
• Improved User Experience: Ultimately, users benefit from a smoother and more enjoyable experience when interacting with the map, especially when dealing with complex data visualizations.

Conclusion

WASM offers a powerful solution to overcome performance limitations in web applications, particularly those dealing with large datasets or complex calculations. By leveraging WASM's capabilities, you can significantly enhance the performance and user experience of your web applications.

We hope our experience inspires you to consider WASM for your frontend performance needs. If you have any questions or would like to share your experiences, feel free to leave a comment below. Happy coding!