Framework Migration Recommendation for Office Add-ins

Question

Hi Team,

I currently have Excel, Word, and PowerPoint add-ins built using pure JavaScript and a .NET Core API for the backend. I’m looking to migrate my add-ins to a framework, and after reading various articles, I’m confused about whether to use React or Blazor.

Could you please advise on which framework would be better for my situation? I've seen some articles suggesting that using Blazor would still require reliance on JavaScript for Office.js integration.

Given that my add-in is large and complex, with collaborative features for multiple users, I am particularly focused on scalability, fast development, and reduced code complexity.

Also suggest is that any other framework which is better than this two.

Thank you!

Answer 1

Blazor uses a js tree render engine similar to react. the js code uses a message system to communicate with the Blazor code. if the Blazor code is hosted as a WASM the messages use the browser message system, if server hosted, signal/r is used to pass messages. the Blazor code sends tree render datagrams, and the js client code sends dom events to the Blazor app. Blazor has support to call js via the jsinterop library.

for a Blazor addin to access the office api, it will use jsinterop to call the office javascript functions. currently jsinterop does not support calling async js functions (you can call one, but not access the promise result). you will wrap the async function calls with js that calls a static method in Blazor on completion. Basically for every Blazor page, you will write an office api in js callable from blazor. review the samples:

https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/blazor-add-in

If you want to use Fluent UI for your your Blazor addin, see the FluentUI-Blazor project:

https://github.com/microsoft/fluentui-blazor

React is the framework used by the office team, and will have good support. The FluentUI react version will have the most components.

https://react.fluentui.dev/?path=/docs/concepts-introduction--docs

if you use another javascript framework, you only have the FluentUI web components:

https://fluent2.microsoft.design/components/web/react