Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Vue.js vs. React

vuejs.org

Post reply on HN
Print view View original

371–380 of 486 posts

Re: Vue.js vs. React

#371

Post by vladimir-y »

chrisco255 wrote: post #303
danjoc wrote: post #189

Earlier quoted context omitted.

Another chart worth viewing: https://www.hntrends.com/2017/july.html?compare1=React&compa... Hiring is a lagging indicator, but I see React hitting a plateau the way angular did. I see Vue is on the cusp of takeoff. Time will tell if it fails to launch, but I'm seeing more interest in Vue at meetups than React. I think a lot of this has more to do with React's state management than licensing. One of the react develop…

Redux is completely optional, 3rd party library. So I really don't understand why anyone would say that. You don't like Redux? Don't use it.

Everything is a 3rd party library when it comes to the building complex React based app. Redux is a part of the hype train, so you are going to use it if you are on the train.

Re: Vue.js vs. React

#372

Post by frogfuzion »

blumomo wrote: post #357

In this thread people are fighting about their _opinions_ why they use Vue.js or React. And why X is really better than Y. In reality these programmers don't want to have the feeling they might have made the wrong choice when they used X instead of Y. The idea that they might have taken the poorer choice hurts so much that they need to defend their decision so heavily while in reality taking ReactJS or Vue.js is like…

This should be the top comment. This sort of "debate" has happened since the dawn of programming and will continue to happen until AI programs for us.

The reality is it is all shite! Just get your job done.

Re: Vue.js vs. React

#373

Post by bluepnume »

For me, the best thing about jsx is the fact that it's so easy to create different implementations of `React.createElement` to solve different problems outside of the scope of React itself. Want a render function that uses jsx but returns a string, a DOM tree, or something entirely different? Totally possible! I didn't like jsx at first, but the fact that it's so decoupled from React itself counts extremely in its favor, in my view.

For example, for one of my libraries I wanted a really simple way to allow people to include custom templates. I started with string-based templates, but quickly realized that this was inflexible for any kind of event binding or later dom mutations. Achieving that was super easy with jsx -- I just implemented a custom jsx function which directly outputs DOM elements.

Step 1: implement a jsxDom function [^1] which takes (name, props, children) (e.g. https://github.com/krakenjs/xcomponent/blob/master/.babelrc#...)

Step 2: point babel to my jsxDom function (e.g. https://github.com/krakenjs/xcomponent/blob/master/src/lib/d...)

This even allowed some cool hacks like including iframes directly in the jsx, to sandbox sections of the page (since the library is geared towards creating components to be embedded on 3rd party sites):

  containerTemplate({ jsxDom }) {
    return (
      
        
          p {
            margin-top: 40px;
          }
        

        
I can be sure the styles in this iframe won't affect the parent page

      
    )
  }

Re: Vue.js vs. React

#374

Post by djur »

beefsack wrote: post #358
djur wrote: post #330

Earlier quoted context omitted.

React does not force JSX use. JSX just compiles down to React.createElement.

I feel React.createElement is so unergonomic it's not really an option to use directly. A lot of React supporters mention it when people criticise JSX, but I don't think it's a pragmatic alternative.

I know people who use React without JSX and it reads fine, as long as you assign React.createElement to a shorter alias. I like that you don't have the visual noise of closing elements. I think it's mostly a matter of taste (and how much you care about your HTML-generating code resembling HTML).

Re: Vue.js vs. React

#375

Post by djur »

alevans4 wrote: post #365
djur wrote: post #337

Earlier quoted context omitted.

I wonder if the JS snippets in those attributes is syntax checked at build time or run time.

Vue templates are compiled into render functions. They are checked when the template is compiled. If you are using a build process, then that would be at build time.

Is there any editor support for that? One of the things I like about React + TypeScript is that the JSX is syntax-checked and type-checked in my editor as I type. My understanding is that this is possible because TS has built-in support for JSX.

Re: Vue.js vs. React

#376

Post by moo360 »

pier25 wrote: post #232
peller wrote: post #203

Earlier quoted context omitted.

I'm not sure I follow. To use the basic example from the link, as opposed to this: const listItems = numbers.map((number) => {number} ); return ( {listItems} ); What's wrong with looping this way?: return ( {numbers.map((num, i) => {num} )} )

> What's wrong with looping this way? The problem IMO is that it's harder to read and write than: {{num}} That's Vue's syntax, but any other templating language is more readable to me than JSX.

Since the logic inside of JSX is just JavaScript encapsulated in braces, you're basically saying that Vue's angular like attributes are better than just simple javascript syntax?

I don't understand how

    	
        {{num}}
is less readable than

    
        {listItems.map((num, i) => {num})}
Both are pretty readable, but the latter is essentially normal javascript, with the idea that you can return dom elements in it. The only thing that a javascript developer with zero jsx experience needs to know is that you can express dom elements within your javascript and treat them exactly like functions that return that element (which is what they are).

What someone has to know to parse your vue example is the exact syntax for for loops in vue, evidently the syntax in this example is quite simple but what if they want to perform extra logic in that loop to modify which elements to show? In the react example all they have to do is know javascript.... in Vue they have to go look up how to do that in Vue.

Re: Vue.js vs. React

#377

Post by moo360 »

jaequery wrote: post #260
sergiotapia wrote: post #239

Earlier quoted context omitted.

I find the JSX loop infinitely easier to understand what's going on. It's a javascript map. With your Vue example, what is listItem? An array? Can it be an object? Does listItem need a special decorator for v-for to be able to loop through it? So many initial questions that just aren't there if you just use Javascript.

it's just plain for(x in list){ .. } v-for="item in list" if you need idx: v-for="(item, i) in list" pretty standard stuffs

Cool, but in JSX it's just javascript as you would write it anywhere else in your app, except encapsulated in braces. How is that not simpler for people who should be Javascript developers?

Re: Vue.js vs. React

#378

Post by mmcnl »

coding123 wrote: post #351

Actually my major complaint of React is the state of state. There seems to be no common knowledge about how to do this right. I just joined a team that has two React projects that development started about two months ago (I just joined like a week ago). There is a a large component that I am working on that is completely bound to Redux. There are major state update issues and the team had opted to assign IDs and data…

> There are major state update issues and the team had opted to assign IDs and data to the DOM elements and use those to look up state in the redux store before modifying it.

This sounds awful and seems like an anti-pattern. I don't think this anything to do with React (other than perhapps that React gives you the freedom to do things wrong). Your devs don't have a proper understanding how React (or Vue) works. Define state model, define view, modify/interact with state, let React modify view. That way you'll never need dirty hacks like fetching state from Redux by using the DOM ID.

Re: Vue.js vs. React

#379

Post by alevans4 »

djur wrote: post #375
alevans4 wrote: post #365

Earlier quoted context omitted.

Vue templates are compiled into render functions. They are checked when the template is compiled. If you are using a build process, then that would be at build time.

Is there any editor support for that? One of the things I like about React + TypeScript is that the JSX is syntax-checked and type-checked in my editor as I type. My understanding is that this is possible because TS has built-in support for JSX.

Not yet as far as I know.

Re: Vue.js vs. React

#380

Post by mmcnl »

pasta wrote: post #2

My #1: download vue(.min).js and you are ready to go. No packagemanager, bundler and what not needed.

That usually only works well for really small components. Once you're serious about your web app, you'll end up using the whole developmnet Webpack environment in short time anyway.
Post reply on HN