Hacker News Reader

Comment by lhorie | Hacker News Reader

The JSX point boils down to this: you can't say with a straight face that using react without writing JSX is as idiomatic as pulling vue from a CDN, and you can't say that using JSX is as easy to setup on a legacy codebase.

React doesn't depend solely on there being a stable host DOM node. It also generally assumes data is programmatically structured. Try rendering FAQs as HTML with PHP then sprinkling answer toggling functionality with React and you'll see it's not straightforward at all; it would require refactoring backend code into a REST API or similar. With vue, add v-if and you are done.

Nobody's saying vue doesn't have faults; it has plenty of them. Let's not get all fanboyish when someone points out a legit con in react.

View on HN

Not true. In fact, the first page of the react guide shows setting it up with jsx entirely in the browser. You also include babel via cdn and you‘re done.

You've moved the goalposts from "not possible" to "not as idiomatic"

Look, I gave a challenge to implement FAQ page answer toggling on top of legacy PHP HTML. Show me that it's possible to do it in react in a not god awful hacky way without refactoring the backend first, then explain how it's comparable to a vue one using v-ifs, then we can knock off ourselves out debating semantics.

How do you get the data into your Vue code?

You don't have to refactor much I think. You can inject the data into global scope in your PHP template, before you include React script. I'd do something like `window.__PAGE_DATA__ = "<?php echo json_encode($data) ?>";`.

Then, in your React code you'll be able to access it in a pretty idiomatic way for React. Instead of calling `fetch` or something similar, you'll have to call `JSON.parse(window.__PAGE_DATA__)`. You have to use `try`/`catch` block around it as well to handle errors from JSON parsing - just like you have to have the same block around `await` calls. You can treat the data as immutable to a degree as well - accidental local property updates will not get to the global scope, you'll have to set the property in `window` object.

I've used React in a few projects, embedding it into a Wordpress website using this approach. Seems to work well for me, but YMMV.

In vue, you don't even touch the data, you just sprinkle an attribute on the existing html to augment functionality much like you'd do unobtrusive js w/ jquery.

The approach you mentioned sort of works but a) it does require refactoring backend code (which by itself may already be a non-starter depending on whether you're dealing w/ a "old guard" backend tech lead, for example) b) it opens up potential security holes if implemented as you describe, c) you might lose SEO visibility and/or fail more catastrophically (i.e. a js exception might blank out the page entirely, vs merely breaking toggling), etc.

A more nitpicky code reviewer might also question the usage of babel off of a CDN if you went with a no-build JSX approach, the usage of window, etc.

By comparison, the vue snippet would be trivial, "production worthy" and it handles all the things above correctly.

> In vue, you don't even touch the data, you just sprinkle an attribute on the existing html to augment functionality much like you'd do unobtrusive js w/ jquery.

I don't have a lot of experience with Vue, but I don't follow. You include Vue.js from CDN in a `script` tag, and then just add the `v-for` and `v-if` annotations to your HTML? How does Vue get the data, to properly iterate over it in `v-for` or check in `v-if`?

I'm really curious because I feel I'm missing some piece of puzzle here.

I think the idea is that the backend already iterates over the data and spits out for example a ul with a li per faq item. You edit the template the backend uses so that the vue annotations are also produced, which in theory is easier than changing the backend code.

EDIT:

Previous HTML outputted by for loop in backend template:

  <ul>
    <li>
      <h2>Question 1</h2>
      <p>Answer 1</p>
    </li>
    <li>
      <h2>Question 2</h2>
      <p>Answer 2</p>
    </li>
  </ul>

New HTML outputted by for loop in backend template

  <ul>
    <li>
      <h2>
        <button v-on:click="expanded = 1">
          Question 1
        </button>
      </h2>
      <p v-if="expanded === 1">Answer 1</p>
    </li>
    <li>
      <h2>
        <button v-on:click="expanded = 2">
          Question 2
        </button>
      </h2>
      <p v-if="expanded === 2">Answer 2</p>
    </li>
  </ul>

You pass data into it as json. Or load it from external source as json

I think I know how to code a faq I use react to create a tool for humans to help autonomous vehicles with react. Jsx has nothing to do with how easy it is to embed react in a host app. If you want to compare build systems, VueJS is also less practical and robust without its optional build system. This was used as a reason angularJS v1 would kill react and it’s a tired argument IMO

You are shifting goalposts. Obviously every framework is "similar" enough if your baseline is "can I ship something with it". Heck, there are production apps out there written in choo and hyperapp and mithril. They all work just fine.

The argument here is that there is a substantial difference of effort required for a specific subset of project types (migrations from large non-SPA).

And for the record, all the vdom libs I mentioned are on the same boat as react, because it's an inherent trait of vdom based architectures.

I'm the author of one of them, and while I can't speak about others, I can say that I was ok with requiring simultaneous migrations from server rendered templates to REST APIs for scratching my itch, even though I was aware of DOM-first systems (angular 1, knockout, vue and intercooler are examples of those)

Contrary to popular belief, a framework is not required to be perfectly suitable for every scenario under the sun. And that's fine, nobody needs to get all defensive over it.

Reply on news.ycombinator.com