React Adoption in PCF development

[liun]

Greetings all - 

It looks Microsoft is heavily recommending React as a underline framework/library for PCF development, and most of the samples were based on React (either standard or the incoming virtual controls). 

Given most of our developers coming from a backend-focused background (plugins, web apis etc), requiring them to be React proficient (easy to start, hard to master) is somewhat a concern, especially for places can not afford separation of front-end developers and backend developers. 

If your organization has done quite a bit of work with React PCFs, do you mind share some experience here? How the adoption look like, the training involved, any struggles?

I just started looking for alternatives leverage Fluent UI without React, where developers can use standard web development skills to build Fluent UI PCFs. So far had some success in Fluent UI Web Component realm, and will share in a separate thread. 

Thank you all!

[a33ik]

Hello,

I can't say for all the developers but I can share my experience so please keep it in mind - it's just my opinion.

I'm afraid I have to disagree that React is easy to start and hard to master. My personal experience was completely opposite - it was hard to start and much easier to progress after the basics were mastered and I also had no experience doing any React development before I started building PCF control - I built plugins and clientside JS.

I would highly recommend your developers to master React - it will not only enable your developers to build Reach-UI PCF control for Dataverse but also unleash the possibility of building HTML WebResources.

[DianaBirkelbach]

Hi @liun , 

I totally agree with @a33ik: the learning curve for React is pretty high, but once learned, you don't want to miss it anymore. The most important part is to understand how React flow works.

PCF doesn't really require React. You can do it with Vanilla JS (TS actually).

But if you need a little more than just a label or a button, you have a huge effort to implement and maintain, if you don't use any Framework. You could choose Angular or something else... (not sure if the other frameworks are easier to learn)

There are a few reasons why React might be the best choice (my opinion):

- Power Apps is build with React

 - you can build Virtual PCF, which means that you use the React and FluentUI Framework directly from Power Apps Runtime. That makes your components lightweight (because you don't need to include React/FluentUI inside the component). That also means that your component is rendered during the render process from Power Apps, so you have a much better performance.

- there are a ton of React components out there, which can easily be used

[liun]

@DianaBirkelbach @a33ik Thank you for the thoughtful responses. Will definitely review that options within our organization to see that's a viable path. 

The main alternative I am currently looking at is fluent web components. It is a W3C standard and the programming model is standard DOM plus Typescript on strongly typed objects, so the learning curve is substantially lower and developers can be productive immediately with just modern Javascript (NS6) development skills. 

On a related note, Microsoft's Blazor team choose web components over react to build the Fluent UI wrapper, despite the remarkable resemblance between React and Blazor themselves from architectural perspective.  We are replacing our MVC apps with Blazor so that's something impacting our thought process too. 

Both Fluent UI's React and Web components are involving rapidly so breaking changes (e.g the PCF sample's ChoiceGroup with images not in v9)  is also something we have to look. At the moment React seems ahead of Web Components in terms of features been offered (e.g. Multiple select in Combobox), but I'd expect WC will catch up. 

Other thoughts and experience sharing are welcome

[cchannon]

I have had no problems upskilling myself and many team members with React. The actual recommendation here is not just React but React Typescript which is a dream come true for most OOP developers. Instead of the free-wheeling, untyped chaos that is Javascript, we've got proper classes and type safety and all the goodies that go along with it.

Actually implementing a React control does take some getting used to, yeah, but not a ton. There's a few key concepts to learn like State vs. Props and Class Components vs. Functional Components, etc. but then that's it. The actual "react-y" part of a PCF is usually only a hundred lines or so and the rest is Typescript that will feel really comfortable to a C# dev.

There are a lot of independent consultants (myself included) who do training sessions for dev teams looking to upskill on things like this. Set up something like that: a 3-day or 5-day crash course for your team to get introduced to the capability, see some interesting ways of working with it, and then roll up their sleeves and start writing. I bet your team would be at a full run after just that much.