Wasm Core Overview

TechUI Wasm Core is the heart that drives the TechUI component library, and it is the first commercial-grade pure frontend protection and rendering engine in the history of frontend development.

We have moved away from the traditional UI library architecture that relies solely on JavaScript, migrating core geometric calculations, asset management, authorization verification, and anti-tamper logic into WebAssembly (Wasm) modules written in Rust. This allows TechUI to possess native-level security and integrity while maintaining extreme performance.

To prevent reverse engineering of the Wasm module, multiple subsections in this chapter use abstract and vague conceptual explanations and do not provide explanations of actual parameters, states, or other specific content.

Wasm Asynchronous Loading

The acquisition and instantiation process of the Wasm module's binary file is performed asynchronously.

To ensure that components can correctly call the underlying core algorithms during rendering, developers must wait for the Wasm module to be fully loaded and initialized before mounting the Vue application. Mounting too early may result in components failing to display or throwing errors indicating the core is not ready.

Please refer to the following method to adjust the startup logic in your project's entry file (main.js):

TechUIInit(params).then(() => {
  app.use(router)
  app.use(store)
  app.mount('#app')
  console.log('TechUI Wasm Core loaded successfully.')
})

Why Introduce Wasm?

When developing enterprise-level large screens and high-density business systems, we face the dual challenges of performance and copyright. The introduction of Wasm Core perfectly solves the following issues:

1. Performance Bottlenecks: Complex Scifi UI contains a large number of dynamic chamfers, perspective transformations, and 3D pose solutions. JS often feels powerless when processing such high-frequency mathematical operations, while Wasm modules compiled from Rust can execute these calculations at near-native speeds.
2. Copyright Protection: Traditional JS code is easy to reverse-engineer even if obfuscated. The binary nature of Wasm naturally constitutes a black box, which, combined with memory isolation mechanisms, effectively guarantees the non-tamperability of commercial authorization.
3. Asset Security: Compiling SVG patterns and core algorithms into binary files prevents art assets from being easily extracted or replaced.

Core Capabilities

TechUI Core is not a simple validation plugin; it is a multi-functional microkernel system.

Pure Frontend Offline Authorization (Serverless Licensing)

TechUI implements commercial authorization verification that is completely independent of backend servers.

• Zero Network Dependency: Authentication logic runs entirely within a local Wasm sandbox, supporting physically isolated environments such as offline, intranet, and underground server rooms.
• Zero Latency: Component initialization does not need to wait for an authentication interface response, eliminating the risk of blocking first-screen rendering.

Hybrid Rendering Engine (Hybrid Rendering)

To achieve a balance between flexibility and package size, we adopt a unique dual-mode rendering strategy:

• Dynamic Geometry (Dynamic): For container components like ScifiPanel, Wasm calculates path data in real-time, ensuring edge sharpness and perfect mathematical chamfers at any size.
• Static Assets (Static): For background textures and decorative elements, binary compressed storage is used, with demand-based zero-copy reading at runtime.

Active Defense System (Active Guard)

The built-in Guard subsystem is responsible for monitoring the integrity of the runtime environment.

• Anti-Tamper: Real-time monitoring of the integrity of the DOM structure, browser titles, and native APIs.
• Circuit-Breaker Protection: Once malicious debugging, time rollback, or code injection is detected, the system will trigger a circuit breaker in milliseconds, removing components and stopping service.

Open Toolchain (Open Utilities)

Although the core logic is closed, we open the powerful computing capabilities of Wasm to developers through the tuiCore object.

• Encryption Suite: Open high-performance encryption methods such as md5Enc and openEnc.
• Diagnostic Panel: Provides detailed tuiCoreInfo diagnostic information to help developers quickly troubleshoot environmental issues.

Browser Compatibility

Due to its dependency on the WebAssembly standard, TechUI Core only supports modern browser environments.

• ✅ Supported: Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
• ❌ Unsupported: All versions of Internet Explorer (IE)

💡 Architecture Illustration

The architecture of TechUI can be summarized as: "JS is responsible for DOM operations and event distribution, while Wasm is responsible for core computation and security control." This decoupled design ensures the flexibility of business logic and the security of core assets.

Credits

Software Craftsman

BiliBili

jumtp

BiliBili

Special thanks to the content creator jumtp. Their tutorials on combining Vite (Vue) with Rust-Wasm opened up the critical engineering links for this project.

We also extend our gratitude to Software Craftsman for the detailed Rust Authoritative Guide series, which provided a solid theoretical foundation for us to master WebAssembly.

Thank you both for your selfless sharing on Bilibili, making the learning curve for Rust in frontend development much smoother.

🍵 Side Note: Regarding the Rust Learning Curve

One might assume that because TechUI can develop WASM modules, the author must have deep expertise in Rust.

On the contrary, to be honest, my mastery of Rust is limited to the basics. As a typical pragmatist, my learning goals were very specific—mastering just enough to develop WASM—without delving deeply into the language's advanced features. During that stage, when AI-assisted programming was not yet mature, I did spend a significant amount of time on trial and error and debugging. Today, using AI for WASM development should be much simpler and easier.

I share this experience hoping to help everyone break through the "fear of Rust". Do not feel that you must master this language before you can start working. Learn with a goal in mind, and you can easily cross this threshold.

If you are interested in the underlying implementation principles of the aforementioned "black technologies," specific API invocation methods, and detailed architectural design, please navigate to the Wasm section for more information.