Dave Rupert digs into some of his favorite Vue features and one particular issue that he has with React:
I’ve come to realize one thing I don’t particularly like about React is jumping into a file, reading the top for the state, jumping to the bottom to find the render function, then following the method calls up to a series other sub-rendering functions only to find the component I’m looking for is in another castle. That cognitive load is taxing for me.
I wrote about this very problem recently in our newsletter where I argued that finding my way around a React component is difficult. I feel like I have to spend more energy than necessary figuring out how a component works because React encourages me to write code in a certain way.
On the other hand, Dave, says that Vue matches his mental model when authoring components:
<template>
// Start with a foundation of good HTML markup
</template>
<script>
// Add interaction with JavaScript
</script>
<style>
// Add styling as necessary.
</style>And this certainly matches the way I think about things, too.
I totally agree. React tends to over complicate things and there’s a steeper learning curve. I’ve always enjoyed the simplicity of Vue.
This is an oversimplification and half-baked, but the conventional code order is part of why Vue feels more design-friendly to me. React’s code-first order makes sense if you think the essence of a component is state and behavior, and the markup is just a way to get that out into the world; it’s an engineer’s way of building the web. Vue makes sense if you think the component is a slab of semantic markup, and then there’s state and behavior attached.
Writing this out makes me want to try putting the style section second.