Thursday, April 30, 2020

quick thoughts on Vue.js

A few of the jobs I'm applying to are either Vue.js-centric, or a mix with some Vue and some React.

I ran through Vue Mastery Intro to Vue.js course. It's interesting how this series of courses seem so officially endorsed - and they are pretty great! Like Wes Bos React course, they have a nice  player to go through a series of videos starting with a basic core and adding complexity- but with this course, each lesson has a codepen set up and ready to go, with the lesson's code already entered and a challenge still left to do.

It seems like that "just run it!" setup is easier to do in Vue - it's impressive that you can just include one script tag and all the basics work. (Vue also has a pretty extensive build system, while React seems a bit more roll your own webpack or what not - or use the giant beast create-react-app.)

In some ways, React felt like a maturation of the best parts of jQuery, and similarly Vue feels like a bit like AngularJS. Specifically, React + JSX let you plunk bits of DOM in your JS without guilt, and so lets you use regular Javascript control structures. Vue and AngularJS take the approach of integrating conditionals and iteration into the tags. Instinctively I prefer how JSX feels more like "plain old HTML", but I could get use to Vue's approach. I still find stuff like

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>

a little odd - the way the "for" is sort of a child attribute of what is properly "inside" the loop. (But it seems like Vue avoids forcing the developer to have all that weird mandatory infrastructure javascript to make the tag logic magic happen that AngularJS demanded)

I also love how Vue wraps a component - it's a bit opinionated, but you build a map-like object with data:, method:, template: etc keys -- they may well have found a sweet spot of opinionated but not TOO opinionated. I think the approach is quite favorable to React's file-component conflation.

Similarly, "emit" for having a child communicate back to the parent seems pretty keen. It's a basic idea that scales up well, to the eventBus model, or more advanced things using Vuex - a smoother ramp up then React's "either deal with children/parent state via props or use Redux"

Still, I'm not quite sure if Vue is quite as... I dunno, industrial strength as React - that might be because I've only seen tutorials for it, not real code. And admittedly the list of top sites built with React seems a bit more impressive than the top sites made with Vue.js. But both seem to get plenty of love in the 2019 "State of JS"...

No comments:

Post a Comment