What Vue.js Does Better Than React
Vložit
- čas přidán 28. 06. 2024
- I recently did a deep dive into learning Vue.js and found many things that I think Vue.js does better than React.
I'm still going to remain a React engineer, but I think there's some really great ideas from Vue.js that would be awesome to see brought over to React.
This video is also in blog post form! hswolff.com/blog/what-vuejs-d...
0:00 Intro
1:12 Framework vs Library
2:29 Disclaimer
3:01 Single File Components
5:36 Officially Supported Libraries
7:53 Style Guide
10:17 Built in support for styling
12:34 Slots
15:59 Directive Modifiers
19:27 Form Input Bindings
20:09 Custom Directives
21:21 Written in TypeScript
22:09 Wrap up
--
NEWSLETTER: hswolff.com/newsletter/
PATREON: / hswolff
TWITCH: / hswolff11
TWITTER: / hswolff
SITE: hswolff.com/ - Věda a technologie
I find it funny that there seem to be a lot of devs that go from React to Vue and never go back, yet I don't see many going from Vue to React for reasons other than job availabilty.
Interesting observation!
Lol very true
What is funny?? 😂 I switched to React for work 2 years ago… but still use vue for all personal projects . the more I use react the more I wish I was using vue3 composition API. There are a few things that really frustrate me about react
Update: They're using React at my new job and now I have to learn it ASAP 😅. Lesson: You should always learn React. It's everywhere right now.
I watched this video because I might have to learn React for a new job (afters many years satisfied with Vue), ...but now I'm very super sad.
As another "react-focused" dev who has kept Vue at "arms-length", thanks for a quick overview.
I want a style guide. gofmt
I'm an Vue user (and create tutorials about it) but when it comes to typescript React still wins even in Vue 3.
React has better TypeScript support because it basically writes its html portion inside Javascript, so you have access to all your typing. In vue, you write your html in a different section so you do not having typing inside the html portion, however if you really need TypeScript support inside your html code, Vue allows you to returen JSX inside a render function. As a matter of fact, html code written inside the template section of vue is compiled into JSX like code during compilation.
I think Vue has Volar now which helps in VsCode ?
excellent video, finally something that encapsulates the different approaches, very helpful!
To add to the official supported libraries thing, if you’re a new user of Vue, you would probably create new projects with the Vue CLI, and both Vuex and Vue Router are provided as options when setting up your project. Really easy to get it set up and start using.
For me, I like React, because it makes me feel I'm just writing JavaScript.
I don't like too many APIs to abstract code from developer.
Vue however, indeed did a great job for hiding implementation details.
It makes you feel, but keeps you abstracted the same way. That reason is not enough to use X or Y framework, if you want to write plain javascript use vanilla js.
Then combine vanilla and alpine
Great video!! Thanks Harry
React could improve just by making a better documentation, a style guide would be great tbh. There is also a lot of magic going on vue which might feel weird on react which tries to be just JS
Agree. Fortunately though, they're gonna be rewriting the docs.
Vue can run without compilation. That's literally just JS.
@@AndyJacksonSoftware React can too. You can even use JSX if you pull in a babel script cdn, but It won't be as performant as Vue.
Thanks for your very objective insights!
Wow great video! Would be great to see a follow up video on what you think React does better over Vue. Also one other thing Vue does great is Vite, no more slow webpack builds!
Oh...just you wait for next week 😈
@@hswolff ohhhh we will wait for that :D
My favorite missed feature: zero compilation as an option. If you skip single file components, Vue will render your app out of the box. So for minor pages I can skip compilation.
Why I like React - TS Support
Why I like Vue - It's simple, lightweight, TS support is decent not great, but in Vue 3 it's much better
Have you tried AlpineJS? It’s a minimal framework based on Vue for non SPA apps
@@MagnusAnand Yes a little bit, and it's awesome for UI changes for hamburger menus etc.. Small minimalistic it's like Tailwind for JS.
A team I was on last year (senior level Vue devs) had so much trouble making TS work in Vue 3 in ways we would find useful we ended up abandoning it altogether. The team lead, despite clearly preferring Vue, told me he wished they picked React just because he prefers TS that much. At that point though it was a bit late to rewrite the project...
Not sure if things have improved in the past year, but we had a notably negative Vue 3 Typescript experience.
Hey great video, do you think that there reason React doesn’t have a style guide is because it’s a library and so open to more ways of using it. While Vue (and Angular) is a framework, so easier to set out a specified approach/style guide? It’s great to see a positive review of another framework 😀
Personal opinion warning:
React doesn't have a style guide because of the shitty open source model that Facebook has. That basically is "okay ill do the minimum amount of work, the community then will do the rest of work, just because we are Facebook and people are gonna use our app".
Vue, being the small guy that has to win market share, has to actively try to guess what developers really want and what makes the experience of working with it great, and that translates to most of the advantages explained in this video.
Also, quite important point, the creator of Vue worked with Angular (he actually worked at Google for some time) and that means that he inherited some of the "opinionated" approach to problem. People sometimes likes React exactly because it lets you completely free, but sometimes opinions became standards, and standards are great when developers have to move from one project/company to another.
Vue 3 is amazing. Everytime - I'm shocked at how polished and far I can get in such little time - all while easily organizing my code and staying DRY as I go... with vue.js. It's really awesome.
As someone who has used Vue every day for the last 2 years (but who still misses React), I think this video was spot-on. I've definitely taken some of these things for granted for so long, but would probably be a little frustrated going back to React on a lot of these points if I had to. Bravo, Mr. Wolff! And as others have commented, I'd love to see the flipside of this, things React does better than Vue.
love your videos 😍💗
This is the kind of content I'd like to watch. I have seen other videos on same topic and really most of them are superficial speed, size , job opportunity comparisons. Also they come to conclusions super fast that it sucks. Like one guy was telling if I wanted to use VUE , I would use angular instead. Like he didn't even consider the fact that VUE is a progressive framework. So many videos with immature opinions. But this video is really kinda helpful especially the styling guide part.
Woo! So glad to hear! I'm glad it had substance you really benefited from!
GREAT video, man. Thanks. :)
I love Vue, just wish it was more widely used.
It is, in China
@@NoNo-pz4lm I have moved to USA from Mongolia recently and 9/10 jobs are react and vue 1/10, I like vue but to get job I need to learn react, starting salary react $120k per year, I have been learning vue for 4 months but now need to switch to react
In China, the number of jobs in Vue is 100 times that of React
Being a JS | React developer from over past 4 years I would say that VueJS may look so cool to fresh developers because all sorts of abstractions(directives etc.) are there for you, to speed up. But if you really don't understand the plain JS which are building those abstractions would make your life hell in the job interviews as a Front-end developer. Just because the interviewer will scrutinize your command in JS first then might look for framework-specific knowledge.
Well in case of React you'll understand nuances of doing the things in the best possible way.
- Just my thought
JS isn't questioned here :D The talk is not on how to blindly trigger prebuilt magic standard functionalities. Let's not discard efficient tools for a mere illusion of better education in the lack of the tools.
** Not using a hammer to better understand and master the notion of gravity and material types **
I haven't tried Vue but I've often heard it's a lot of the best parts of Angular. I believe Evan came from the Angular world. Angular also has many of these features. Routing out of the box, everything in one file if you want, I like that for tiny components. Thanks man. Great video!
Directives also ng-if and ng-for
@@kettenbach Vue doesn’t have a straightforward way to build custom structural directives (v-if and v-for) because v-if/v-for is parsed with the AST.
Every time I need multiple dynamic css classes on React is such a pain.
I've being using a tiny lib `clsx`, but again, such simple thing that react does not solve.
I researched Vue, React, Angular and others for work. The simplicity of learning Vue made it easy. I had my first app up and running the first day. I also loved that I could build and integrate components into existing websites with ease. Other frameworks had steep learning curves or were too immature to recommend in a professional setting. Over a year later I am still glad we chose Vue.js.
Hi, thanks for this great video, it's really helping make an important decision,
one question I have is, does vue have something similar to React's shadow DOM ?
Yes, but it's called Virtual DOM. It has the concept of Virtual Nodes or VNodes too.
Thanks for the video.
I think comparing Vue to Angular would have been much better since both are frameworks.
Does this comparison make my mind to change to Vue from React? Nope. I won't, until its absolute necessary :)
no one cares about angular, google is killing angular in 2022
Things are getting more interesting now with Vue 3 and the composition API approach 😁but unfortunately not many VueJs job vacancies here in Europe.
I could listen to you all day
Great informative video
I started learning React a few years ago, switched to VueJS and never looked back. Vue is actually fun to work with React is not in my opinion.
I tell recruiters I only work on Vue projects and guess what? I get calls for VueJS projects. My life is soo much better because of VueJS. I love it.
I love your videos , can you please make a video comparing Solid-Js to the rest..
I found your solidjs video nice.. Could you give an explanation regarding how to code in solid
A new Vue developer in the making hehe.
I wonder in 18:00 how “doSomething” function will have the signature of a click event in TypeScript. Can TypeScript see that doSomething is used as a click event and automatically infer its signature?
Based from what I've heard, their VS Code extension, Vetur helps with that.
Good video bro. Glad you like Vuejs. You might get addicted!
Thank you so much
I'm a vue developer in my day job, it can get quite messy on large projects, but if you just use tailwind it is immense
tailwind: the most stupid idea for FE
What's the problem with tailwind?
@@fooked1 it's hard to work with...for many reasons that are hard to explain in a comment...if you are a pro in css/html you can understand why
@@mrwho2513 what do you mean by comment? Can you explain further?
@@shamscorner I wanted to say that there are many reasons why tailwind is a bad idea, and it's hard to explain them in a comment(s) because you'll have to write a blog post for that, too much to say...
16:13 angular engineer can also watch this....nice video this one is I truly like it...
nice points!
Thank you 👍
One other thing to add to this about Vue being more of a framework with all of these things built-in, is their treeshaking. If there are a lot of things that you don't use that is built in, it will very effectively remove those things, making it very light.
I don't know if i really understood what you tried to say. But Vue 3 biggest update is the Composition API, take a look at it.
2 way binding - is immense
I know basic JavaScript, is it better to learn Vue.js or React.js ?
I've only got experience with Vue, but both React and Vue seem cool to me. It's not like you have to be loyal to one, you can use both of them if you want ;-)
I've been using both Vue.js and React.js for a while. And I can say that vue sucks when it comes to debugging. I don't know if TypeScript would help, but I was really disappointed when I tried to debug my code and couldn't. I've not tried that with react yet, but I'm very curious to see if react does better than vue.
I do prefer Vue over React in almost every aspect, but you are 100% correct, debugging is the one thing that Vue really needs work on. I'd have to check if Vue 3 has fixed that or not.
React is just JavaScript and React error messages are very verbal and easy to debug
Vue is awful at passing data between components, and the component methods like computed, etc. are obtuse and pointless, and don’t describe the Vue render lifecycle well. Idiosyncratic garbage that makes customizing the code needlessly painful.
@@chiefdan07 Yes I agree with you. I just tried debugging react app and it's really awesome. It works just as expected.
@@NoNo-pz4lm bingo
Amazed you thought directives are positive. Give me JS anytime
At my job I work with Angular and Vue seems pretty the equal to Angular in many of the concepts that you mention. For my personal projects I moved to React because of the intuitive way of doing this, all the you mention that is good in Vue is that what makes me move to React.
react only vs vue only without library definitely vue wins. so does it means React survive because of the 3rd party libraries.
when I learned react, I spend a lots of time on packages. which is kinda sucks.
I gonna use vue for the next project.
The best thing about Vue IMO is the Vue devtools briwser extension.
6:43 the second party is the user :)
The main thing keeping me from using vue is that there is no mature tiny version of it like preact for react. Petite-vue exists but seems unmaintained.
As a Vue & React Developer I am sad that you didn't talk about most important feature => Reactivity system in Vue especially proxy based reactivity system in Vue 3 that Vue does better then react
Wait for the next video! It’s in that one 😃
Merging everything on the same file is not good hahahaha
We need to separate responsibility and concerns as a good practice.
Aside from this, good work in showing these things. I'm starting in a new company that uses Vue, so I'm doing this transition.
Vue is progressive. You can lightly enhance existing HTML pages (for instance rendered by MVC frameworks like Rails, Django, etc.) by just adding the Vue.js script from CDN -- all the way up to a server-side rendered large-scale SPAs. You can do anything with this framework and everything like you said is treated as first class. The web was built with HTML, CSS and JS. Vue.js embraces this. Those in React who want to turn HTML into JS (JSX) or CSS into JS (Classnames) are just hacking the web for what it wasn't designed to do.
I'm a react/vue developer but I prefer vue
Have you tried Svelte :D?
*Sapper. Svelte is the library, Sapper is the framework based on Svelte. Kinda like React/NextJS
C'mon what about Angular?
composition API changed everything, Vue.js became so much better because of it. I'm now preferring Vue.js than React, and that is something I never thought I would say.
Why not switch to vue and leave react
What about Angular? Most big companies use Angular, not React or Vue even.
most is a strong word.. many is more correct.
Fiber?
@@NickPavlica Ooh. Thanks!
I love Vue and once I learned it and worked with it quite a bit, going back to writing react just feels like an obnoxious experience.
I'm married to React, and I'm NOT divorcing it! But you are making me jealous ;(
use them both man lol that's okay
I hate to say it but i vue your points!
🤦🏻
😎 aww yeah
For an absolute hack on the front end like I am, Vue is so much less complicated. I am lazy though 🙄
Vue has lesser boilerplate
I think vue.js is similar to angular, but with less code and easy to follow and use
The styleguide is the only thing that vue is better than react
i have used react and vue so my opinion is vue is the king ....
vue + 1, react and angular -2
vue for life...
It depends. If your goal is to create an app because you need this app, you may find Vue to be a path of least resistance. If you're a software engineer working on front-end code, my opinion is React is the better tool.
I'm primarily a Vue developer and right now I'm learning react (the company is asking me to) and I'm hating it, to be completely honest, it is unbelievable how React makes things so much more complex, I really don't understand why React is so popular, I guess it is because developers in general like to deal with complexity, if a new framework makes things simpler, then they don't like it
This is the best overview of Vue I've seen. I now have a way better understanding of why people choose Vue over React and where Vue sits in the never-ending Front End landscape. Thank you for being clear, concise and insightful.
Very welcome!
I like Vue and also love React but I just think the stones we threw at Angular for being too opionated, we are using those same stones to build Vue. When I see Vue I see Angular. Angular has directives, custom directives etc. And most of this so called abstraction from the get go. Hence I am really not impressed or surprised or shocked or even the least wowed. Leave React as library as it is and if you want to use a framework under the react umbrella -- you have Nextjs, Gatsby, Blitz etc. "People be acting like two legends can not coexist."
The main reason I hate Angular is zone.js. The concept of it compared to Vue's on-demand re-renders is so fuck*ng stupid.
You don't hire a vue engineer. You hire a javascript dev and give them the vue documentation
🙀
Still a hard no from me, the slots idea is the only thing I think react could steal. Composition pattern solves this but I think something native would be better
I really don't like the abstractions Vue puts on its underlying technologies, there's no need to reinvent the wheel
TS support is not a big deal to me. Typescript is definitely something I'm staying away from
Wait until you have to build a complex component that has you digging through the vdom API. You’re gonna have a bad time.
hmmm I see.....
So react somehow solves this issue?
@@ziad_jkhan Yes because passing data between components is painful in Vue, not in React
@@chiefdan07 Ok and how exactly is Vue making it that painful then?
@@chiefdan07 they way your go with vue is just to use vuex. And vuex is much more easier and faster to use than redux.
didnt like the disclaimer... you can do everything that react can do with vue but with vue you can do more and faster... not mentioning how easy its to learnwhich should be a huge factor taking in mind how expencive senior developers are.
Vue has no serious mobile offering. React hooks FTW.
Ionic vue ,pwa vue ,native script vue , quasar vue ?!!!!!
@@zealtypedcode3119 Ionic Vue was released a month ago. PWA isn't a mobile offering. Native Script... good luck getting answers and support with that one (~7k questions on stack overflow). Quasar has even less and it's basically using Ionic/Capacitor.
@@fooked1 I know but I believe there is potential for future adaptation also vue already supported different backend frameworks well I think vue strength will be versatility with different frameworks and speed of production
I don't think Directive Modifiers is an advantage of Vue over React. With React, I can use any javascript operators to manipulate my template (tsx), map, filter, for, if-else, ternary, ... Why I need Directive Modifiers when javascript is powerful enough :v
react is the winner
"Vuejs engineer" that sounds really strange
Vue has the same primary problem that Angular has. Lots of idiosyncratic, opaque black box code that you spend a lot of effort learning and even more time debugging because you never see inside the black box. React looks and feels like JavaScript. You have control, and also the responsibility to manage everything that is occurring in your app. I have never been stuck for hours on pointless bugs in React, because I have access to all the functionality. Good luck figuring out the obtuse ways that Vue manages data between components.
Vue for web-sites and React for web-apps.
I've used both and I actually prefer the reverse (Vue for Web-Apps). Vue to me is much easier to manage and organize, especially when trying to wrestle with state management. With react + redux, development for web-apps is a very slow burn, and I tend to see Vue + VueX handles state much better, by design, and Web-Apps, in my experience, requires a central store more often than web-sites. I just personally find Vue much easier to hit the ground running, while still being very flexible.
@@internet4543 Those who are using vue don't even now how react 16.8 has changed the game completely, no lifecycle methods, only hooks, create your own hook and use, composition is on a whole new level and best thing no magic. I don't want a framework that doesn't let me do more and more js but use directives that do all the magic. With useContext and useReducer, the use of redux became optional. If you even have to use redux for a very large site then also you just need to save user details and other things can go in context.
@Nebula React is the best but I like svelte to because no virtual dom and sleak size of the app itself makes it a compelling option for making basic sites with svelte.
FOR FREE !
Any js framework that does not support typescript properly will die. Vue3 does not support it properly, so it is loosing market share. Larger projects require typescript. jsx does complex ui rules way better than templates. vue has better reactive solution. vite is great if it can do all that we need. my 5 cents -)
I’m vue developer and just loved it. I have shifted from React to Vue around 2 years ago..
It is way better than React
Vue > React
Your hands constantly moving in view is a distraction.
Magic hands!
The fact is that the only thing react has against vue is community
Svelte does everything better than both of them.
router and state management is what makes Vue framework Dickhed, React you can use whatever you want that's why it's a lib....
Who is Dickhed?
Vuejs engineer? Too many fake engineer these days 😂