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

Vue.js 3

github.com

Post reply on HN
Print view View original

291–300 of 308 posts

Re: Vue.js 3

#291

Post by lhorie »

iakov wrote: post #286
lhorie wrote: post #271

Earlier quoted context omitted.

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__ = " ";`. 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_…

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.

Re: Vue.js 3

#292

Post by nikkwong »

swyx wrote: post #249
nikkwong wrote: post #207

The announcement talk was nice to watch, however, it was technically void of any of the implementation details. It's interesting to me that they did not consider the approach of pushing more work to the compiler and less to the runtime in the manner popularized by Svelte. I wonder what the trade-off between their current rendering approach and the Svelte-based approach are?

> they did not consider the approach they certainly did, lol. the tradeoff is the same it's been; they want all of vue available in a script tag.

Guess I missed that. That makes sense, it's an interesting trade-off though. I suspect that including Vue via a script tag is not how the majority of users implement Vue; and therefore clinging to the virtual DOM may be a net-negative for most use cases. Personally, I am using Vue for a data-intensive app where performance really really matters. Although, I understand how broadening access to the framework increases availability and adoption; and for most use cases these performance considerations don't have any real world implications.

It is interesting though looking across benchmarks though and seeing non virtual DOM frameworks crushing their counterparts in terms of speed. I wonder if we'll see more growth in that space in the future.

Re: Vue.js 3

#293

Post by korm »

nikkwong wrote: post #292
swyx wrote: post #249

Earlier quoted context omitted.

> they did not consider the approach they certainly did, lol. the tradeoff is the same it's been; they want all of vue available in a script tag.

Guess I missed that. That makes sense, it's an interesting trade-off though. I suspect that including Vue via a script tag is not how the majority of users implement Vue; and therefore clinging to the virtual DOM may be a net-negative for most use cases. Personally, I am using Vue for a data-intensive app where performance really really matters. Although, I understand how broadening access to the framework increases…

Which benchmarks? In the js-framework-benchmark Svelte is slower than Inferno or Ivi and only slightly faster than Preact or Vue. https://krausest.github.io/js-framework-benchmark/2020/table...

You may be aware but it's also important to note that everyone is trying to cheat these benchmarks so they don't mean much. The implementations aren't data driven and don't look much like how we'd write real world code. See the discussions here including the linked issues and PRs https://github.com/krausest/js-framework-benchmark/issues/77...

Re: Vue.js 3

#294

Post by Already__Taken »

aethr wrote: post #233
diminish wrote: post #24

Earlier quoted context omitted.

curious how easy it will be to move from vue 2 to vue 3

I am working on this right now on a medium-sized project, and it's deceptively more work than we anticipated. While Vue's component API itself is remaining mostly backwards compatible with Vue 2, most of the "core" supporting libraries have changed their APIs: Vuex, VueRouter and vue-test-utils in particular. After the package update and some very basic find/replace across our codebase, about half of our 600+ tests h…

to be fair though you are doing this in hard mode. to transition an app you should wait for 2.7 to get all the warnings and guides. so good job to everyone that you didn't find it herculean.

Re: Vue.js 3

#295

Post by iakov »

lhorie wrote: post #291
iakov wrote: post #286

Earlier quoted context omitted.

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__ = " ";`. 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_…

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…

> 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.

Re: Vue.js 3

#296

Post by unnameduser1 »

iakov wrote: post #295
lhorie wrote: post #291

Earlier quoted context omitted.

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…

> 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…

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

Re: Vue.js 3

#297

Post by mcherm »

superasn wrote: post #261
mcherm wrote: post #260

Earlier quoted context omitted.

As someone who includes we pack in my build chain in order to use vue but doesn't truly understand it and has never used Cute, can you explain the advantages?

This is straight out of the horses mouth: - Lightning-fast cold server start - Instant hot module replacement (HMR) - True on-demand compilation This part should be of particular interest to you: https://github.com/vitejs/vite#how-is-this-different-from-vu...

Thank you.

Re: Vue.js 3

#298

Post by iudqnolq »

iakov wrote: post #295
lhorie wrote: post #291

Earlier quoted context omitted.

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…

> 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…

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:

  
    
      Question 1
      
Answer 1

    
    
      Question 2
      
Answer 2
New HTML outputted by for loop in backend template

  
    
      
        
          Question 1
        
      
      Answer 1

    
    
      
        
          Question 2
        
      
      Answer 2

Re: Vue.js 3

#299

Post by brylie »

wenc wrote: post #214
brylie wrote: post #212

I've been confused by some of Evan's presentations about performance gains and other statistics. For example, the release notes say > updates (up to 133% faster) How can something be > 100% faster?

If you take 100% faster to mean 2x faster (takes 1/2 the orig time), 200% faster to mean 3x faster (takes 1/3 the orig time)... Then 133% faster means 2.33x faster (takes 1 / 2.33 = 0.42 the orig time).

Thanks for clarifying :-)

Re: Vue.js 3

#300

Post by LocalPCGuy »

machello13 wrote: post #165
erokar wrote: post #115

Earlier quoted context omitted.

Depends where you live and work I suppose. I used to work in a consultancy firm in Norway that was all in on Angular two-three years ago. Angular has been very popular in enterprise here. But Twitter and Reddit reach enterprise too in the end. The consultancy firm has now switched more or less entirely over to React because Angular is so out of vogue.

I used to work for a big financial analytics company that used Angular 1.5 for everything . Around the time I left, they started migrating to VueJS instead. Obviously this is all anecdotal, and I have no doubt AngularJS is still being used in a lot of places, but I think there's reason to believe its share might be shrinking.

AngularJS is obviously shrinking. It's the 1.x version, and no one should be starting new projects with it. I don't think anyone is referring to AngularJS. When people say Angular, they'd be referring to v2.0+.
Post reply on HN