Blazor Server in .NET Core 3.0 scenarios and performance

62 comments

Discussion is closed. Login to edit/delete existing comments.

• 

  Cory Crooks October 11, 2019 9:11 pm 0

  collapse this comment copy link to this comment

  At a high level, it sounds like Blazor Webassembly productization is mid-2020, but we shouldn’t expect AOT Blazor Webassembly until the .NET 5 (or maybe even 6?) timeframe?

  • 

    Daniel Roth October 14, 2019 3:00 pm 0

    collapse this comment copy link to this comment

    There is ongoing AoT work for Blazor WebAssembly in progress, but we don’t have a committed time frame yet for when it will land. We’ll let you know as soon as we have more details!

• 

  Jason Chen October 12, 2019 11:32 pm 0

  collapse this comment copy link to this comment

  I really like blazor, it’s a lot of fun to code.

  I ran into some issues deploying on Azure. This might be azure specific. I built a blazor server side app that does multiplayer games using signalr core. Basically I have another signalr core hub. This works fine on local machine. However, when I deploy to azure, I got errors:
  If I offload to Azure SignalR service, I’ll get error like: Error: The circuit failed to initialize.
  If I don’t use Azure SignalR service (just websocket), I’ll get error like: stem.Net.Http.HttpRequestException: An attempt was made to access a socket in a way forbidden by its access permissions. —> System.Net.Sockets.SocketException (10013): An attempt was made to access a socket in a way forbidden by its access permissions. at System.Net.Http.ConnectHelper.ConnectAsync

  If I removed my hub, it works fine.

  I also commented on issue: #10475

  • 

    Daniel Roth October 14, 2019 3:03 pm 0

    collapse this comment copy link to this comment

    We’ll take a look and report back on the GitHub issue: https://github.com/aspnet/aspnetcore/issues/10475. Using SignalR from a Blazor Server app is a bit clunky right now, but it’s something we plan to better address for .NET 5.

    • 

      Jason Chen October 15, 2019 5:51 pm 0

      collapse this comment copy link to this comment

      Resolved! Thanks!

• 

  Vesela Gerasimova October 15, 2019 12:22 am 0

  collapse this comment copy link to this comment

  Hello,
  You’ve done a great work so far! We are about to start developing quite a big app, that will be concurrently used from thousands of clients that will be able to create a workflow diagrams, generally speaking. What we are mostly concerned about is the connection reliability and server load so we really need to use the client side approach. How realistic in your opinion is to have Blazor with webAssembly shipped on time? Fully functional? How big do you expect it to be the deployment footprint of the additional dlls that need to be shipped to the client? Do you plan for being able to modify DOM from WebAssembly in this first official release? Should we expect slower user experience because of having one more layer of code (js between the webassembly and DOM) ?

  • 

    Vesela Gerasimova October 15, 2019 1:02 am 0

    collapse this comment copy link to this comment

    We are also kind of concerned because we had been very enthusiastic in the close past about that kind of cutting edge technologies and we failed …. with silverlight 🙁 I still miss it however, but it brings bad memories to the management.

    • 

      Daniel Roth October 15, 2019 4:09 pm 0

      collapse this comment copy link to this comment

      Hi Vesela,

      We are planning to ship a stable and supported release of Blazor WebAssembly in May 2020. The size of a default Blazor WebAssembly app is currently ~2.4MB compressed, which includes the .NET runtime, your app, all of it’s dependencies, Bootstrap, and the bootstrapping JS files. We don’t expect this size to increase significantly before we ship, and we hope to further decrease it.

      You don’t typically modify the DOM directly from a Blazor app, because the Blazor framework handles that for you. You write components that render to an in-memory representation of the DOM called a render tree. Blazor then handles figuring out what changed and applies the changes to the actual DOM. If you need to manipulate the DOM directly you can still do that using JS interop, but you shouldn’t modify DOM elements that Blazor is tracking, as this will likely mess up Blazor’s change tracking algorithm.

      Blazor WebAssembly works great for normal UI workloads, in part because of how it efficiently updates the DOM. However, Blazor WebAssembly is not currently so good for CPU intensive workloads. The .NET runtime used by Blazor WebAssembly apps is today a .NET IL interpreter, so it doesn’t get any of the performance benefits of doing JIT compilation. You probably wouldn’t want to write a ray tracer in Blazor WebAssembly. We are working to improve the performance of Blazor WebAssembly apps by providing support for ahead of time compilation to WebAssembly, but this is not expected to be part of the initial release in May. Instead, we would recommend either offloading CPU intensive logic to the server or implementing performance sensitive logic in JS/WebAssembly directly and then calling into it using JS interop.

      We also understand the concerns about Blazor potentially being another Silverlight, but Blazor differs from Silverlight in a couple of important ways: Unlike Silverlight, Blazor is based purely on open web standards: HTML, CSS, and WebAssembly. Silverlight was based on a proprietary browser plugin. Blazor is also open source and community driven from the start. Regardless of Microsoft’s level of investment, you always have access to the entire Blazor source code and to a supportive community.

      I hope this helps!

      • 

        Vesela Gerasimova October 18, 2019 1:45 am 0

        collapse this comment copy link to this comment

        Thanks for your reply! Unfortunately the management decided to go for js but we are still about to try it for an internal project.

• 

  Mystery Man October 15, 2019 3:06 am 0

  collapse this comment copy link to this comment

  I keep confusing Razor and Blazor. I’m still not sure which one is which.

  • 

    Daniel Roth October 15, 2019 8:17 am 0

    collapse this comment copy link to this comment

    Great question!

    Blazor is a client-side web UI framework based on .NET and C# instead of JS.

    Razor is a syntax used to generate dynamic content using a combination of markup and C#.

    Razor syntax is used in Blazor to author the rendering logic for components (.razor files). Browser + Razor = Blazor!

    Razor is also used to author dynamic MVC views and Razor Pages (.cshtml files).

    • 

      Mystery Man October 15, 2019 11:02 pm 0

      collapse this comment copy link to this comment

      Let’s see if I got it right: A developer creates a .razor file that contains both HTML tags and C# code, mingled in conformance to a set of rules called Razor. The browser loads Blazor (metonymically speaking) and Blazor loads the .razor file, giving life to a web app that may or may not communicate with a Blazor Server.

      Now, since Blazor is a web framework, all of this C# and HTML ultimately become JavaScript? Or WebAssembly?

      • 

        Daniel Roth October 16, 2019 11:32 pm 0

        collapse this comment copy link to this comment

        Hi Fleet,

        Blazor apps can be hosted in a couple of different ways: on the server, or on WebAssembly.

        When hosted on WebAssembly, the browser downloads a WebAssembly based .NET runtime along with your app and then runs the built .NET assemblies directly in the browser. Blazor WebAssembly apps are just a bunch of static files, so they don’t require any server component at all other than some way to host the files.

        Blazor Server apps instead run on the server and set up a real-time connection with the browser to handle all UI interactions.

        For a full overview of what Blazor is and how it works see https://docs.microsoft.com/aspnet/core/blazor/.

        I hope this helps!

• 

  Cesar Maroun October 17, 2019 11:02 am 0

  collapse this comment copy link to this comment

  Blazor is very cool. It feels like Angular but in the powerful C# (but then again Angular seemed to me a bit like Web Forms but in TS/JS).
  You say: “You can change your mind later”.
  Are there any best practices to pay attention to in order to really be able to do that ?

  Blazor (and razor pages) are (to me) just like another version of Web Forms.
  The problem with Web Forms was that it was very easy to write business logic in the code behind without paying attention, this is also true for Blazor.
  If we do that, then we won’t be able to switch to WebAssembly. At least not without exposing business logic.

  The way I see we must at least
  1. Have a separate library (dll) for logic
  2. Find some way to simulate calling an api on the server even though we can just call or inject a local service.
  3. Find a way to make (2.) switch automatically to a server call when we move to WebAssembly.

  I’d like to add two more things:

  SignalR errors.
  It would be nice if the SignalR errors would be reported on-screen and not only in the console.
  What happens now is the application stops working and just like a disabled button on a form, we have to start guessing why it isn’t working instead of telling us what’s missing.

  DataBinding
  In continuation to (1.) regarding the no-feedback behavior.

  The documentation states that:
  “When a user provides an unparsable value to a databound element, the unparsable value is automatically reverted to its previous value when the bind event is triggered.”

  This is terrible behavior because:
  a. No regular user will notice that change since a regular user doesn’t usually look at the screen while typing. This is the same terrible behavior that blocks characters on a field or stops accepting when the max length is reached, etc… the final result is never what the user intended

  b. This forces the user to start all over again instead of just fixing it (Typing 12e45 results in 1245 which makes no sense. However, leaving 12e45 gives a user a chance to see the mistake and fix it to 12345)

  Another example from the documentation:
  “the reversion occurs after any keystroke that introduces an unparsable value. When targeting the oninput event with an int-bound type, a user is prevented from typing a . character. A . character is immediately removed, so the user receives immediate feedback that only whole numbers are permitted”

  This is absolutely wrong. The user does not get any feedback at all, since he/she is probably still typing and not looking at the screen.
  Another wrong thing is assuming the user will understand that preventing the “.” means that only integers are allowed, this is not “Do not make me think”. The first thought will be that something is wrong with the keyboard or language settings… I saw that happen more than a few times.

  There has to be a way to display the exact value the user typed so that the user can fix it.
  This behavior exists in angular and it allows to show errors to the user instead of making him guess. (through ngModelOptions => allowInvalid)

  • 

    Daniel Roth October 17, 2019 12:52 pm 0

    collapse this comment copy link to this comment

    Hi Cesar,

    Blazor Server and Blazor WebAssembly both use the same component model, so the same UI code can be used with both hosting models. However, you are correct that you can still write server or browser specific code in your components, which would then tie those components to the hosting model. To keep your components hosting model agnostic, you should factor hosting model specific code into different service implementations and have the components depend just on the service contract.

    We are working on providing a better dev time exception handling experience for 3.1. More details on that soon.

    For the data binding issue, I think it’s best if we discuss that one in a GitHub issue. Please open an issue at https://github.com/aspnet/aspnetcore/issues with your feedback.

    Thanks for using Blazor!

    • 

      Cesar Maroun October 17, 2019 8:27 pm 0

      collapse this comment copy link to this comment

      Hi Daniel.
      Thanks for your reply.

      I will open an issue about data binding. However, I didn’t quite understand your answer for the first point regarding my concerns.

      Let’s say all the logic is implemented using services, those services still don’t make Http requests but access the DBContext/Internal Business logic directly.
      This means that if we decide to move to WebAssembly, we are going to have to rewrite parts of those services to actually call a remote api ?
      Or do you mean that we should implement some kind of HttpRequest dummy as a layer between the public service and the DbContext/Internal Businnes logic and later replace it ?

      Take this simple service.
      How will it work with dbContext ?
      How will the SecretCalculator not unintentionally leak to the client when moving to WebAssembly ?

      public class WeatherService
      {
      private DbContext _dbContext;
      private WeatherSecretCalculator _sercretCalulator;

          public WeatherService(DbContext dbContext, WeatherSecretCalculator sercretCalulator)
          {
              _sercretCalulator = secretCalculator;
              _dbContext = dbContext;
          }
      
          public async Task GetTemprature()
          {
              var someDbValue = await _dbContext...
              return await _sercretCalulator.Calculate(someDbValue);
          }
      

      }

      • 

        Cesar Maroun October 17, 2019 8:37 pm 0

        collapse this comment copy link to this comment

        Sorry for the lack of indentation. The code editor here is not working for me…

        • 

          Daniel Roth October 18, 2019 12:40 pm 0

          collapse this comment copy link to this comment

          Hi Cesar,

          You would need to provide separate service implementations for your Blazor WebAssembly app that make web API calls. But by coding your components to a service interface, your component logic wouldn’t need to change. I wouldn’t not recommend trying create some sort of dummy HTTP request abstraction for the server.

          So for your WeatherService example, you would create an IWeatherService interface and then provide two different implementations: one for the server that talks directly to the database , and the other for the client that makes web API calls.

• 

  Stephen Lautier October 17, 2019 11:18 am 0

  collapse this comment copy link to this comment

  Great post! Gave much more insight into what Blazor currently offers and where its going, thanks!

• 

  Giuseppe Falce October 21, 2019 8:54 am 0

  collapse this comment copy link to this comment

  Hi Daniel

  I have already quiet a big application (ASP.NET Core) in production, and I’m planning to integrate Blazor. Currently evaluating both WebAssembly and Server.

  Did I understood it correctly: A Razor Component, can only be integrated with an existing MVC View using Blazor Server (it’s not possible to do it with WebAssembly)?

  Would appreciate a short answer.

  Many thanks
  Giuseppe

  • 

    Daniel Roth October 21, 2019 11:21 am 0

    collapse this comment copy link to this comment

    Hi Giuseppe,

    You can integrate both Blazor Server and Blazor WebAssembly into an existing ASP.NET Core app. Integrating Blazor WebAssembly is like integrating some JS – it’s just a bunch of static files. However, please note that Blazor WebAssembly is still in preview and not ready for production use yet. If you’re trying to deploy into production now, then Blazor Server is what we would recommend.

    • 

      Giuseppe Falce October 22, 2019 1:47 am 0

      collapse this comment copy link to this comment

      Hi Daniel

      Thanks for your reply, much appreciated. I think my question was a bit unclear.

      Let’s assume I have a MVC App with a View “Home.cshtml” that is served by a Controller “HomeController”.
      In the view I can integrate a component like that

      @(await Html.RenderComponentAsync<MyAwesomeComponent>(RenderMode.[OneOfTheOptions]))


      In my understanding this scenario only works, if the MVC App is enabled for Blazor Server. ( Or is the RenderMode.Static also suitable for WebAssembly?)

      Many thanks
      Giuseppe

      • 

        Daniel Roth October 22, 2019 2:20 pm 0

        collapse this comment copy link to this comment

        RenderMode.Static is suitable for Blazor WebAssembly apps, but you will also need the wrapper <app> tag so that the content can be updated client-side. You can see an example of this setup here: https://github.com/danroth27/BlazorWebAssemblyWithPrerendering. Please note that since Blazor WebAssembly is still in preview, some of these details are likely to change before we ship.

        • 

          Giuseppe Falce October 22, 2019 10:00 pm 0

          collapse this comment copy link to this comment

          Hi Daniel

          Thanks again for your help. I managed to adapt your app (try and error). However not really fully understanding what i’m doing 🙂

          What I did:

          In Startup.cs of the client:

          app.AddComponent<Counter>("counter");
          app.AddComponent<Awesome>("awesome");
          

          Then I created 2 razor pages MyTest.cshtml and MyTest2.cshtml

              <awesome>
                  @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
                </awesome>
          
              <counter>
                  @(await Html.RenderComponentAsync<Counter>(RenderMode.Static))
              </counter>
          
              <script src="_framework/blazor.webassembly.js"></script>
          

              @* To make this work, you need to 
                  call
                      app.AddComponent<Awesome>("awesome"); 
                  before 
                      app.AddComponent<Counter>("counter");
                  in
                      BlazorWebAssemblyWithPrerendering.Client.Startup
          {
              *@
              <awesome>
                  @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
              </awesome>
          
          
              <script src="_framework/blazor.webassembly.js"></script>

          While MyTest.cshtml works fine, MyTest2.cshtml doesn’t. (Because of the AddComponent<> sequence in Startup.cs)

          Did I use it as intended or am I on the wrong path?

          The Forked and adapted code is here https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering

          Many thanks

• 

  Kemp Calalo October 23, 2019 1:04 am 0

  collapse this comment copy link to this comment

  Hi Daniel,

  We are currently trying to understand Blazor Server side and we struggle to do a use case that we think it suitable for Blazor Server. This might be a stupid question but I’ll ask it anyways.

  So in the basic template when creating a Blazor project, we have a WeatherForecastService that provides the data when it is called by the FetchData.razor component.

  @code {
  WeatherForecast[] forecasts;

  protected override async Task OnInitializedAsync()
  {
      forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
  }
  

  }

  Now, what we want to achieve is to update this “forecast” object not from the razor component, but from the “WeatherForecastService” or any other different layer. How can we do that? In essence, what we like to do is update the DOM once we have a new data in our database. We think that to do that, we need to update the “forceasts” object from a different layer, and then when Blazor detects that forecasts object has changed, then it updates the DOM on its own.

  Thanks!

  • 

    Larsson, Henrik October 25, 2019 1:10 am 0

    collapse this comment copy link to this comment

    You could handle that by polling or by registering to some event. Then, make sure you inject your

    Make your component register to an event (such as OnNewForecasts or similar). Then, update from service and call StateHasChanged() Of course, you could bake in the actual forecast in the eventargs itself. This is just an example:

    @code {
    
        protected override void OnInitialized() {
            ForecastService.NewForecasts += OnNewForecasts;
        }
    
        private void OnNewForecasts() {
    
            forecasts = ForecastService.Get();
            StateHasChanged();
        }
    }

• 

  Dave Bettin October 27, 2019 3:16 pm 0

  collapse this comment copy link to this comment

  Any plans for using Blazor to write Office add-ins? As opposed to using Javascript?

• 

  Dee Santiago October 30, 2019 1:08 pm 0

  collapse this comment copy link to this comment

  Hi Daniel,
  I’m really excited that we can develop web application using C# all the way to the client side. I’m currently working on a Blazor Server Side internal application using JQuery DataTables to list the data and then I use the Blazorise Modal to display the individual objects for editing purposes.
  I have everything working via the “Happy Path” and now I want to now handle scenarios when errors occurred.
  I’m currently experiencing 2 issues
  1) I want to create a .NET Standard 2.0 Class Library Project where I can do NUnit Testing and I can’t add a reference to the Blazor Server Project and get errors.
  Here’s the error message I see:

  Error Project ‘{project path}’ targets ‘netcoreapp3.0’. It cannot be referenced by a project that targets ‘.NETStandard,Version=v2.0’.

  I saw Steve Sanderson’s post on Blazor Unit Testing and downloaded his prototype but it’s no longer compiling and throws this error message:

  Severity Code Description Project File Line Suppression State
  Error MSB3073 The command “dotnet “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets../tools/Microsoft.AspNetCore.Blazor.Build.dll” resolve-dependencies “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\SampleApp.dll” –references “C:{path}\04\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolve-dependencies.txt” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/Facades/” –output “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolved.assemblies.txt”” exited with code 1. SampleApp C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets\Blazor.MonoRuntime.targets 533

  2) I want to display a user friendly error from within the Blazorise Modal. Currently when it’s successful I display an “update successful message” but now I want to show an friendly error message when it fails and I can’t. I followed the instructions here but I’m not able to get it to work. Here’s what my Update method looks like:

  @code {
  [CascadingParameter] ModalParameters Parameters { get; set; }
  bool ShowForm { get; set; } = true;
  bool Success { get; set; } = true;

  protected bool IsUpdating { get; set; }

  [Parameter]
  public WeatherForecast forecast { get; set; }

  protected override void OnInitialized()
  {
  forecast = Parameters.Get<WeatherForecast>("forecast");
  }

  protected override void OnAfterRender(bool firstRender)
  {
  if(Success)
  {
  ShowForm = false;
  }
  }

  private async Task SubmitData()
  {
  try
  {
  IsUpdating = true;
  StateHasChanged();
  throw new Exception("This is a test exception");
  //here id put a call to an endpoint to submit data...
  ShowForm = false;
  Success = true;
  IsUpdating = false;
  StateHasChanged();
  }
  catch(Exception ex)
  {
  ShowForm = true;
  Success = false;
  IsUpdating = false;
  StateHasChanged();
  }
  }

  Is there something I’m doing wrong? Any insight to these issues would be greatly appreciated.