WebAssembly

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

Uno Platform SQLite for WebAssembly support on .NET 5 and .NET 6

WebAssembly Support for SQLite and Erik Sink’s SQLitePCL.raw has been present in Uno Platform for quite some time now, when running under the mono runtime but .NET 5+ support was missing. We’re pleased to announce that support has now been added in our SQLite provider for WebAssembly starting from 3.1.1, allowing to build with the latest and greatest features available, alongside with Entity Framework Core 6 previews and the Frank Krueger‘s awesome sqlite-net-pcl library. We’ve updated our online sample repository for you to try SQLite and EntityFramework Core directly in your browser: https://sqliteefcore-wasm.platform.uno   Getting started using SQLite in your browser You can find an up-to-date documentation for this walkthrough here, the full example for this tutorial here, and Entity Framework Core sample here. First, you’ll need to setup your environment using our getting started steps. Once you’re done, you can create a new application using our visual studio extension or dotnet new templates. You’ll then need to add new dependencies in your application as follows: <PackageReference Include=”sqlite-net-pcl” Version=”1.7.335″ /> <PackageReference Include=”Uno.SQLitePCLRaw.provider.wasm” Version=”3.1.1″ /> <!– Required when using sqlite-net-pcl which otherwise overrides the WebAssembly compatible version of the SQLitePCL.raw provider. –> <PackageReference Include=”SQLitePCLRaw.bundle_green” Version=”2.0.5-pre20210521085756″ IncludeAssets=”none” />   Once done, in

Uno Platform 3.9: .NET 6 Mobile, VS 2022, WinUI, plus XAML trimming for 50% Wasm AOT size reduction

The newest release brings support for .NET 6 (for iOS, Android, mac Catalyst and macOS), support for Visual Studio 2022 templates, WinAppSDK 0.8.1, Focus management updates, a XAML Trimming feature to reduce the size of WebAssembly apps by nearly 50% as well as many other improvements and bug fixes. WinUI Everywhere In order to follow through on our vision to make WinUI-built applications everywhere, we remain in lockstep with all advancements in Windows developer ecosystem. As Microsoft announced, WinUI 3 now ships as part of the new WinAppSDK (formerly known as Project Reunion). WinAppSDK 0.8.1 has been released and our 3.9 release supports it.   .NET 6 support – iOS, Android, macOS Catalyst and macOS Adding support for .NET 6 mobile targets required a significant effort in terms of packaging to ensure that both current Xamarin (iOS/Android/macOS) targets are supported, as well as new .NET 6 based targets. This new support is available for both Uno.UI and Uno.WinUI packages, ensuring a smooth transition for existing projects. .NET 6 Mobile for Uno Platform support comes with iOS, Android, macOS (AppKit) and Catalyst targets. Mac Catalyst is the newest platform addition, giving the ability for UIKit-based apps to run on macOS with

Hosting Uno Platform WebAssembly apps on Azure Static Web Apps

This article covers : Creating a GitHub repository and cloning it using Visual Studio. How to create an Azure Static Web App and configure it to pull from your GitHub repository. Creating an Uno Platform WebAssembly application and committing it to your repository. Note: A shorter Version of this article for those with more experience with Azure is available here in Uno Platform’s documentation. Suppose you have an idea for an Uno Platform WebAssembly application and you’re also thinking about how you could host it. In the past you may have used CDNs (Content Delivery Networks) for things like JavaScript libraries because the network distributes the files around the world. Being distributed around the world, the files are physically closer to your users which speeds up a browser’s request for the file compared to if the file was served from a single server on the other side of the world for example. Because an Uno Platform WebAssembly application is all client-side (all the work happens in the browser), what you have is a static web app. While you could host your static web application with a traditional hosting service, that would limit its potential. That’s because one of the main

Uno Platform 3.7 – More WinUI, Project Reunion and Linux Support, Wasm Performance Boost

Uno Platform 3.7 expands our support for the newest WinUI, Project Reunion and Linux, all while continuing performance improvements for WebAssembly head. Extending WinUI Support We are continuing the #WinUIEverywhere path by adding support for XAML behaviors for the newly-released WinUI 3. XAML Behaviors is an easy-to-use means of adding common and reusable interactivity to your Windows applications with minimal code. With Uno Platform, you can take it to any mobile, web or desktop platform. Previously, we provided support for XAML Behaviors for Windows UWP applications, and we have now been upgraded it to support Windows WinUI and Uno Platform applications as well. We also contributed the Prism Library support for Uno Platform and Project Reunion – WinUI 3. This was merged very recently in the preview bits and will be available as part of the next release. Big thanks to Dan Siegel and Brian Lagunas for their support to get this massive PR merged (200+ files changed!). New WinUI Control ported – SwipeControl The SwipeControl is part of the WinUI 2 library, and is used a lot on touch devices. We ported this control to Uno Platform to enhance the user experience of your apps: GTK/Linux TextBox support By