09-10-2020, 10:29 PM
Hybrid Blazor apps in the Mobile Blazor Bindings July update
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update.png" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update.png" width="58" height="58" alt="Eilon Lipton" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Eilon</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>July 22nd, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>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.</p>
<p>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!</p>
<p>You can mix and match native and web UI in whatever structure makes sense for your app. Here’s a simple example:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update-1.png"> <img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update-1.png" alt="Blazor Hybrid app in iOS Simulator" width="640" height="607" class="aligncenter size-large wp-image-23935"></a></p>
<p>These are the major new features in the 0.4 Preview 4 release:</p>
<ul>
<li>New Hybrid Apps feature enables mixing Blazor native UI components with Blazor web UI components in the same page. This one is HUGE!</li>
<li>Hybrid Apps are hosted in a new <code>BlazorWebView</code> 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.</li>
<li>New <code>blazorhybrid</code> project template that supports Android, iOS, Windows (WPF), and macOS for creating hybrid apps</li>
<li>Updated dependencies: Xamarin.Forms 4.7, Xamarin.Essentials 1.5, and other libraries.</li>
<li>.NET Core 3.1 SDK is required to use the new preview</li>
</ul>
<h2>How does it work?</h2>
<p>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.</p>
<h2>Get started</h2>
<p>To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 4, <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 SDK</a> and then run the following command:</p>
<pre><code class="shell">dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.4.74-preview
</code></pre>
<p>And then create your first project by running this command:</p>
<pre><code class="shell">dotnet new blazorhybrid -o MyHybridApp
</code></pre>
<p>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 <a href="https://docs.microsoft.com/mobile-blazor-bindings/">https://docs.microsoft.com/mobile-blazor-bindings/</a>.</p>
<h2>Blazor Hybrid code sample</h2>
<p>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 <code><BlazorWebView></code> component to specify which web component to load and where to locate static web assets. Blazor does all the work.</p>
<p>This is the main native UI page <code>/Main.razor</code>:</p>
<pre><code class="xml">@inject CounterState CounterState <ContentView> <StackLayout> <StackLayout Margin="new Thickness(20)"> <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" /> <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" /> </StackLayout> <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand"> <FirstBlazorHybridApp.WebUI.App /> </BlazorWebView> </StackLayout>
</ContentView> @code { // initialization code
}
</code></pre>
<p>And this is the embedded HTML UI page <code>/WebUI/App.razor</code>:</p>
<pre><code class="xml">@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
}
</code></pre>
<h2>Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings project please refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview3-to-preview4">Migrate Mobile Blazor Bindings From Preview 3 to Preview 4 topic</a> for full details.</p>
<h2>More information</h2>
<p>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):</p>
<p>For more information please check out:</p>
<h2>Thank you to contributors</h2>
<p>This release had <a href="https://github.com/xamarin/MobileBlazorBindings/pulls?q=is%3Apr+author%3Ajspuij+created%3A%3C2020-07-16">several major contributions</a> from <a href="https://github.com/jspuij">Jan-Willem Spuij</a>. Jan-Willem had already built his own <a href="https://github.com/jspuij/TwokaB">BlazorWebView</a> component and kindly helped us get this functionality into the Mobile Blazor Bindings project with many great improvements. Thank you Jan-Willem!</p>
<h2>What’s next? Let us know what you want!</h2>
<p>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 <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> so we can keep the discussion going.</p>
</div>
https://www.sickgaming.net/blog/2020/07/...ly-update/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update.png" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update.png" width="58" height="58" alt="Eilon Lipton" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Eilon</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>July 22nd, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>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.</p>
<p>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!</p>
<p>You can mix and match native and web UI in whatever structure makes sense for your app. Here’s a simple example:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update-1.png"> <img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/07/hybrid-blazor-apps-in-the-mobile-blazor-bindings-july-update-1.png" alt="Blazor Hybrid app in iOS Simulator" width="640" height="607" class="aligncenter size-large wp-image-23935"></a></p>
<p>These are the major new features in the 0.4 Preview 4 release:</p>
<ul>
<li>New Hybrid Apps feature enables mixing Blazor native UI components with Blazor web UI components in the same page. This one is HUGE!</li>
<li>Hybrid Apps are hosted in a new <code>BlazorWebView</code> 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.</li>
<li>New <code>blazorhybrid</code> project template that supports Android, iOS, Windows (WPF), and macOS for creating hybrid apps</li>
<li>Updated dependencies: Xamarin.Forms 4.7, Xamarin.Essentials 1.5, and other libraries.</li>
<li>.NET Core 3.1 SDK is required to use the new preview</li>
</ul>
<h2>How does it work?</h2>
<p>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.</p>
<h2>Get started</h2>
<p>To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 4, <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 SDK</a> and then run the following command:</p>
<pre><code class="shell">dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.4.74-preview
</code></pre>
<p>And then create your first project by running this command:</p>
<pre><code class="shell">dotnet new blazorhybrid -o MyHybridApp
</code></pre>
<p>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 <a href="https://docs.microsoft.com/mobile-blazor-bindings/">https://docs.microsoft.com/mobile-blazor-bindings/</a>.</p>
<h2>Blazor Hybrid code sample</h2>
<p>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 <code><BlazorWebView></code> component to specify which web component to load and where to locate static web assets. Blazor does all the work.</p>
<p>This is the main native UI page <code>/Main.razor</code>:</p>
<pre><code class="xml">@inject CounterState CounterState <ContentView> <StackLayout> <StackLayout Margin="new Thickness(20)"> <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" /> <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" /> </StackLayout> <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand"> <FirstBlazorHybridApp.WebUI.App /> </BlazorWebView> </StackLayout>
</ContentView> @code { // initialization code
}
</code></pre>
<p>And this is the embedded HTML UI page <code>/WebUI/App.razor</code>:</p>
<pre><code class="xml">@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
}
</code></pre>
<h2>Upgrade an existing project</h2>
<p>To update an existing Mobile Blazor Bindings project please refer to the <a href="https://docs.microsoft.com/mobile-blazor-bindings/migrate/preview3-to-preview4">Migrate Mobile Blazor Bindings From Preview 3 to Preview 4 topic</a> for full details.</p>
<h2>More information</h2>
<p>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):</p>
<p>For more information please check out:</p>
<h2>Thank you to contributors</h2>
<p>This release had <a href="https://github.com/xamarin/MobileBlazorBindings/pulls?q=is%3Apr+author%3Ajspuij+created%3A%3C2020-07-16">several major contributions</a> from <a href="https://github.com/jspuij">Jan-Willem Spuij</a>. Jan-Willem had already built his own <a href="https://github.com/jspuij/TwokaB">BlazorWebView</a> component and kindly helped us get this functionality into the Mobile Blazor Bindings project with many great improvements. Thank you Jan-Willem!</p>
<h2>What’s next? Let us know what you want!</h2>
<p>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 <a href="https://github.com/xamarin/MobileBlazorBindings">GitHub repo</a> so we can keep the discussion going.</p>
</div>
https://www.sickgaming.net/blog/2020/07/...ly-update/