Hacker News Reader

Comment by andrewray | Hacker News Reader

I've always heard good things about Vue from its users. I have to compare all Javascript frameworks to React, because to me React feels like the first framework that got it "right." The API of React is surprisingly thin. Looking at Vue templates, the syntax seems quite alien, halfway between Django and Angular:

    <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">

And the API seems to needlessly separate HTML and Javascript, with some strange (to a newcomer) API calls:

    Vue.component('demo-grid', {     // moving away from JS classes
        template: '#grid-template',  // Why separate view code from view code?
        replace: true,               // what is this?

Has anyone heavily used React and Vue and have an argument for what this thicker API affords?

View on HN

I've written large apps in both; interestingly, I've built the same app twice as well: once in Vue.js and once in React. I'm also in the process of building another very large front-end in Vue.js at the moment.

The big thing is that while I personally adore React, it does require ceremony to get stock-standard behaviour. We recently onboarded a new developer (a friend of mine), and teaching him React + Flux (Alt.js) was infinitely more difficult than teaching him Vue.js -- the "thicker" API (which is still an order of magnitude thinner than Angular or Ember) means you don't need to either reach out to other libraries to achieve tasks that you otherwise would need to in React.

Now, that's not a bad thing on React's side; it's a view-layer, not much more. That's okay, and a good thing! For building components rapidly in a regular "client -> designer -> cut-up -> development" workflow, Vue.js is streets ahead of React in terms of code required. But for building very large applications, React's smaller API means that you can guarantee behaviour, and things are consistent.

Basically, they are both brilliant libraries. I highly recommend both. React and Vue.js are similar in a lot of ways: they're both tiny little view layers that are component focused and have modern, ecosystem aware build tooling. They differ in that Vue.js is "classical" (though not really, it's far nicer than the older systems) MVVM which has been proven time and time again to be a good architectural choice, whereas React.js takes a more functional (as in programming) approach to the problem -- though I'd argue not far enough down the functional side, which is why I've been enjoying Cycle.js so much!

unless you get bitten by event pooling...

"and teaching him React + Flux (Alt.js) "

Can I ask what do you use for routing and if you have good results with that mix?

Interestingly, we're using our "own" router that I wrote in a fit of frustration; it's tiny, not particularly well documented and has the interesting design choice of handing the route matching on to the user of the library; give each <Route /> component a name and have your route matcher callback return that name and you're good to go.

The reason why I went down that route (pun intended) was that we built a rather large, isomorphic/universal web application that for SEO reasons had to act like a website vs a web app most of the time; until it started up the client side JS anyway. "react-router-component" was so close to what we wanted, but because it used React's somewhat undocumented "context" feature, it didn't play nicely with our Flux implementation at the time (Flummox).

For that reason, my tiny router came into being, and for some reason it keeps sticking around despite my best efforts...

https://github.com/studionone/react-isorouter

Ps. I just found out that the README links to non-existent documentation, I really should fix that...

Thanks.

I'm trying to find my way around flux but until now has been a little frustrating experience.

I wish something like Elm was mature enough.

> I wish something like Elm was mature enough.

So do I :)

If you're not 100% up on Flux, I recommend having a play with Hoverboard[0] -- it's a tiny implementation of the Flux architecture, with some interesting choices itself. It's a single function, too, which is pretty neat!

I've been using it to implement the "Flux Challenge" in combination with domChanger[1] instead of React: https://github.com/girvo/domchanger-hoverboard-flux-challeng...

And here's a partial TodoMVC implementation I wrote in Hoverboard and domChanger: https://github.com/studionone/todomvc-domchanger-hoverboard

---

[0] https://github.com/jesseskinner/hoverboard

[1] https://github.com/creationix/domchanger

Apologies for the formatting, I forgot about the rather greedy behaviour of italics on HN!

The `@click` and `:class` are in fact shorthands for `v-on:click` and `v-bind:class`. All directives start with `v-` by default. Shorthands are provided because these are two most often used directives.

Re moving away from JS classes: ES2015 class is inadequate due to the lack of static property initializers, and I don't want to force users to use stage 0 transforms. A Vue component definition is essentially an object of options, which is in fact easier than having to extend a base class. Also see https://medium.com/@dan_abramov/how-to-use-classes-and-sleep...

For the template, that's just because it's a one-pager demo and I don't want to use an inline string template. The proper experience is using single file Vue components: http://vuejs.org/guide/application.html#Single_File_Componen...

`replace: true` is a legacy option I forgot to remove in the demo :P

If I read the documentation correctly, you can also pass it a string to be used as template. If the string starts with a '#' it will act as a querySelector.

http://vuejs.org/api/#template

I love this feature. Putting html fragments in string literals in javascript seems pretty awkward to me.

What you are referring to is just syntactic sugar. @click is the same as v-on:click and :class is the same as v-bind:class. So you can write this line "less alien" like this:

  <th v-for="key in columns" v-on:click="sortBy(key)" v-bind:class="{active: sortKey == key}">

> I have to compare all Javascript frameworks to React, because to me React feels like the first framework that got it "right."

Have you looked at riot.js?

[r] http://riotjs.com/

Reply on news.ycombinator.com