Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Hybrid Blazor apps in the Mobile Blazor Bindings July update

#1
Hybrid Blazor apps in the Mobile Blazor Bindings July update

Eilon Lipton

Eilon

I’m excited to announce we are releasing the Mobile Blazor Bindings July update! This release adds support for building Hybrid Blazor apps, which contain both native and web UI.

Hybrid apps are a composition of native and web UI in a single app. 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. 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. This feature supports Android, iOS, Windows (WPF), and macOS. And it’s all Blazor, C#, .NET, and Visual Studio. Woohoo!

You can mix and match native and web UI in whatever structure makes sense for your app. Here’s a simple example:

Blazor Hybrid app in iOS Simulator

These are the major new features in the 0.4 Preview 4 release:

  • New Hybrid Apps feature enables mixing Blazor native UI components with Blazor web UI components in the same page. This one is HUGE!
  • Hybrid Apps are hosted in a new BlazorWebView component that uses a browser component to contain the web part of the app. No remote or local web server; all your code runs in the app’s process.
  • New blazorhybrid project template that supports Android, iOS, Windows (WPF), and macOS for creating hybrid apps
  • Updated dependencies: Xamarin.Forms 4.7, Xamarin.Essentials 1.5, and other libraries.
  • .NET Core 3.1 SDK is required to use the new preview

How does it work?


In hybrid apps all the code (both for the native UI parts and the web UI parts) runs as .NET code on the device. 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.

Get started


To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 4, install the .NET Core 3.1 SDK and then run the following command:

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.4.74-preview

And then create your first project by running this command:

dotnet new blazorhybrid -o MyHybridApp

Now open it in Visual Studio and run it on Android, iOS, Windows, or macOS. That’s it! You can find additional docs and tutorials on https://docs.microsoft.com/mobile-blazor-bindings/.

Blazor Hybrid code sample


Here’s the code for an app similar to what was seen at the top of this post. It has native UI and web UI sharing the same app state, running together in the same app process (no web server or HTTP). The native UI uses the new <BlazorWebView> component to specify which web component to load and where to locate static web assets. Blazor does all the work.

This is the main native UI page /Main.razor:

@inject CounterState CounterState <ContentView> <StackLayout> <StackLayout Margin="new Thickness(20)"> <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" /> <Button Text="Increment from native" On‌Click="@CounterState.IncrementCount" Padding="10" /> </StackLayout> <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand"> <FirstBlazorHybridApp.WebUI.App /> </BlazorWebView> </StackLayout>
</ContentView> @code { // initialization code
}

And this is the embedded HTML UI page /WebUI/App.razor:

@inject CounterState CounterState <div style="text-align: center; background-color: lightblue;"> <div> <span style="font-size: 30px; font-weight: bold;"> You pressed @CounterState.CurrentCount times </span> </div> <div> <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button> </div>
</div> @code
{ private void ClickMe() { CounterState.IncrementCount(); } // initialization code
}

Upgrade an existing project


To update an existing Mobile Blazor Bindings project please refer to the Migrate Mobile Blazor Bindings From Preview 3 to Preview 4 topic for full details.

More information


Check out last month’s ASP.NET Community Standup where I talked a bit about these new features and did a demo of Blazor hybrid apps (starts at 30:35):

For more information please check out:

Thank you to contributors


This release had several major contributions from Jan-Willem Spuij. Jan-Willem had already built his own BlazorWebView component and kindly helped us get this functionality into the Mobile Blazor Bindings project with many great improvements. Thank you Jan-Willem!

What’s next? Let us know what you want!


This project relies on your feedback to help shape the future of Blazor for native and hybrid scenarios. Please share your thoughts on this blog post or at the GitHub repo so we can keep the discussion going.



https://www.sickgaming.net/blog/2020/07/...ly-update/
Reply



Possibly Related Threads…
Thread Author Replies Views Last Post
  Azure Static Web Apps with .NET and Blazor xSicKxBot 0 44 09-23-2020, 07:22 PM
Last Post: xSicKxBot
  Free e-book: Blazor for ASP.NET Web Forms Developers xSicKxBot 0 52 09-11-2020, 02:22 PM
Last Post: xSicKxBot
  Announcing Experimental Mobile Blazor Bindings May update xSicKxBot 0 62 09-08-2020, 02:28 PM
Last Post: xSicKxBot
  Hybrid Blazor apps in the Mobile Blazor Bindings July update xSicKxBot 0 122 07-24-2020, 11:57 AM
Last Post: xSicKxBot
  Announcing Experimental Mobile Blazor Bindings May update xSicKxBot 0 147 06-05-2020, 05:00 PM
Last Post: xSicKxBot
  Blazor WebAssembly 3.2.0 now available xSicKxBot 0 155 06-05-2020, 02:10 AM
Last Post: xSicKxBot
  Blazor WebAssembly 3.2.0 Release Candidate now available xSicKxBot 0 128 06-04-2020, 05:07 AM
Last Post: xSicKxBot
  Blazor WebAssembly 3.2.0 Preview 5 release now available xSicKxBot 0 138 06-03-2020, 10:43 PM
Last Post: xSicKxBot
  Blazor WebAssembly 3.2.0 Preview 4 release now available xSicKxBot 0 132 06-03-2020, 08:20 AM
Last Post: xSicKxBot
  Announcing Experimental Mobile Blazor Bindings May update xSicKxBot 0 162 05-27-2020, 02:57 AM
Last Post: xSicKxBot

Forum Jump:

Become a Patron!
[-]
Upcoming Events

[-]
Latest Threads
[1.06] BO4 Zombie Trainer (Call of duty ...
Last Post: Tom_Pdv
Today 09:03 PM
» Replies: 12
» Views: 440
[Tut] How to Build Your Brand as a Freel...
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 1
(Indie Deal) FREE Ghost Sweeper, ? NBA 2...
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 2
Drag[en]gine Hands-On
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 2
AppleInsider - Apple TV Remote app influ...
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 1
News - Nightdive Studios Delays Its Enha...
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 1
News - PS5 Third-Party Face Plates Are A...
Last Post: xSicKxBot
Today 08:58 PM
» Replies: 0
» Views: 2
Xbox Wire - Xbox Insider Release Notes –...
Last Post: xSicKxBot
Today 02:31 PM
» Replies: 0
» Views: 4
News - Video: The lighting technology of...
Last Post: xSicKxBot
Today 02:30 PM
» Replies: 0
» Views: 5
News - Talking Point: What Are You Playi...
Last Post: xSicKxBot
Today 02:22 PM
» Replies: 0
» Views: 4

[-]
Twitter

[-]
Sponsored
Get the Deal of the Week at RefurBees.com

Copyright © SickGaming.net 2012-2020