Vue.js is easier to learn than jQuery(medium.com)
medium.com
Vue.js is easier to learn than jQuery
https://medium.com/js-dojo/vue-js-is-easier-to-learn-than-jquery-abbbb9c12cf8#.9cwt60spf
50 comments
I get the feeling that React with the Redux/Flux architecture scales to Facebook-level complexity a bit better than Vue. Vue feels kinda like if you made plain React with setState a lot easier to use.
The complete separation of presentation and state with flux is a lot of work but starts to pay off when your data is used in many places and you can just connect any piece to the same global state and keep consistency. Or when you can make writing API interactions really easy with one middleware and from there your requests are done declaratively with actions.
I wonder what it's like to use Vue with Redux! Probably a bit weird given the two-way binding, where Redux is all about one-way binding and cycling every change through a global state transition. At first glance (revue, vue-redux) this seems awkward.
How does your team accomplish the stuff you would otherwise do with Redux? How do you do AJAX and how do you propagate that around? I suppose it's just like regular MVVM, all pretty isolated.
The complete separation of presentation and state with flux is a lot of work but starts to pay off when your data is used in many places and you can just connect any piece to the same global state and keep consistency. Or when you can make writing API interactions really easy with one middleware and from there your requests are done declaratively with actions.
I wonder what it's like to use Vue with Redux! Probably a bit weird given the two-way binding, where Redux is all about one-way binding and cycling every change through a global state transition. At first glance (revue, vue-redux) this seems awkward.
How does your team accomplish the stuff you would otherwise do with Redux? How do you do AJAX and how do you propagate that around? I suppose it's just like regular MVVM, all pretty isolated.
Just FYI, Vuex is the first party answer for a Redux solution for Vue.
Redux is just a fancy PubSub, you don't need it to scale. The main thing Redux got right was jumping on the React hype train. Don't get me wrong, I write React apps with Redux myself, but Redux is far from being a mandatory component.
You can totally use Redux, but conceptually Vuex is so similar that you may as well use that.
Also, Vue doesn't really have two way binding, just the v-model directive that is syntax sugar for handling an event to update component state.
Also, Vue doesn't really have two way binding, just the v-model directive that is syntax sugar for handling an event to update component state.
I'm pretty sure 99.999% of websites don't require Facebook complexity. And even if you do require it, I don't see why Vue.js can't handle what Facebook does.
Vue-router gets you all of the CRUD operations if that's all you're using jquery for.
Just checking, did you mean vue-router .. or did you mean vue-resource[0]. I've only played with vue a bit so I could be missing something.
[0]https://github.com/vuejs/vue-resource
[0]https://github.com/vuejs/vue-resource
I totally meant Vue-resource, but for some reason I keep mixing the two up when I speak or post about them.
Would you mind elaborating a bit on "a wide array of utility functions that you would typically use in your vue.js app."?
I am an amateur developer (home projects) and started to use Vue which I find excellent. I had the idea, though, that using Vue and jQuery at the same time is not correct (= technically it works but it is not recommended as Vue is supposed to do the jQuery things. If you use jQuery then your Vue design is wrong. Again, this was my understanding). Except for AJAX where I use qwest anyway.
I am an amateur developer (home projects) and started to use Vue which I find excellent. I had the idea, though, that using Vue and jQuery at the same time is not correct (= technically it works but it is not recommended as Vue is supposed to do the jQuery things. If you use jQuery then your Vue design is wrong. Again, this was my understanding). Except for AJAX where I use qwest anyway.
You have this pretty much right.
You want to avoid overlapping jQuery and Vue for areas both cover such as event binding and DOM manipulation. This should be left to Vue.
jQuery provides a number of other functions but AJAX is the major part of this.
See https://api.jquery.com/category/utilities/
If you already have a solution for AJAX, you might be interested in looking into a more generic library to complement Vue, such as Lodash https://lodash.com/
A quick example: http://colintoh.com/blog/lodash-10-javascript-utility-functi...
You want to avoid overlapping jQuery and Vue for areas both cover such as event binding and DOM manipulation. This should be left to Vue.
jQuery provides a number of other functions but AJAX is the major part of this.
See https://api.jquery.com/category/utilities/
If you already have a solution for AJAX, you might be interested in looking into a more generic library to complement Vue, such as Lodash https://lodash.com/
A quick example: http://colintoh.com/blog/lodash-10-javascript-utility-functi...
We have the same result. Our team, junior developers are happier after we made the transition from react to vue. They can do their job in less time than previous frameworks
"We switched from X to Y and we are never going back."
I think I've seen thousands of combinations for X and Y on HN. First everyone switched from JS to JQuery, Then JQuery to Ember or Backbone and never looked back. At one point everyone moved from Ember to Angular and never looked back. Then from Angular to React. Some people even switched from Swift and Java to React Native and never looked back. Then from Flux to Redux. And now I see people switching from React to Vue.js (and even back to JQuery?). And these were just for the Frontend JS libraries. It's all like a cat and mouse game. You cannot win. And I'm not sure there is even real progress. It seems like they are all reinventing the wheel again and again.
This also reminds me of Joel's article on "cover fire": http://www.joelonsoftware.com/articles/fog0000000339.html
I think I've seen thousands of combinations for X and Y on HN. First everyone switched from JS to JQuery, Then JQuery to Ember or Backbone and never looked back. At one point everyone moved from Ember to Angular and never looked back. Then from Angular to React. Some people even switched from Swift and Java to React Native and never looked back. Then from Flux to Redux. And now I see people switching from React to Vue.js (and even back to JQuery?). And these were just for the Frontend JS libraries. It's all like a cat and mouse game. You cannot win. And I'm not sure there is even real progress. It seems like they are all reinventing the wheel again and again.
This also reminds me of Joel's article on "cover fire": http://www.joelonsoftware.com/articles/fog0000000339.html
The people who are busy productively shipping products are not the ones who spend the most time and attention on these online debates, so it's easy to form a biased impression.
It's the developer version of the 24 hour news cycle. The many companies who are steadily and happily shipping valuable products on one stack aren't the ones that generate drama and pageviews.
Taking just one of your examples: the Ember ecosystem is large and growing, with many billion dollar businesses standardizing their apps on Ember. But that is too boring compared to "why we switched" posts.
"Everyone" turns out to be way bigger than "people you are likely to hear from on HN".
It's the developer version of the 24 hour news cycle. The many companies who are steadily and happily shipping valuable products on one stack aren't the ones that generate drama and pageviews.
Taking just one of your examples: the Ember ecosystem is large and growing, with many billion dollar businesses standardizing their apps on Ember. But that is too boring compared to "why we switched" posts.
"Everyone" turns out to be way bigger than "people you are likely to hear from on HN".
Well, since React and Vue 2.0 are so similar it's not a big deal to switch. And yes, I'm not going back to React after experiencing the cohesive and well-thought out Vue. If something super better comes along I might start using that, but I doubt that'll be anytime soon. The improvement needs to be worth The effort to learn the new framework. With React -> Vue the improvement doesn't need to be enormous because it's an easy conversion.
No, I am not going back, in fact I never went back.
I switched from Jquery to Angular 1, never went back. I switched from Angular 1 to React, never went back. I switched from React to Angular 2, never went back. I am considering Vue.js, and yes, I will never go back.
I switched from Jquery to Angular 1, never went back. I switched from Angular 1 to React, never went back. I switched from React to Angular 2, never went back. I am considering Vue.js, and yes, I will never go back.
That sounds more like a concentration problem than a framework one.
My favorite HN trope is the blog post (bonus points for Medium post) about how a startup or company switched their poorly maintained, bloated X application to a well thought-out rewrite in Y and how Y solved all their issues and it's the best thing ever.
[deleted]
Can confirm. I've been developing in React for 18 months. Loved 90% of React. Porting to Vue 2.0 now. I think I've found most of that missing 10% of coding joy.
"React can be fun to learn in the beginning but over time it does cause a lot of fatigue when you need it to do a little more"
Could you elaborate on what extra things you'd like react to do for you?
Could you elaborate on what extra things you'd like react to do for you?
The assumption this article makes is that beginners don't know the DOM and browser APIs, so if they don't, vue.js is easier than jQuery.
That's kind of ridiculous though.
No one should be writing anything for the web without a basic understanding of how the DOM works, even if you wrap things like jQuery, vue.js or React around it.
It's not that complicated.
Every beginners tutorial should start with a basic introduction to the DOM, with some examples, and without ANY libraries.
Using jQuery here is pointless.
Here, without jQuery. How is using jQuery here with a beginner of ANY help?
That's kind of ridiculous though.
No one should be writing anything for the web without a basic understanding of how the DOM works, even if you wrap things like jQuery, vue.js or React around it.
It's not that complicated.
Every beginners tutorial should start with a basic introduction to the DOM, with some examples, and without ANY libraries.
Using jQuery here is pointless.
Here, without jQuery. How is using jQuery here with a beginner of ANY help?
<html>
<body>
<div id="output">0</div>
<button id="increment">Increment</button>
<script>
var counter = 0;
var output = document.getElementById('#output');
document.getElementById('#increment').onclick = function() {
counter += 1;
output.innerHTML = counter;
};
</script>
</body>
</html>Well if they come from a web design background they know the css selectors which work with jquery.
Unlike your example, which doesn't work as written.
Probably doesn't work because document.getElementById doesn't work with a CSS #id selector as a parameter, it needs the bare id, so it isn't finding the increment or output elements.
You can always use document.querySelector() to target elements using a css selector
Whoops yeah, I just pasted from their jQuery code and forgot to remove the #. Remove them and it works: https://jsfiddle.net/wqxxufkv/
But as Skywalker mentioned, node.querySelector() / querySelectorAll has been working well across browsers for a while and supports most expressions jQuery selectors would.
But as Skywalker mentioned, node.querySelector() / querySelectorAll has been working well across browsers for a while and supports most expressions jQuery selectors would.
You could simplify this
<script>
var counter = 0;
$(document).ready(function() {
var $output = $('#output');
$('#increment').click(function() {
counter++;
$output.html(counter);
});
$output.html(counter);
});
</script>
<script>
var counter = 0;
$(document).on('click', '#increment', function() {
counter++;
$('#output').html(counter);
});
</script>[deleted]
jQuery doesn't provide a structure for you app, it's just a library for DOM manipulations, not the framework. So jQuery and Vue.js are not comparable things. Using Vue.js or Angular you are not supposed to work with DOM directly apart of the directives.
It's a key thing to define a flexible structure when you are working on a complex project. It's supposed to be harder to learn Vue.js or similar things than jQuery since using such kind of frameworks you will probably be working on the complex project, so you will have to use your brain to define a proper app structure, to keep code base maintainable, to conduct a refactoring, etc.
It's a key thing to define a flexible structure when you are working on a complex project. It's supposed to be harder to learn Vue.js or similar things than jQuery since using such kind of frameworks you will probably be working on the complex project, so you will have to use your brain to define a proper app structure, to keep code base maintainable, to conduct a refactoring, etc.
I disagree. jQuery is dead simple. You select an element and call a function on it. That's pretty much it. I think a 5 year old could understand that.
Vue.js requires a lot of different concepts that many developers have never run into before. There are multiple parts working together. It is tremendously more difficult to understand (though only on relative terms, no absolute).
Vue.js requires a lot of different concepts that many developers have never run into before. There are multiple parts working together. It is tremendously more difficult to understand (though only on relative terms, no absolute).
Lesson 1: Yes. A simple app, Vue.js code is more readability than jQuery. It's like a matching game than learning to program.
Lesson 2: No. There're not enough Vue.js plugins in the wild. You can't play with fancy stuff. No more joy.
Lesson 3: No. You will find hard to understand the bundled NODEJS tools on articles and the way to use libs.
Lesson 2: No. There're not enough Vue.js plugins in the wild. You can't play with fancy stuff. No more joy.
Lesson 3: No. You will find hard to understand the bundled NODEJS tools on articles and the way to use libs.
There is also the Quasar Framework for Vue (quasar-framework.org), which is like Ionic but using Vue instead of Angular.
Vue.js reminds me of Knockout.js. Is there any significant difference between the two?
jQuery is a DOM api wrapper, Vue is an MV* Framework.
Comparing the two is ridiculous. They both have different aims and use cases.
Comparing the two is ridiculous. They both have different aims and use cases.
Need to spice up a mostly static page? Reach for jQuery.
Need to create a complex UI or a single page app? Go for Vue or React. This list for me used to include Angular 1.x, ExtJS, jQuery UI, and many others.
Need to create a complex UI or a single page app? Go for Vue or React. This list for me used to include Angular 1.x, ExtJS, jQuery UI, and many others.
Yes it is
While I agree with the author's points, I don't think we need another post to praise Vue.js. The merits of Vue.js are quite evident, even if you have watched just a few minutes of some video tutorials (https://laracasts.com/series/learning-vue-step-by-step). As a newbie to front-end development, I'm more interested to know how Vue.js measures with other light-weight alternatives --- in particular Mithril --- which take different approaches. I would like someone with rich experiences to analyse the relative merits/drawbacks of them, such as the pros and cons of using template language against pure JavaScript. Unfortunately, this kind of analyses are very rare on the internet. The official website of Mithril has listed some advantages of Mithril (e.g. easier debugging), but I really want to hear a second opinion.
Whats your opinion? Anything you read or hear will be their opinion which was derived from their experience solving their problem. Whats my opinion? They're all awesome. Try them all. Then once you've done that you can do that thing thats very rare on the internet, the analyses, and be the internet champion to all the newer newbies in front-end development.
I think this comparison doesn't make much sense. jQuery is a low level lib aimed at providing something that is easier to use than the DOM API while doing mostly the same. Vue.js is in a completely different league. It's like comparing apples with oranges.
Vue looks great; a good move away from jQuery's low-level imperative paradigm, and I would definitely recommend it to an intermediate student interesting in leveling up. However, having taught middle-school CS for two years, I disagree with the author's assertion that it would be easier for beginners to learn.
Beginners want to make something happen. Like making alert windows pop up or (oooh!) modifying the text on a page. For these kinds of things, you actually don't need to know any of the underlying mechanisms. You just need to know that you put an id attribute on the thing you want to mess with and match it in the script. Similarly, throw the script at the bottom of the body, tell them to keep it there, and dispense with $(document).ready(). I haven't done the research (yet), but my experience tells me it's best to start people off somewhere in the middle of the ladder of abstraction, high enough that you can do something interesting right away, but low enough that you have some sense of the mechanism.
For beginners, brevity contributes to simplification. I used to write explanatory comments in scripts I gave my students. But their eyes don't parse the comments effectively, and therefore they perceive the comments as extra complexity. For this reason also, I would stick with jQuery.
But I'd love to find out. Anyone teaching intro CS who has time to run a comparison?
Beginners want to make something happen. Like making alert windows pop up or (oooh!) modifying the text on a page. For these kinds of things, you actually don't need to know any of the underlying mechanisms. You just need to know that you put an id attribute on the thing you want to mess with and match it in the script. Similarly, throw the script at the bottom of the body, tell them to keep it there, and dispense with $(document).ready(). I haven't done the research (yet), but my experience tells me it's best to start people off somewhere in the middle of the ladder of abstraction, high enough that you can do something interesting right away, but low enough that you have some sense of the mechanism.
For beginners, brevity contributes to simplification. I used to write explanatory comments in scripts I gave my students. But their eyes don't parse the comments effectively, and therefore they perceive the comments as extra complexity. For this reason also, I would stick with jQuery.
But I'd love to find out. Anyone teaching intro CS who has time to run a comparison?
> they perceive the comments as extra complexity
This surprised me as well, but 2 lines of code with 10 lines of comment gets a panic reaction while 4 lines of code is ok.
This surprised me as well, but 2 lines of code with 10 lines of comment gets a panic reaction while 4 lines of code is ok.
> Vue looks great; a good move away from jQuery's low-level imperative paradigm, and I would definitely recommend it to an intermediate student interesting in leveling up. However, having taught middle-school CS for two years, I disagree with the author's assertion that it would be easier for beginners to learn.
Yet, interestingly, people have very little problem understanding how spreadsheets work. This doesn't really argue against your point per se, but I think it makes for a plausible argument that you don't necessary want things to be imperative (jQuery) to be understandable.
EDIT: I do think presentation has a huge impact, and you really don't want explanatory commentary intermingled with a thing you're trying to understand. There's a reason we don't intermingle a single math formula/equation with comments inside the formula itself.
Yet, interestingly, people have very little problem understanding how spreadsheets work. This doesn't really argue against your point per se, but I think it makes for a plausible argument that you don't necessary want things to be imperative (jQuery) to be understandable.
EDIT: I do think presentation has a huge impact, and you really don't want explanatory commentary intermingled with a thing you're trying to understand. There's a reason we don't intermingle a single math formula/equation with comments inside the formula itself.
Am I the only one who think jQuery is important for beginners since they can get a feeling of what's underneath and furthermore, it is easy to pick up....
No, beginners should start just with the DOM, not with jQuery.
That's how they actually get a feeling of what's underneath.
The browser APIs have become a lot more consistent and useful (querySelector was a biggie), you really don't need jQuery at the beginning.
That's how they actually get a feeling of what's underneath.
The browser APIs have become a lot more consistent and useful (querySelector was a biggie), you really don't need jQuery at the beginning.
No, I believe so too. But then I also believe assembly, C and (at least on paper but if possible also for real) creating a computer from base logic gates (7400 series for instance; easy to get at yard sales) are important for beginners to understand what is going on.
People who start at a very high level will take a very long time, if ever, to stop seeing the computer as a magic thing that 'does stuff somehow'.
People who start at a very high level will take a very long time, if ever, to stop seeing the computer as a magic thing that 'does stuff somehow'.
Yes it is. Even though you are comparing two different libraries that does different things, vue.js is easy then jquery. Because it is much smaller in it's api. What it does is very simple and clear to understand.
I am using vue.js and vuex in some of my current projects. Only problem for me is that after adding Vuex and all it's getters, mutations and actions, my Vue component code now looks like lot of boilerplate code. Did any one else had that feeling. Is there any way I can directly connect vue template with vuex without intermediate component?
I am using vue.js and vuex in some of my current projects. Only problem for me is that after adding Vuex and all it's getters, mutations and actions, my Vue component code now looks like lot of boilerplate code. Did any one else had that feeling. Is there any way I can directly connect vue template with vuex without intermediate component?
You can mutate the state from within your components. Vuex doesn't prevent that. It just makes maintainability more difficult.
First, to answer OP's question, well the question is a little weird because i'd say that jquery supplements your vue.js app and makes it even more powerful. For instance, jquery provides methods like $.post() and $.get() along with a wide array of utility functions that you would typically use in your vue.js app.
But if you were comparing Vue.js to other frameworks like React, I'd say it's not only easier, it's a lot more fun to use and elegant (the same way jquery did for DOM several years ago). I would say always bet on elegance!
There is a horde of React developers who probably invested way too much time for them to move to anything else but my advice to them is once you go vue.js, you are probably not going to wanna go back, and hopefully that is a good thing.
React can be fun to learn in the beginning but over time it does cause a lot of fatigue when you need it to do a little more, which can overcomplicate your app rather quickly. So in my mind, I wouldn't be surprised if vue.js takes the lead over React anytime soon.