Live data from Hacker News

Vue.js 3

github.com

131–140 of 308 posts

Re: Vue.js 3

#131

Earlier quoted context omitted.

Angular is massive - MASSIVE - within large orgs you will have heard of but which I cannot name for obvious reasons. The twitterati and hobbyist crowd seem to love react, but anecdotally I've yet to see it used seriously at a BigCo, but Ng+TS is everywhere.

Your comment seems to present anecdotal evidence as facts about $framework's popularity. I think that's misleading. I'm wondering if there's a scraper out there crawling Alexa TOP 1xxx pages for use of specific libraries, frameworks? Maybe that would present a more accurate picture about this. Also it's often misleading since in any company with more than a few employees there seems to be more than one team of develo…

Builtwith.com does what you describe although not sure if it can detect react/angular/etc.

Not everything is public facing though, particularly in enterprise

Re: Vue.js 3

#132
post #126

Vue is the only one of the most popular 3 frameworks that can easily be used on a minimal basis to sort of "spruce up" old applications by selectively adding it here and there in the templates. Seems like they should try more marketing and community outreach toward that end. Gradual adoption is a feature / selling point not many web development frameworks can claim.

Why can't React do the same?

Re: Vue.js 3

#133
post #98

Earlier quoted context omitted.

The market also isn't as volatile as people make it out to be. The top most used js frameworks (React, Angular and Vue) have been in the top spots for 5 to 7 years now. I guess the market might as well be settled. Of course there are some new comers every year, but they don't enjoy a large market share. Hell, I've not even seen VueJS used once in any serious project in the industry. React and Angular are here to stay…

Angular seems to be dying. Svelte is an interesting contender. I think it will be React's main competitor given a year or two.

>Angular seems to be dying

lol. In the US open jobs for Angular and React are about 50/50. (Indeed/SimplyHired), in much of the EU Angular is way more popular than React still.

Is Angular the new Rails in this regard? It's not going anywhere, massive businesses use it at a huge scale and it works.

Re: Vue.js 3

#134
post #126

Vue is the only one of the most popular 3 frameworks that can easily be used on a minimal basis to sort of "spruce up" old applications by selectively adding it here and there in the templates. Seems like they should try more marketing and community outreach toward that end. Gradual adoption is a feature / selling point not many web development frameworks can claim.

Agree with this sentiment. I was in web dev since pre-jQuery/Backbone, but left during the rise of the js-framework wars. I then returned to this area as I needed to add functionality/"spruce up" a web app within my organization and randomly chose Vue for the task. It went smoothly and didn't require re-writing anything.

Meanwhile the web development team are still fighting with the flagship "all-or-nothing" angular app, still stuck on 1.7 because anything else is an entire rewrite.

Re: Vue.js 3

#135
post #90
post #80

Earlier quoted context omitted.

Sure, you can use HBS (or even vanilla) to render a piece of dynamic HTML. That's not really the problem these libraries are solving. You could also create your own components with HBS templates and figure out how compose them to render a tree of components. That's not too hard to figure out either. The problem is really in updating the DOM when state changes somewhere in your application. In the jQuery days we had t…

You say updating the DOM becomes messy but give no arguments why that would be the case. Say a function changes the cars array. All it has to do to update the DOM is: document.querySelector('#cars').innerHTML=carsTemplate(cars); Where carsTemplate is a HandleBars template that on page load has been initialized with the html to render the list of cars.

Ok, now show the cars list in three places, and one of them is a subset of only BLUE cars.

Now you have to update the DOM 3x and remember that the filter you set in that one place over there means you need to only show BLUE cars in this one place over here.

When you start to build things where one piece of data is not just shown in multiple places, but is dependent on other pieces of data, managing your state starts to become more difficult than the methodology you're describing.

Re: Vue.js 3

#136

Earlier quoted context omitted.

These "75%"/"300%" numbers are ridiculous, the two numbers are calculated completely differently. At least be consistent. 100/25-1 = +3 = 300% increase 25/100-1 = -0.92 = 92% decrease

i think your math is wrong, bud. 100/25-1 = 3 (300% increase) 25/100-1 = -0.75 (75% decrease).

Correct. :)

Source: https://www.google.com/search?q=25%2F100-1

Re: Vue.js 3

#137
post #90
post #80

Earlier quoted context omitted.

Sure, you can use HBS (or even vanilla) to render a piece of dynamic HTML. That's not really the problem these libraries are solving. You could also create your own components with HBS templates and figure out how compose them to render a tree of components. That's not too hard to figure out either. The problem is really in updating the DOM when state changes somewhere in your application. In the jQuery days we had t…

You say updating the DOM becomes messy but give no arguments why that would be the case. Say a function changes the cars array. All it has to do to update the DOM is: document.querySelector('#cars').innerHTML=carsTemplate(cars); Where carsTemplate is a HandleBars template that on page load has been initialized with the html to render the list of cars.

Honestly, if manually replacing pieces of DOM works for you, then by all means, keep doing that. I have no horse in the race.

In my experience, the approach you're describing doesn't really scale and only works for the most simplistic use cases. In a real world scenario you would have dozens if not hundreds or thousands of arrays/vars that are related to the view.

Even only considering we're talking about rendering blocks of dynamic HTML: How are you going to keep track which state changes affect which parts of the DOM? Are you going to have hundreds/thousands of innerHTML code all over the place? What is going to happen when (not if) you change your template?

Then you need to start considering, event handlers, initialization code for every car view, etc. Imagine those event handlers modify the state of a single car in your array. Are you going to repaint and re-initialize the events of all your cars on every mouse event? Again, that would probably work on very simplistic use cases.

I'm not describing anything new. These problems are what motivated people to create Ember, Backbone, Angular 1 and other frameworks some 10 years ago. But the JS world has moved on from that paradigm into the reactivity+components thing which is a much better abstraction in terms of developer experience, performance, memory consumption, etc [1].

[1] https://medium.com/dailyjs/a-realworld-comparison-of-front-e...

Re: Vue.js 3

#138
post #81
post #37

I just started vue 3 and its incredible compared to my experience with react. Way to go Vue team!!!

> and its incredible compared to my experience with react Could you expand on this a little more? What is it specifically that makes it incredible compared to React, in your opinion?

I like that vue manages dependencies so you dont worry about pure components anymore, but I believe that was fixed recently in react? The biggest thing is I despise writing JSX. To me it just feels absolutely miserable. The upside is that you have incredible fine grained control over the dynamic rendering of components, but so far even in my complex app there's been no need to write a render function yet (similar equivalent in vue to get that same level of control as react).

Also, I really like the data binding which vue took from angular. That was always by far my favorite part of angular, rather than having the binding be written in JS which feels too mechanic to me. I dont feel like I'm writing HTML / front end code, I feel like I'm writing a hybrid mecha mutant of JS + HTML + weird syntax.

Re: Vue.js 3

#139
post #90
post #80

Earlier quoted context omitted.

Sure, you can use HBS (or even vanilla) to render a piece of dynamic HTML. That's not really the problem these libraries are solving. You could also create your own components with HBS templates and figure out how compose them to render a tree of components. That's not too hard to figure out either. The problem is really in updating the DOM when state changes somewhere in your application. In the jQuery days we had t…

You say updating the DOM becomes messy but give no arguments why that would be the case. Say a function changes the cars array. All it has to do to update the DOM is: document.querySelector('#cars').innerHTML=carsTemplate(cars); Where carsTemplate is a HandleBars template that on page load has been initialized with the html to render the list of cars.

I use this approach too but it fails whenever there's any state in the elements. An example is input elements:

  function update() {
    let value =   document.querySelector("input")?.valueAsNumber;
    document.querySelector("main").innerHTML = `
    Enter a price:  
    
Discounted price is ${value * 0.8} `; } update();
What will happen is each time you enter a character, it will create a new input element, which loses the focus and cursor position.

To solve this we can split it up so that the inputs are created once and the output is updated with innerHTML. No problem, right? But it's hard to scale up because now you have to split the html up into small segments based on whether there's internal state or not. If you want to update the 'max' of an input type=range, you aren't doing it with handlebars anymore but you have to use setAttribute instead.

What react, vue, etc. do for you is handle the updates in a way that reuses the existing elements. If you changed any attributes of the , it will not lose the focus and cursor and any other state. If you change the max of an , it will update the existing element (using setAttribute) without losing any other state. If you change some text, it will update the existing text node using innerText/textContent.

You may not need this type of system. I think React, Vue, etc. are overused. But in some projects it's much cleaner to use a React/Vue/etc. style system rather than splitting it up where some segments use setAttribute, some use innerHtml, etc.

Re: Vue.js 3

#140
post #126

Vue is the only one of the most popular 3 frameworks that can easily be used on a minimal basis to sort of "spruce up" old applications by selectively adding it here and there in the templates. Seems like they should try more marketing and community outreach toward that end. Gradual adoption is a feature / selling point not many web development frameworks can claim.

Why can't React do the same?

I suppose it could, but there are annoyances with JSX defaults.

For instance, Vue provides a method to explicitly declare your template variable delimiter syntax. Last time I looked this was requested of React, but not implemented, someone correct me if I'm wrong on that and it has come along in the last year or two. So.. lets say you wanna put some modern Javascript in some Django templates to make them look spiffy. With Vue you can just declare your delimiter to be `[[` instead of `{{`, (because `{{` conflicts with Django's template variable syntax) with a one-liner setting.

I'm sure you could do this in React with a custom parser function (or maybe there's a third party library?) but it's a lot easier when the framework just gives such things to you out of the box.

If I do this all over the place and some other guy comes along years from now with no documentation on what he's getting into, he doesn't need to know too much to figure out what's going on and work on it. Right away he'll see "delimiter = [[" at the top of the script block in a template and can grep double brackets in the whole project to get an overview of what's being done.

Post reply on HN