0

Thankfully, we can easily call JavaScript functions from our Blazor server's C# code, see this MSDN page. The JavaScript code will be running on the client's browser and the C# code on the server, and Blazor's SignalR connection lies between these two.

But I'm asking for clarification on whether the SignalR connection is the one responsible for transmitting the function's input/output values back and forth between these two. The only hint that I could find is from a blog by Chris Sainty:

You'll have noticed that both methods are async. This is important because if you want your code to work in both client-side and server-side Blazor then all JS interop calls must be asynchronous due to the SignalR connection used by server-side Blazor.

Unfortunately, I couldn't find the exact information on how the values are transmitted on the MSDN page.

How the data is transmitted can be important in cases when there are data fetched via the JavaScript runtime (e.g. using Firebase Firestore JavaScript library). If the fetched data needs to be sent back to the Blazor server for it to push the required changes to the DOM, won't there be an extra round-trip?

Amir Mahdi Nassiri
  • 1,190
  • 13
  • 21

1 Answers1

0

Blazor is not going to know about the changes to the DOM that JavaScript makes. Therefore, it is not a good idea to allow JavaScript to make changes to the DOM. The clean approach is, instead of change DOM via JS, invoking Blazor via JSInterop. And the best approach is not to use JS.

dani herrera
  • 48,760
  • 8
  • 117
  • 177
  • True, I'm thinking of JSInterop as well. But the problem is that some libraries (e.g. Firebase Firestore as mentioned in the question) are only published as a client-side JS package. So what would happen is you fetch the data via JS, push it to the server via the SignalR connection, the server figures out the required changes to the DOM, and pushes them back to the client. Doesn't it look like a redundant round-trip?! In the sense that the data was already on the client-side, but it needs to go to the server and back. – Amir Mahdi Nassiri Jul 13 '21 at 15:51
  • 1
    Take a look to [blazor-dom-confetti](https://github.com/ctrl-alt-d/blazor-dom-confetti) Is a JS integration and creates hundreds of DOM elements, but blazor is not competint for this elements. The problem is when blazor and JS are modifying the same DOM portion. It's like a concurrency problem. – dani herrera Jul 13 '21 at 16:14
  • Such a cool Blazor component! So those elements are only created via JS and Blazor is not aware of them? – Amir Mahdi Nassiri Jul 13 '21 at 16:33
  • Exactly, each confetti is an html element and Blazor is not aware about them because JS and Blazor and working on different subtrees os DOM. – dani herrera Jul 13 '21 at 17:55