Live data from Hacker News

Why we chose Vue.js over React

pixeljets.com

161–170 of 267 posts

Re: Why we chose Vue.js over React

#161

Earlier quoted context omitted.

i don't see how sprinkling if-statements in your html is cleaner than "magical attributes" but thats just me :)

if statement is one of the most basic concepts of programming and is opposite to magic

True, but some would argue that its use is a mark of lacking taste - https://medium.com/@bartobri/applying-the-linus-tarvolds-goo...

Re: Why we chose Vue.js over React

#162

I'm a designer and not a coder, so I feel obliged to provide my comments with salt added up front. That being said, JSX vs. wrapping HTML in if-statements seems like the same kind of trouble to me. I've done a few simple prototypes in Clojure/Script, so my reasoning is heavily influenced by the fact that I know very little about other languages, and only have moderate amount of knowledge about Clojure. The solution I…

Can you tell me what clojure libraries/frameworks work the way you describe? I'm learning clojure and would like to build some toy web apps because I've never done webdev before.

All you need is re-frame. It is well documented and the philosophy is explained as well.

Re: Why we chose Vue.js over React

#163
post #65

The arguments against JSX and React requiring many small components are very surface level and sound like "we couldn't figure out how to make it work for us so it must be impossible". 1. This was mentioned already, but, yes, you can use ternaries and boolean logic for simple conditionals (loggedIn && Logout || Login ) 2. When you need more markup, put them in an if-else statement in the same render function. render()…

Not sure I understand your 3rd pattern, what does const {LoginForm} = this; do?

It destructures this, to get the LoginForm property, it could be written because even if it starts with a lower case character that are transformed as string when there is a dot it is transformed as object :

compiles to React.createElement('component') (html tag)

compiles to React.createElement(Component)

compiles to React.createElement(obj.component)

Re: Why we chose Vue.js over React

#164
post #43

I hope I don't get downvoted for asking this but is React going out of fashion already? A lot of the talk about it was "React is here to stay" or "React is as permanent as JS itself" but now this is the second or third time people seem to be going for Vue instead. What happened?

Who cares? Fashion is not an engineering criteria, you shouldn't be factoring fashion into the question of whether or not a given tool is the right one for the job. > A lot of the talk about it was "React is here to stay" Unless Facebook has announced that they are abandoning React, this statement is as true as it ever was at any point in time.

I think fashion does come into the equation if only because it will be easier to find people who can grok the code base faster since they understand the framework and common idioms associated with it.

Where I work, we just had a bunch of new hires and they're being productive within the first couple weeks because they know React, and our app uses React Native.

React-knowledgeable devs are in high demand right now, which drives smart devs to learn it and garner experience with it, which makes it more desirable to use as a tool in your stack.

Re: Why we chose Vue.js over React

#165
post #21

My man, a lot of the pain described in this article can be solved by Mobx: https://stackshare.io/mobx One of our engineers at StackShare[0] suggested it and it's fantastic. Mobx is very simple to understand and will make writing a "React" page a real joy again. Redux was way too complicated for what it gave, and just shot term after term after term at me that left me with a headache. I still don't understand Redux pr…

> Simple, scalable state management https://github.com/mobxjs/mobx It says "simple" but looks complicated. Any pointers? Is it because I don't know how decorators work it looks complicated?

I personally liked this intro: https://mobxjs.github.io/mobx/getting-started.html

Re: Why we chose Vue.js over React

#166
post #65

The arguments against JSX and React requiring many small components are very surface level and sound like "we couldn't figure out how to make it work for us so it must be impossible". 1. This was mentioned already, but, yes, you can use ternaries and boolean logic for simple conditionals (loggedIn && Logout || Login ) 2. When you need more markup, put them in an if-else statement in the same render function. render()…

When I see examples like this, it reminds me just how elegant & simple Mustache.js template can be:

  Mustache.render( "{{#loggedIn}}Hello{{userName}}{/loggedIn}}
   {{^loggedIn}}Please log in{{/loggedIn}}", state );

Re: Why we chose Vue.js over React

#167
post #11

One of the most impressive thing about Vue.js was the ability of the framework to enter a field saturated with dozens of options, that was becoming dominated by a well-resourced oligopoly (Angular, React), and still win over developers jaded from Javascript-fatigue. The give-a-shit factor from Evan (the creator) is extremely high and was key to its success. Inspiration for anyone building a product in an established…

Basically React seemed immature, as if it wasn't thought out fully but just hacked together. Vuejs seems like what React could've been if it was thought out a Bit more. It just feels a lot more polished. Honestly I think Vue is so far ahead of the curve it isn't a surprise to see more people switch away from React.

I completely disagree. Vue seems like a step backwards for me -- it does very little that I couldn't do with Backbone/Marionette. I don't want templates, I don't want data-binding, and I DEFINITELY don't want opaque directives in my HTML.

Re: Why we chose Vue.js over React

#168
post #150
post #45

Earlier quoted context omitted.

Yeah, it's possible in React do to it. But compare that to how Vue handles conditionals: HELLO Duis a turpis sed lacus dapibus elementum sed eu lectus. You specified a home query: {{location.query.home}} No home query was specified I don't know about you, but to me this code is 100% more readable than the React example you gave.

It's strange to me to embed conditions in attributes - particularly the v-else case in a different tag. It requires several visual scans of the block of code to determine what's going on. In my opinion the following requires less cognitive overhead: function Home(props) { var query = props.location.query.home ? ( You specified a home query: { props.location.query.home } ) : ( No home query was specified. ); return (…

This also works:

    function Home(props) {
      return (
        
          HELLO
          

Duis a turpis sed lacus dapibus elementum sed eu lectus.

{ props.location.query.home ? (

You specified a home query: { props.location.query.home }

) : (

No home query was specified.

) } ); }

Re: Why we chose Vue.js over React

#169
post #45

Out of curiosity, one reason the author mentions (and I know, it's not his selling point) which I've seen others reiterate is that React's render() method doesn't support if statements. I know you can write something like the code below in React, so what exactly does that criticism refer to? function Home(props) { return ( HELLO Duis a turpis sed lacus dapibus elementum sed eu lectus. { (() => { if (props.location.qu…

Yeah, it's possible in React do to it. But compare that to how Vue handles conditionals: HELLO Duis a turpis sed lacus dapibus elementum sed eu lectus. You specified a home query: {{location.query.home}} No home query was specified I don't know about you, but to me this code is 100% more readable than the React example you gave.

Mixing tag and conditionals in attributes is so messy, I don't know how people accept that. It messes with the level of the scope, you can't quickly see that only one of the

will be outputted.

Re: Why we chose Vue.js over React

#170
post #45

Out of curiosity, one reason the author mentions (and I know, it's not his selling point) which I've seen others reiterate is that React's render() method doesn't support if statements. I know you can write something like the code below in React, so what exactly does that criticism refer to? function Home(props) { return ( HELLO Duis a turpis sed lacus dapibus elementum sed eu lectus. { (() => { if (props.location.qu…

Yeah, it's possible in React do to it. But compare that to how Vue handles conditionals: HELLO Duis a turpis sed lacus dapibus elementum sed eu lectus. You specified a home query: {{location.query.home}} No home query was specified I don't know about you, but to me this code is 100% more readable than the React example you gave.

What bothers me about this and other templating is that branching is so inconspicuous and therefore hides its complexity . Lets takes this extended example:

  
  
      HELLO
      

Duis a turpis sed lacus dapibus elementum sed eu lectus.

You specified a home query: {{location.query.home}}

No home query was specified
And compare it to:

  
  
      HELLO
      

Duis a turpis sed lacus dapibus elementum sed eu lectus.

You specified a home query: {{location.query.home}}

No home query was specified
The first one creates a div with 3 children with the type of the last one depending on the condition. The second one creates a div with 4 children (and a warning in the dev console). Both have 4 lines between the with the same content except for two attributes on two elements and are indented the same by convention of the framework. They look nearly identical when quickly parsing over them but results are very different.

Compare this to the other react solutions, or my personal favorite:

  const Home = ({location}) => 
      HELLO
      

Duis a turpis sed lacus dapibus elementum sed eu lectus.

{location.query.home ?

You specified a home query: {location.query.home}

: No home query was specified.}
I think it's pretty clear which "templating system" better represents the fact that this has more complexity than just a simple, linear component.
Post reply on HN