WebAssembly

Safari 16.4 Support for WebAssembly fixed-width SIMD. How to use it with C#

Share on twitter Share on linkedin Share on reddit This article covers: What is WebAssembly’s fixed-width SIDM. Creating an Uno Platform WebAssembly project with code using the Vector128 type. Adjusting the project file to ahead-of-time (AOT) compile and include SIMD support. Fixing a publishing error if you accidentally checked the AOT compile option in the Publish dialog. WebAssembly has a feature called fixed-width SIMD that takes advantage of hardware instructions to speed up calculations by running them in parallel. Chrome and Firefox added support for the feature back in 2021, which was good, but many devices couldn’t leverage the performance improvements without Safari’s support. That all changed on March 27th, 2023, because Safari 16.4 was released, and now all modern browsers support WebAssembly fixed-width SIMD! Fixed-Width SIMD (Single Instruction, Multiple data) is a type of parallel processing that takes advantage of an architecture’s SIMD instructions to perform the same operation on multiple data points simultaneously. Because there are multiple types of SIMD, the WebAssembly Community Group decided that it would be best to start with fixed-width 128-bit operations because they’re available across most modern architectures and are proven to be performant. More details on the proposal can be found here if you’re

Optimizing Uno Platform WebAssembly Applications for Peak Performance

Share on twitter Share on linkedin Share on reddit In this article, we will be discussing various tips and best practices for maximizing the performance of your Uno Platform WebAssembly applications, including ways to reduce startup times, improve rendering, and optimize memory usage. Whether you’re a seasoned developer or new to the Uno Platform, this article will provide valuable insights and techniques to help you create fast and efficient applications. A natural question to ask is – “Why aren’t these options available by default?”. Fair question! The defaults we have set are there to optimize your ‘inner dev loop’ productivity. Once the Web app is deployed you can get significant performance improvements just by toggling a few options. So, let’s dive in and start optimizing! Steps to Optimize Performance Make sure to build using the Release configuration dotnet build -c Release on the command line in your CI pipeline). Debug configuration disables a lot of performance optimizations. This is the prime spot where we’ve prioritizet the “inner, developer, loop”. Just changing this option will get you 2x improvements or more, depending on the scenario. Upgrade to the latest Uno.Wasm.Bootstrap packages (7.0.17 as of writing of this blog) to benefit from

Creating Elegant Reports in WebAssembly Apps with DevExpress Reporting and Uno Platform

Share on twitter Share on linkedin Share on reddit Good engineers integrate when and where it makes sense regardless of the territory being charted. Great engineers and community members explore that uncharted territory and map it out for others.  This is what one of our clients and contributors – Kahua – faced when facing a business challenge. They solved it and shared some tips on how to go about it for anyone who walks the same path.   The Challenge Kahua needed to create a large number of dashboards and reports across platforms and devices on top of the Uno Platform powered Web Application and soon mobile and desktop applications.  On the technical side, this meant connecting two advanced and complex frameworks with an enterprise application and bringing forward what all three entities do the best.  DevExpress is a widely used powerful reporting framework which is highly configurable and works cross-platform.   Uno Platform provides multi-platform support for applications built with C# and XAML. Kahua is an enterprise application which provides complex configuration, user-defined applications and runs on .NET.   Uno Platform and DevExpress are using .NET and JavaScript to provide their functionality beside other technologies. Meanwhile, Kahua is utilizing .NET

The State of WebAssembly – 2022 and 2023

Share on twitter Share on linkedin Share on reddit In this article, I will look at the current state of WebAssembly (wasm). I’ll start by revisiting 2022 developments to see if any of my predictions came true and if there were any surprises. Then I’ll try to predict where I think things will go in 2023. 2022 In Review In 2021, Safari surprised me with how much work went into catching up to the other browsers’ WebAssembly support. So how did Safari do over the past year? Safari Safari has continued to improve its WebAssembly support by implementing several bug fixes and improvements, but most of its visible work went into improving the browser in other areas. Although there weren’t prominent wasm features implemented this past year compared to what happened the year before, a lot is happening under the hood. For example, in last year’s prediction, I thought fixed-width SIMD was something that Safari would implement in 2022 and round out browser support for it. Unfortunately, fixed-width SIMD didn’t make it into Safari in 2022, but it’s now complete and part of Technical Preview 161! SIMD (Single Instruction, Multiple Data) is a type of parallel processing that takes advantage of a CPU’s

Adding Google Maps to your Uno Platform-WASM App

Google Maps is the leading location data and visualization platform for the web, but the functionality of Google Maps extends well beyond its mobile app — if you are building a mobile, web, or desktop app and want to include location displays in any way, Google Maps offers  developer APIs that give access to Google’s geographical data.  Google Maps API allows you to display and leverage interactive maps to help users create itineraries, routes, and more. Its data also refreshes in real-time, meaning that maps you create with Google API will always be up to date for visitors.  Recently, a new Uno Platform user was looking to implement Google Maps into his Uno Platform WASM application but was running into some blockers since MapControl does not provide WASM support yet. Luckily, you can integrate Uno-WASM Web Applications with existing JavaScript components and it’s quite simple.   In this article, Martin Zickmund works through a step-by-step guide on how you can easily implement Google Maps into your WASM application.    Get the Google Maps API key You can follow any tutorial available on the web like here on how to get an API key via the Google Developer Console. It involves creating a

Implementing Lazy Loading Functionality in Uno WebAssembly Applications

No matter the purpose of your application or website, performance is essential to a great user experience. Slow loading apps and webpages will turn users away almost immediately. Fortunately, Lazy Loading is a technique used to optimize load time by only loading required content at first, and loading any remaining page content once the user needs it.  In this article, Johnny guides us through the steps required to implement the Lazy Loading functionality for ListView and Gridview controls in Uno Platform WASM applications. Follow Along with the Demo Project Source Code Lazy Loading Lazy Loading or incremental loading is a strategy to delay the loading of objects until they are actually needed. This can help reducing resources used by the application and increase loading times for the item collection, because only parts of the data are loaded initially. ScrollView For my usecase the trigger for loading more items is a certain scrolling threshold in the ListView and GridView control. To get the current scroll position we need to somehow access the ScrollView within the ListViewBase which is the base class for ListView and GridView. We will use the VisualTreeHelper class to get information about nodes in the visual tree and get a reference to the inner ScrollView of the ListViewBase var myScrollView = ExtendedVisualTreeHelper.GetFirstDescendant(myGridView); myScrollView.ViewChanged +=

Theme-Aware Splash Screen in Uno Platform WebAssembly

We’re always keeping an ear out for feature requests, bugs, and issues raised by the community so we can continue to better improve Uno Platform. So when @TopperDEL brought up a great question about the possibility to use theme-aware splash screens on Uno Platform Discord channel, Martin Zikmund was quick to offer a solution. Splash Screen A “Splash Screen” is the first image or page displayed when you first load your application, while the application is initializing. The splash screen remains visible until the first page of the application is ready to display. Unlike iOS, Android and Windows, WebAssembly does not yet support theme respecting splash screens. For those interested, the PR can be seen here. And now, with the stable release of Uno.Wasm.Bootstrap 3.3.1 it can be used in all Uno Platforms apps literally with a single line change! Here’s How To Do ItOpen the AppManifest.js file in the WasmScripts folder of the WASM project in any Uno Platform app solution and either set the splashScreenColor to transparent or delete the property entirely: var UnoAppManifest = { splashScreenImage: “Assets/SplashScreen.png”, splashScreenColor: “transparent”, displayName: “Theme-aware splash screen” } And voilà! The splash screen will now match the theme of your OS or browser! Note: To achieve the same effect in UWP/WinAppSDK the exact same change is required in the

NuGet Package Explorer Update: 30k users, 22% not on Windows. One new feature!

Last year our team contributed to the famous NuGet Package Explorer (NPE) open-source project by helping port its Windows-only application to Web using Uno Platform. The goal of the migration was to enable non-Windows users to also be able to use NPE on their preferred operating system. If you haven’t checked it out yet, please see https://NuGet.info To measure how effective we were in reaching the goal, and to help evolve NPE better, we also hooked NPE to .NET Foundation’s Azure Subscription using Azure Static Web Apps and Azure Front Door—a fantastic example of how the .NET Foundation can help and support its member projects. Today, 22% of developers using NuGet Package explorer are coming from non-Windows platforms (and from some surprising ones). Also, we discovered a new feature that needs enabling, which is what we are doing today too! Usage Statistics First, let’s look at the overall usage. The sample data is for the past 90 days to calculate weekly averages. We were incredibly happy to see nearly 30,000 Monthly Active Users for NPE!   Looking at telemetry, 22% of the users come from non-Windows operating systems – goal accomplished! An interesting insight is that even on Windows, a lot

The State of WebAssembly – 2021 and 2022

In this article, I’m going to take the same approach that I used last year to show you the current state of WebAssembly. I’ll look at the big events of the past year and then try to predict where I think things are going in 2022. 2021 in Review This past year turned out to be a much bigger year for WebAssembly than I was expecting, especially around the Safari web browser. Safari When the MVP of WebAssembly was released back in 2017, Safari was right there with the same features as the rest of the browsers. In the years that followed, Safari unfortunately fell behind. Over 2021, I was very pleased to see a lot of work put into Safari to bring its WebAssembly support up to date. As of the Safari 15.2 release on December 14th, some of the features added to Safari over 2021 include: Streaming Compilation Bulk Memory Operations Addressable Memory can now reach 4GB Exception Handling Support for the COOP (Cross-Origin-Opener-Policy) and COEP (Cross-Origin-Embedder-Policy) response headers Atomic Instructions The re-enabling of the SharedArrayBuffer for sites that use the COOP/COEP response header SharedArrayBuffer WebAssembly uses the SharedArrayBuffer to share memory between WebAssembly threads. Unfortunately, the buffer