Power Platform Community Forum Thread Details

Architecture of React PCFs for 2023-2024: Class components, MobX v5 decorators, Durow's pcf-react?

What have you been using in your new PCF components? I've been using these and wondering what everyone else has been using. Are there any good sample components that use newer stacks?

react: 16.8.6, class components

pcf-react: 1.0.13

fluentui/react: 8.29.0

typescript: 4.8.4

mobx: 15.15.4 with decorators

mobx-react: 6.2.2

microsoft/eslint-plugin-power-apps: 0.2.6

types/powerapps-component-framework: 1.3.4

Has anyone been using Microsoft's new React Controls in production?

Categories:

Power Apps component framework

That's a lot of questions all rolled into one there...

Let's start with the "Microsoft's React Controls" question. This capability has been around for a while now, and until this post I didn't realized they'd changed its name (used to be called "virtual components"). But yes, lots of developers use this and it is a big help. For the most part, its impact on your code is minimal but its impact on maintainability and performance is huge. There are some exceptions there, of course, in that the structure fundamentally alters to returning a React component instead of adding one to the DOM which should be a non-issue most of the time, but occasionally (especially if you're trying to create a very dynamic UX that alters significantly over time during user interaction) you might prefer the direct DOM access that normal components allow.

Now to those individually listed components. I don't know about mobx but I'll address the others...

Class Components: Absolutely not. You want to move to Functional Components anywhere you can. Functional Components are not only the officially stated 'future' of React, they are also simpler to use and include hooks functionality you'd have to tie yourself into knots to achieve with class components. Just google "should I use class components?" to see 100 other people telling you the same thing.
FluentUI: Absolutely yes. The UI matches the OOB aesthetic, Fluent is very easy to use, and latest Fluent (v2) is enormously more flexibly than its predecessors.
Typescript: Absolutely yes. I guess you could try to write complex SPAs with just JS and without type safety... but why would you do that to yourself?
eslint-plugin-power-app: I can take it or leave it. I guess it helps with some common errors, but it also is a nuisance sometimes and I often find myself overwriting various errors to Warn...
types/powerapps-component-framework: I am not sure what you're asking here. This is fundamental stuff. I guess it could be optional if you want to do JS only, but again, why would you want to do that?
pcf-react: I haven't played with this yet myself, but it is from the legendary @ScottDurow so it will be highly capable, and extremely focused on solving a small number of developer needs. When I read the GitHub readme, it looks like that focus is mostly on developer annoyances in PCFs, with the biggest value add being in simplifying the dichotomies between Canvas and MDA. I'll leave him to comment if he feels like I've mischaracterized that one.

Quick Links

Leaderboard > Power Apps - Power Apps Pro Dev & ISV