Michael Bradvica joined Saxony Partners in 2020 as a Software Engineer on our app dev team. Previously, he has worked as a Full-Stack .NET Developer for technology services firms. You can read more of his thought leadership at MichaelBradvica.com – from which the blog post below has been adapted.

Blazor and JavaScript Aren’t Meant to Mix

When using Blazor, the most important thing to remember is that it was designed as an enclosed system. It was not intended to play nicely with existing web technologies, most notably, JavaScript. This paradigm is already present in existing component libraries such as React. You are not supposed to manipulate the DOM directly in React through older libraries such as jQuery. React itself is an abstraction over the DOM.

Interop for Blazor exists because the web has only known JavaScript for the past 25+ years. It parallels how Microsoft supported both 32- and 64-bit versions of their operating systems before discontinuing support for 32-bit. JavaScript is a 32-bit language that now swims in a 64-bit ocean. The main intent of Blazor is to move the developer, team, and technology stack away from JavaScript.

When compared to a language such as C#, JavaScript:

– Has fewer features

– Is not static

– Is not type safe

– Has no built-in IntelliSense support

Using JavaSCript interop in Blazor is messy at best. Importing scripts and methods requires you to use hard-coded string values. Hard-coded values are historically susceptible to annoying misspellings and frustrating debugging sessions. Interop code must be carefully implemented as it exists outside of what Blazor tracks in the DOM. Mutating an object via both JS and Blazor is a sour recipe for undefined behavior. Lastly, interop introduces a new level of complexity which accelerates the rate of entropy in our application, exacerbating the possibility of bugs.

When JavaScript Interop Must Be Used

Ultimately, the most likely scenario for having to use the JavaSript interop feature is when a third-party library (such as Google Maps) doesn’t offer native Blazor support.

When faced with the possibility of having to use JavaScript interop:

1.Double check to see if a Blazor library does not already exist for your use case.

2. If a library does not exist, look to see if you can re-create the behavior natively in Blazor.

3. If neither is possible, keep to the best practices for JavaScript interop, most notably by ensuring that any object is manipulated only by JS or Blazor (but not both).

4. Keep vigilant for third party developers releasing native Blazor components.

Blazor is an ecosystem. While JavaScript interop is doable, it is highly recommended that you stay away from it if possible. Use of JavaScript interop is a last resort that should be approached with care and caution by your development team.

Making Digital Practical with Saxony Partners

Technology and digital strategy can be complicated, but our goal at Saxony Partners is simple: Make Digital Practical.

Saxony Partners will meet you where you are and help you get where you want to go. Our pragmatic approach helps ensure early success by leveraging proven technologies and practical solutions in a cost-effective way.

Our team of app dev experts, full-stack developers, and software engineers work with clients to optimize their technology investments and leverage that technology to meet and solve business needs and challenges.

If you or your company is looking for help with software development, reach out to us here.