DEV Community

Discussion on: Why would people hate React (or JSX), but not Vue SFC, or even Angular?

View post
Collapse
 
vonheikemen profile image
Heiker •

Old man yelling at cloud here. I know that JSX can be use for good and has many good things but I'm here to talk about the things that bug me.

Using JSX to render html elements is all good. My problem is when people go beyond that, when they start doing one clever thing after another in the middle of that html.

Stuff like this.

<div className="tag-list">
  {
    (this.props.tagList || []).map(tag => {
      return (
        <span className="tag-default tag-pill" key={tag}>
          <i  className="ion-close-round"
              onClick={this.removeTagHandler(tag)}>
          </i>
          {tag}
        </span>
      );
    })
  }
</div>
Enter fullscreen mode Exit fullscreen mode

Using .map to render a list? That's clever. Using parenthesis and an operator to make sure .map gets executed? I get it, you want to prevent a bug, but why do it there? They could have handle that in another part of the code but they didn't because nothing could stop them from putting that piece of logic there. And that piece of just HTML-in-js is going to get worse if they need to do more clever things in that taglist.

And then we have "renderless components", I do hate those things. It breaks the mental model of using tags to describe the user interface.

<Provider>
 <div className="editor-page">
    <div className="container page">
      /// stuff
    </div>
  </div>
</Provider>
Enter fullscreen mode Exit fullscreen mode

That "Provider" thing, if I can't put a margin, padding or color I don't want it as a tag. And of course this "renderless components" are so flexible that we can do this.

That freaks me out.

Collapse
 
seanmclem profile image
Seanmclem •

Seems like anyone can do whatever they want - is not a bad problem to have

Collapse
 
vonheikemen profile image
Heiker •

Tell me you're not defending the XML Sort function.

Thread Thread
 
mburszley profile image
Maximilian Burszley •

People seem to jump at the chance to defend the indefensible on the Internet.

Thread Thread
 
seanmclem profile image
Seanmclem •

There would be no good choices without bad ones

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • • Edited

Vue's Nuxt also have <client-only> (i.e. <no-ssr>).

Good thing, maybe; is that Vue / Nuxt prefers DSL in <template> tag.

Collapse
 
vonheikemen profile image
Heiker •

I'm not familiar with Nuxt. I imagine that <client-only> is also a renderless component. Still not a fan of that type of component.

What I like about Vue SFC is that is familiar. The template, script and style tag is a good mirror to the traditional html structure.

Collapse
 
dinsmoredesign profile image
Derek D •

Agreed on the renderless component thing. I get it and it's purpose, you can do them in Vue, too. In some cases, I don't mind it, but when you're using a component to define the behavior of your router, I just don't understand why in the world you would want to. Defining route logic in your render function just seems illogical to me. What's wrong with doing it like Express/Vue and pretty much every single other framework in the existence of the web? 😵

Collapse
 
austindd profile image
Austin • • Edited

I personally love the declarative nature of handling routing inside the component.

The DOM forms a tree structure, and so does the function call graph of your application. Routing (as a general concept) represents a "forking" mechanism in the middle of that DOM tree structure somewhere. There is a "choice" to branch off in different directions. Since (in React) we are already representing our virtual DOM as a return value of the function call graph, why would we not handle routing in the exact same way, since routing is almost precisely the same idea as a function with a switch statement?

If that doesn't make perfect sense, then I'm at a loss for words...

Collapse
 
aleuck profile image
Ágata Leuck (she/her) •

I don't understand this attitude of "I hate framework X because people are able to do things I consider bad practices."
Every language/framework allows many kinds of bad practices, it doesn't mean you should use them.

Collapse
 
vonheikemen profile image
Heiker •

I don't understand this attitude of "I hate framework X because people are able to do things I consider bad practices."

Did I give that impression? I wasn't trying to say that I hate React, I actually like it. I tried to be very specific on the parts that I don't like.

Every language/framework allows many kinds of bad practices, it doesn't mean you should use them.

While you can always choose the patterns you use, you can't always choose the tools used in a codebase.