Why React with JSX and Not Vue with Vue Templates

With the popularity of front end view layers on the rise, it’s only natural to compare the heavy hitters in that space. Two of the most popular ones are React and Vue. While JSX and Vue templates set out to accomplish essentially the same objective (rendering markup from JS), the two differ pretty drastically¬†in how they are written. Enough in fact, to be a large factor in deciding to use React or Vue for your front end view layer. I tend more towards the way React does, and here’s why.
JSX

With React, you write your components in JSX. With JSX, you get a style that is very different than many templating engines because it’s not really a templating engine. JSX is just some sugar for calling functions that create elements. That’s it. It serves as more of a superset of JavaScript. JSX does not strictly live and operate inside of its own environment like many templating engines. Instead, it lives with the rest of your code. This is what makes JSX ridiculously flexible.

Take a look at the following React component. While it is extremely simple, it highlights just how flexible JSX can be. For example, notice how well the JSX integrates into the plain JS. You have markup being returned from regular functions, passed around in variables, looped through in a map, etc.

While the above example is somewhat trivial because of the fact that there was not much of a need to split out a simple component so much, this ability to put the rendering process together however you like really shines when components get more and more complicated/logic intensive. It takes componentization to the next level by allowing you to split out your components into small, maintainable, digestible pieces.

Vue Templates

With Vue, your get Vue templates. With these, things are quite a bit different than JSX. Vue templates are far more markup centric opposed to JSX. Like how JSX feels like a superset of JavaScript, Vue templates feel like a superset of HTML. As such, the way control structures are handled sparks a stark contrast to the way they are handled in JSX. For example, Vue has many directives such as ‘v-if’, ‘v-else-if,’ and ‘v-for’ that you can use directly on the elements of your template to handle control flow in your components. Also, unlike JSX where you mix and match JS and the template, things are much more segregated in Vue templates. Your methods, state variables, and props live outside of the template content and are accessible through a scope abstraction. This enforces somewhat of a separation of concerns. Take the following component.

This is the Vue equivalent of the React component above. Note how everything related to rendering strictly happens in one place, the template string. With the React example, you had a function that rendered a heading, one that rendered some list items, and the main render function brought them in as needed. Here, with the Vue component, nothing is split out. While it is nice to have a designated area (template string) to do all of the rendering, we lose quite a bit of flexibility by not being able to internally split out the component. However, it could be said that if a particular piece of a component gets too complex, just split out that part into its own component, then use it in the original component. While that is certainly a good argument, I think there are cases where it does not make sense. It is common for me to have a piece of a component that is very complex, but is intimately tied to its parent component; meaning that it will not be used outside of that parent component. For me, the main appeal of components is reusability. If you’re not going to reuse that piece outside of its parent component, I don’t see too much of a need to make it a separate component. That’s just me though.

To conclude, I’d like to say that I think both JSX and Vue templates do their respective jobs very well. However, by now, it’s no secret that I prefer writing JSX. To reiterate, I tend to lean on the side of JSX for the fact that it is just so flexible. When I’m writing logic intensive front end applications, I want the markup to be a tool for the JS, not the other way around. I feel that while Vue templates work very well, I think making the logic and control structures secondary to the markup is the wrong approach.


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *