5 ms·

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

lhorie 6y ago
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.
- iakov 6y ago
  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.
  - lhorie 6y ago
    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.
    - iakov 6y ago
      > 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.
      - unnameduser1 6y ago
        You pass data into it as json. Or load it from external source as json
      - iudqnolq 6y ago
        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>

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.

iakov 6y ago
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.
- lhorie 6y ago
  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.
  - iakov 6y ago
    > 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.
    - unnameduser1 6y ago
      You pass data into it as json. Or load it from external source as json
    - iudqnolq 6y ago
      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>