Research adopting JSX

[jasonLaster]

We would like to layout the case for adding JSX to the debugger and other react tools in DevTools.

Lets use this issue to discuss the trade/offs, style preferences, and adoption plans.

Here's a great PR where @Garbee showed the benefits of refactoring the breakpoints component

[clarkbw]

I'll add that I want this change. We already have a webpack build step so the possible negative has already been taken on. JSX makes the components easier to read and AFAIK was designed so that designers could more easily adapt components without needing to code.

[wldcordeiro]

@clarkbw echoing your argument for JSX I think the biggest thing is familiarity for new contributors. Most React projects seem to use JSX so adopting it would make the barrier for entry a little lower. Also it seems like people are more conscious of the HTML element types they use when they're using JSX over the dom helpers and we end up with a lot more semantic HTML.

[jbhoosreddy]

I can only talk from personal experience as I don't know too much about the lay of the land. But our way of using React was definitely tricky to pin point because there was little documentation. It might have taken me an even longer time to get things done without my mentors.

Since the official React docs follows JSX and ES6/ES7 JS, following that coding standard should make it much more easy for people to contribute to the project, as they will be familiar with it.

That being said, from recent experience I noticed many other companies face similar issues where their deployment could not have babel or a build step for various reasons. And there, they appreciated being able to utilize the features of React without that problem. This may be one of the few projects on the web where beginners can learn something like that.

That also being said, I'm in favor of JSX also.

[bomsy]

One plus from my little experience with JSX, in its own way helps get a quick picture of what the dom structure might look like for some one new to it
Might be kinda easier for someone familiar to basic markup

dom.div( null,
  dom.img( { src: "avatar.png", className: "profile" }),
  dom.h3( null, [user.firstName, user.lastName].join(" "))
);

vs

<div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>

[wldcordeiro]

@bomsy agreed with that, it definitely makes for a more familiar experience for designers and new contributors. I support the idea of transitioning to JSX. A tracking issue that has adding the babel transform, and then a list of components would be a nice start and encourage contributions.

[Garbee]

FTR the primary things I found converting to keep in mind is this problem...

When we make functions to return a subset of markup, it still needs to be named with JSX. This is done by just modifying the object property once the function is initialized.

The only part of the tools we use that has an issue is Eslint when calling things as elements. Let's say we const CommandBar = require('./CommandBar'); then only ever do <CommandBar /> to render it, eslint is throwing an error since CommandBar is unused, even though it actually is. I've seen some old issues pointing to where this problem should have been fixed in eslint like a year ago. So not sure exactly why it is happening in this context. Didn't dig into it too deeply because my PR for breakpoints was just a mockup to start discussing things against.

[MikeRatcliffe]

The only part of the tools we use that has an issue is Eslint when calling things as elements. Let's say we const CommandBar = require('./CommandBar'); then only ever do to render it, eslint is throwing an error since CommandBar is unused, even though it actually is.

When we start using JSX we should set "react/jsx-uses-vars": 0 in eslintrc.js.

I have spoken with a bunch of React devs that would contribute if we used JSX... we should just do it.

[Garbee]

FYI a thread has been started on the group mailing list about the JSX conversion since it affects the whole DevTools project and not just the debugger for consistency.

[clarkbw]

I've opened a PR in the new RFCs project for JSX firefox-devtools/rfcs#5

[nt1m]

I'm against because:

• it introduces an extra build step
• It doesn't give a real readability advantage over createFactory() (proof is that a lot of people on the mailing list didn't have a strong preference)
• tool support for JSX isn't great
• requires rewriting a lot of the existing code

If I recall correctly, @jlongster was against as well.

[jasonLaster]

@nt1m could you repost these comments in firefox-devtools/rfcs#5 so we can discuss it there

[clarkbw]

Maybe we close this for now, I think we have the collective opinion of the team here. The debugger can try JSX if it wants and should participate in the rfc discussion.