Web

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

Building Apps for MS Teams in C# and XAML with Uno Platform

In this blog, we’ll explore how Uno Platform and WebAssembly make it possible to develop apps for Microsoft Teams using C# and XAML. And how they can help streamline your workflows, automate tasks, and bring new capabilities to your team. By the end of this tutorial, you will have a simple sample app running in web version of Microsoft Teams, similar to our Getting Started tutorial. (Create a Single Page App with Uno Platform) Prerequisites 1. Visual Studio 2022 includes built-in support for Microsoft Teams and provides useful starter templates, but they are not installed by default with any workloads. Instead, we need to select them in the Visual Studio Installer manually. Open the Visual Studio Installer and click Modify on your favourite Visual Studio 2022 instance. Next, select the ASP.NET and web development workload and then find and check the Microsoft Teams development tools option in the Installation details pane. 2. While you can technically test your Microsoft Teams on your production tenant, creating a developer account in the Microsoft 365 Developer Program is preferable. First, go to the official website here and click Join. Next, log in using your Microsoft or company account and fill out the requested information. When successfully logged in, click the Set up E5

XAML Fundamentals for Web & Mobile: Adding Custom Sorting Logic

Nick Randolph’s earlier post in this blog series covered the basics of sorting and grouping. The CollectionViewSource provides a wrapper around a data source that can indicate if the source is grouped and will maintain the selected item. Suppose you are familiar with CollectionViewSource from WPF. In that case, you may not be aware that the class no longer has functionality for sorting and grouping itself in UWP, but this can be achieved in the underlying source. The WinUI/Uno version follows the UWP functionality. CustomSorting Sample App Sorting Collections .NET has a set of functionalities for querying collections, and they make up the System.Linq namespace. This adds several extension methods to standard .NET collection classes to allow querying, sorting, and grouping. LINQ stands for Language INtegrated Query, a declarative query syntax right in your C# code. You can perform operations using the query syntax or directly using the fluent OrderBy, GroupBy, etc. methods provided. LINQ Fluent When you are using intrinsic types such as Int32 (aliased as “int” in C#), there is a predictable behavior for sorting because these types implement the IComparable<T> interface. This interface defines a single method CompareTo which returns a value indicating whether the other instance is less than,

Intro to LiteDB for .NET Developers. Sample WebApp Included

This article will look closely at LiteDB, a .NET NoSQL Document Store in a single data file. We will discover the advantages of LiteDB and why it is a viable candidate for your next project. We will also explore the differences between a NoSQL and a classical SQL database and what this has to do with the reminiscent SQL CE or the more modern SQLite database. Lastly, we will develop a sample .NET WebApp using Uno Platform and LiteDB. .NET WebApp Sample LiteDB LiteDB is a document store that gets saved into a single file. That means that all your data resides in a single file. If you remember the good old times’ citation needed, you might remember SQL Server Compact, a single file database based on the SQL Server. A modern version would be SQLite, which is also a single-file database. All of them are serverless, meaning you don’t need to install anything additional, which runs in a background thread and does all the work. This simplicity enables a wide variety of scenarios (especially for rapid prototyping). Some more points, which are listed on their GitHub page: Serverless NoSQL Document Store Simple API, similar to MongoDB 100% C# code for .NET 4.5 / NETStandard 1.3/2.0 in a single DLL (less than 450kb) Thread-safe

XAML Fundamentals for Web & Mobile: Building a Data Bound Menu

WinUI contains classes for menus belonging to a Window and context menus attached to other controls. Users will be familiar with menus in traditional desktop applications and mobile devices. Unlike previous Windows APIs, the WinUI MenuBar and MenuBarItem do not support data binding, so you must build your menu tree from MenuFlyoutItem, MenuFlyoutSubItem, and MenuFlyoutSeparator, either in code or directly in your XAML.  The two types of items cover all the menu scenarios since the MenuFlyoutSubItem can contain additional menu items. A static menu might look something like this: Data-Bindings Menu Sometimes, you may want to populate a menu dynamically from a data source rather than hard-coding them. In this case, there is a little more work to achieve the desired results. There are a couple of ways you could present a grouped collection in a menu – you could choose to display each group using a MenuFlyoutSubItem and have the items nested below this.   While technically, you can continue to nest multiple levels with the MenuFlyoutSubItem, in practice, more than two layers become challenging to navigate, especially on smaller screens. Given a single-level grouped collection, you can write code like the following to populate a top-level MenuBarItem from the

XAML Fundamentals for Web & Mobile: Advanced Binding Techniques

XAML platforms, from WPF and Silverlight to Uno and WinUI, support the MVVM pattern by separating the View described declaratively in a XML dialect with the application logic in code. The VM in the name represents the View Model; this is the code responsible for exposing functionality to which the View can bind without having any knowledge of the View itself. In addition, the platform provides data-binding functionality allowing the View to dynamically display data from the View Model and react to changes.   By declaring namespaces in your XAML file, you can declaratively use a surprising amount of your code and logic beyond the platform’s controls and components. In addition, some limitations with the code can be referred to from XAML – any class must have a default constructor, controls bound to a DataContext must bind to Properties on that source, or in the case of action items like Buttons, an ICommand.  However, in the modern XAML found in Uno and WinUI, there is an additional markup extension called x:Bind, which goes beyond the basic support for binding found in all previous XAML flavors.  By the end of this tutorial or following the sample code, you will have learned when

A Space-Shooter Game on the Web with C#, WASM, and Uno Platform

Growing up as a 90s kid, I played many space shooter games, which gave me a profound love for arcade-style games. This prompted the idea of building my own game, only this time; I wanted my game to run on the web! The challenge was, how? This article shares some insights on my choice of framework and how I made a 2D space shooter game with C#, WebAssembly, and Uno Platform. To keep this article short, I can’t cover every detail of how I built this game so here’s the link to my GitHub repository if you wish to dig a little deeper: GitHub Repo Play Atro Odyssey Why Not Unity? We all know that these 2D games are easily made on Unity, but they aren’t responsive on the web. You get a WebGL player on your browser screen, a fixed-sized area where you can play the game. It can go Fullscreen, but that’s not genuinely responsive. Also, Unity WebGL content is not supported correctly on mobile devices. It may still work, especially on high-end devices, but many mobile devices are not powerful enough and don’t have enough memory to support Unity WebGL content well. It’s excellent for native game

Beautify your Apps with Lottie for Uno Platform

While having animations in our apps is always a treat, implementing them without a hiccup can sometimes be challenging. Thankfully, Lottie enables us to very easily include beautiful and performant vector animations in our cross-platform apps. Even better yet, since Lottie animations are exported as JSON files, file sizes remain small and your animations can easily be resized, looped, and even interacted with without losing quality. Let us go ahead and see how we can implement Lottie animations into our Uno Platform applications, whether you’re targeting iOS, Android, macOS, Linux, or even WebAssembly! Prerequisites and Packages On all Uno Platform targets, you’ll need the following package: Uno.WinUI.Lottie (for the LottieVisualSource). You can find the package by: right-clicking on the project > Manage NuGet Packages > Search Uno.WinUI.Lottie On Windows/WinAppSDK, the support for Lottie is still pending. Implementing Lottie for Uno Platform Feel free to follow along in your preferred IDE or test out Lottie implementation in Uno Playground. Try it out in Uno Playground Step 1 First thing we’ll want to do is add our XML namespace to the mainpage. Step 2 – Update the source On WASM, iOS, and macOS, you can put the Lottie .json files directly in a

XAML Fundamentals for Web and Mobile: Three-level List/Detail Pattern

Opportunity instead of obsoletion Users increasingly expect an intuitive way to drill into your data source and inspect the contents of an individual element. It’s often necessary to leverage a pattern that consistently connects the intentioned person behind the screen to the result they expect. Likewise, a nontrivial part of modernizing your .NET app not only lies in rethinking it for the web but in challenging past assumptions about the user. In a multi-platform world, significant opportunities exist to bolster engagement and familiarity with the information they seek. That’s why developers using WinUI XAML on Uno Platform are well-positioned to enhance their app’s UI to enable faster parsing through a data source, more intuitive location of data items, and a responsive layout that scales to the current device. Understanding the pattern Users increasingly expect an intuitive way to drill into your data source and inspect the contents of an individual element. It’s often necessary to leverage a pattern that consistently connects the intentioned person behind the screen to the result they expect. Likewise, a nontrivial part of modernizing your .NET app not only lies in rethinking it for the web but in challenging past assumptions about the user. In a