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.
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.
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.