Mobile Blazor Bindings Tackles Hybrid Apps -- Visual Studio Magazine

Mobile Blazor Bindings Tackles Hybrid Apps

By David Ramel
07/27/2020

Microsoft's latest update of its Mobile Blazor Bindings project -- which expands the Blazor web-coding-with-C# model to the mobile arena for iOS, Android and other apps -- now does hybrid apps.

Blazor started out as a scheme for browser-based web development with C# instead of JavaScript but has seen its scope widened from web to mobile, desktop and other kinds of apps, as shown in this graphic.

**[Click on image for larger view.]** Blazor, from the Web to Native *(source: Steve Sanderson).*

Mobile apps, of course, get a head start in Blazor, as Microsoft already has the robust Xamarin ecosystem for creating mobile apps with C#. In the Blazor scheme for mobile, hybrid apps refer to a mix of native and web UI.

The hybrid functionality is a big milestone for the project, Eilon Lipton said. "With Mobile Blazor Bindings this means you can write the native UI of your app using Blazor, and also create web UI in your app using Blazor," Lipton said in a July 22 blog post. "A major advantage of hybrid apps is that the HTML part of the app can reuse content, layout, and styles that are used in a regular web app, while enabling rich native UI to be composed alongside it. You can reuse code, designs, and knowledge, while still taking full advantage of each platform’s unique features."

The "Experimental Mobile Blazor Bindings" site says the project helps developers build a native UI with labels, buttons, and other native UI components for native and hybrid mobile apps using C# and .NET for Android, iOS, Windows, and macOS using familiar web programming patterns. The project uses Razor syntax to define UI components and behaviors of an application, with underlying UI components being based on Xamarin.Forms native UI components and, in hybrid apps, being mixed with HTML elements.

In the July 2020 update, bringing the project up to 0.4 Preview 4, the main highlight is enabling such mixing of Blazor native UI components with Blazor web UI components in the same page. "This one is HUGE!" Lipton said.

"In hybrid apps all the code (both for the native UI parts and the web UI parts) runs as .NET code on the device," he explained. "There is no local or remote web server and no WebAssembly (WASM). The .NET code for the entire app runs in a single process. The native UI components run as the device’s standard UI components (button, label, etc.) and the web UI components are hosted in a browser view (such as WebKit, Chromium, and Edge WebView2). The components can share state using standard .NET patterns, such as event handlers, dependency injection, or anything else you are already using in your apps today."

As an example app, the following screenshot is detailed in the post.

**[Click on image for larger view.]** Mixing and Matching Native and Web UI *(source: Microsoft).*

The Experimental Mobile Blazor Bindings code is available on GitHub.

In addition to the mix-and-match hybrid functionality, other highlights of the July 2020 update as detailed in the release notes include:

Hybrid Apps are hosted in a new BlazorWebView component that uses a browser component to contain the web part of the app
New blazorhybrid project template that supports Android, iOS, Windows (WPF), and macOS for creating hybrid apps
Updated dependent package versions to Xamarin.Forms 4.7, Xamarin.Essentials 1.5, and other libraries. #122
All built-in components have had their list of properties and docs updated to reflect the version update
Breaking change: .NET Core 3.1 SDK is required to use the new preview (previously it was .NET Core 3.0)

About the Author

David Ramel is an editor and writer at Converge 360.

Printable Format

comments powered by Disqus

Featured

Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.
Naive Bayes Regression Using C#

Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.
VS Code Copilot Previews New GPT-4o AI Code Completion Model

The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.
Microsoft's Rust Embrace Continues with Azure SDK Beta

"Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."
Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.