Currently, I'm assessing viability of Blazor for our projects and I want to better understand JavaScript's role in a Blazor project.
Microsoft documentation states the following:
Only mutate the Document Object Model (DOM) with JavaScript (JS) when the object doesn't interact with Blazor.
If I understand this correctly, JS should only be used in Blazor projects as an absolute last resort.
We often use nicely and professionally designed templates that come with a ton of nice features that are all built with JS. Some examples include date picker, carousel, toast notifications, etc. This approach not only saves us a ton of time but also most of these templates come with everything we need, eliminating the need to piece-meal components that may or may not match in design or behavior which is a very important UX factor for us.
If I understand Microsoft's statement correctly, we should no longer use these templates and try to find Blazor equivalents of such features. Is this a correct assumption on my part? If so, this would be a major disadvantage for us to use Blazor.
P.S. Not sure if it matters but our choice would be the Web Assembly option with Blazor.
CodePudding user response：
Is this a correct assumption on my part?
No, it is a wrong assumption on your part...
You may use many of the templates in your possession, but you should know how to do that.
The main thing to understand is that if an element's state has been mutated by JS code, Blazor may ignore it; that is from the vantage point of Blazor nothing has changed. Let me try to give you an example that may clarify what I mean:
Suppose you have a page with a form to gether the name and age of a user... For this, I'll use a form element within which I embed two input type text elements. Both text elements are bound to, say properties defined in a class named User. Ordinaraly, we apply two-way data binding; that is the flow of data is from a variable to the element and from the element to the variable:
Public string Name {get; set;}
Now suppose you run your Blazor form page, you type "Steve Sanderson" in the Name textbox, and then navigate to the Age textbox and enter a value. Now before you click on the submit button to submit the form data, you click on another button that executes JS code that perfom a search for an element with id="name", and when found assignes the value "Blazor" to its value property. Now you can see the Name textbox with the value "Blazor" instead of "Steve Sanderson". You can now click on the "submit" button. Usually you would expect the Name property to contain the value "Blazor" as that was the last value (set by JS). But Blazor ignore your entics, and the Name property actually contains the value "Steve Sanderson". This is because Blazor handle the binding, it creates a virtual Dom, it a has a complicated process of rendering, etc. In short, it ignores the mutation made to the elements' state from JS. Or in other words, the changes made by the JS code do not participate in the binding process made by Blazor.
When I started learning Blazor, I created a carousel, 100% Blazor. I did it in order to learn Blazor. I inspected the code of the Bootstrap carousel, and imitated the way it works and looks. Very often you can take a widget created by JS, and implement it in Blazor. The market, however, is full with implementatios in Blazor.
Except for education purposes, I'll never implement a widget created in JS, when I can use it as is. Why create a carousel with Blazor just for the display of images, a widget that has no interaction with Blazor. In that case, it would be wiser and more appropriate to use it as a JS widget. Blazor doesn't care. But if you need a sophisticated carousel that trigger events, sent data, etc., you may need to implement it with Blazor, but more often to use JS Interop with your JS widget, as related below...
Here's a link to a sample that explain how to embed a Leaflet map on a Blazor SPA, using JSInterop. This is how usually you should work.