WebAssembly and Portable Displays

Home → Overview → Technology → UI ->   Clients | Responsive | Layouts | Canvas & Dashboards | WebAssembly

Overview  →  Architecture | Technology | Differentiators | Solution | Pillars | Editions

Technology → Real-Time Tag Database | Unified Namespace | Native Drivers | UI Technologies

UI Technologies → Clients | Responsive | Layouts | Canvas & Dashboards | WebAssembly

Understanding WebAssembly in Industrial Automation

WebAssembly (Wasm) is a binary instruction format that enables high-performance applications to run in web browsers at near-native speed. It allows code written in languages like C# to be compiled and executed directly in browsers, eliminating the traditional performance gap between desktop and web applications.

The Portable Display Revolution

The fundamental challenge in industrial automation has always been the trade-off between powerful desktop clients and accessible web interfaces. WebAssembly changes this equation entirely.

Build Once, Run Everywhere

With FrameworX's WebAssembly implementation, a single display configuration can run:

• Natively on Windows using WPF for maximum control
• In any browser using WebAssembly with zero installation
• On mobile devices with responsive design
• Embedded in applications through API integration

The display markup (XAML) remains consistent - only the runtime changes.

Why This Matters for Industrial Applications

Desktop Requirements Remain Critical

For control room operations, native desktop clients provide irreplaceable capabilities:

• Task switching prevention (Ctrl+Alt+Del blocking)
• Full-screen lock for operator safety
• Direct hardware access for specialized peripherals
• Multi-threaded execution for complex visualizations
• Guaranteed resource allocation

See Desktop, Web & Mobile Clients for detailed client comparisons.

Web Accessibility is Essential

Modern operations demand web access for:

• Remote monitoring from any device
• Mobile rounds and inspections
• Management dashboards
• Cross-platform compatibility
• Zero-installation deployment

The Code Behind Challenge

Traditional approaches forced a choice:

• .NET/C# for desktop - Powerful but Windows-only
• JavaScript for web - Portable but limited

This meant maintaining two codebases, doubling development effort, and risking inconsistencies.

WebAssembly as the Bridge

WebAssembly enables the same C# code to execute in both environments:

csharp

// This exact code runs in both WPF and WebAssembly
public void UpdateTemperature(double value)
{
    if (value > AlarmLimit)
    {
        TriggerAlarm();
        LogEvent($"Temperature exceeded: {value}°C");
    }
    UpdateDisplay(value);
}

Technical Implementation

1. Compilation: C# code compiles to WebAssembly modules
2. Runtime: .NET runtime executes within the browser
3. Interop: Seamless communication with browser APIs
4. Performance: Near-native execution speed

Performance Benefits

WebAssembly delivers performance previously impossible in browsers:

• Millisecond updates for thousands of data points
• Complex calculations executed client-side
• Reduced server load through edge processing
• Smooth animations at 60 FPS
• Binary communication protocols

Traditional HTML5/JavaScript architectures struggle with:

• Real-time updates beyond hundreds of points
• Complex mathematical operations
• High-frequency data streams
• Large dataset manipulations

WebAssembly handles these scenarios natively.

Architecture Advantages

Unified Communication Stack

The entire data pipeline runs in compiled code:

• Protocol handling
• Data transformation
• Business logic
• UI updates
• Event processing

Only the final rendering uses browser APIs.

Code Reusability

Beyond displays, WebAssembly enables code sharing across:

• Desktop applications (WPF)
• Web browsers (WebAssembly)
• Mobile apps (MAUI/Blazor)
• Python scripts (via interop)
• Edge devices (IoT)

Deployment Scenarios

Control Room (Desktop Priority)

• Rich Client with WPF for maximum control
• Task switching blocked
• Multi-monitor support
• Local redundancy

Remote Access (Web Priority)

• WebAssembly for zero installation
• Works on any device
• Automatic updates
• Cloud-ready

Hybrid Operations

• Same displays in both modes
• Seamless transition between clients
• Consistent user experience
• Unified training

Implementation Considerations

When to Use Portable Displays

• Multi-platform requirements
• Mixed desktop/web users
• Rapid deployment needs
• Future-proofing investments

When to Specialize

• Platform-specific features required
• Legacy system constraints
• Extreme performance requirements
• Regulatory compliance needs

Technical Requirements

Browser Support

Modern browsers with WebAssembly support:

• Chrome 57+
• Firefox 52+
• Safari 11+
• Edge 79+

Development Environment

• .NET 8 SDK
• Visual Studio 2022 or VS Code
• FrameworX Designer

Conclusion

WebAssembly transforms the traditional desktop-vs-web dilemma into a unified solution. Industrial applications no longer sacrifice power for portability or accessibility for control. The same C# code, the same business logic, and the same displays run everywhere - from locked-down control rooms to mobile devices in the field.

This is not about replacing desktop applications or making everything web-based. It's about having the freedom to deploy the right client for each use case without multiplying development effort.

Related Topics:

• [Desktop, Web & Mobile Clients (Concept)]
• [Responsive Design and RESS]
• [Canvas Displays vs Dashboards]
• [Technology Foundation]

In this section...