7:45 true only with options API. With composition API, in setup script in SFC, you can just import stuff and it automagically becomes available in the template
Hi Harry, I like your channel, and I loved your previous video about Vue. As a software engineer who wrote in Vue for a couple of years, and now at my company is working for over a year in React, I can definitely say that I know what you've ment regarding the directives. It looks a bit weird at the beginning but after a bit, let's say after a month, I do believe that you will be able to see the amazing benefits. The fact that it is just so clean and readable. In addition, you can use the v-for loops to loop over objects as well, something that you'll have to do extremely differently in react. I do hope you'll get to play with Vue a little bit more in the future and to see how great it is :)
I've coded 2 years in each as well as year of flutter. Prior to that it was a decade of JS/jQuery front end and YUI before that... Vanilla JS before that. My favorite is Vue3 composition API with script setup. The project I work on in react (current full time job) is more complex than anything I have built in vue3. I've had many UseEffect UseCallback nightmares with wierd race conditions and flakey automated tests with react testing library
My journey went like, angular to react to vue to react. 😅 Good thing to notice is, as we grow in our career we tend to move away from writing less code to gaining more control. Angular literally did everything for me. Vue made a good style guide to adhere to. React gave liberty, which may be bad for someone who has just begun web development as they can go for dirty shortcuts, but later on one sees the benefits. My background is Ruby on Rails engineering, whose motto is Convention over Configuration. I wish react in near future lays down some better application structuring guidelines. Kudos to you Harry for good work here. Following your videos from those early, react 16 announcement ones. 😅
Hmm I usually got a different impression, but of course it doesn't apply to everyone. People with more years of experience tend to use tools that do more out of the box for them (Angular in your example) and people with less years of experience tend to use stuff that requires more tinkering, but allows for more control in all aspects (Vue/React). At least that's how I experienced it with people. Might be just that more junior people still have more enthusiasm and are willing to endure pain while tinkering and setting everything up, while more senior people just want to get to work. Regarding React team setting some "standards", I wish they would release an official css-in-js approach, official router and official state management solution. Yeah I know React Context does exist for state, but that's not it really.
I think a lot of react devs have a very warped view about web. For instance, the initial instinct to find template weird but JSX to feel natural likely stems from a backend devs inexperience with actual front end things like html. Both JSX and templates are html markup. It's just one is consistent html markup and the other tries to force JS syntax onto html markup which is arguably much, much weirder. But it feels less weird because a lot of react devs likely never really learned to think in terms of html in the first place. A react dev looks at :class="function" and thinks "ew. A function in a string? What's that?" While im like, "thats... That's proper html." Meanwhile they will turn around and write "." And I'll be like "what in the actual fuck? How many different syntaxes are you going to use for the same block of code?" And then they will tell me shit like "react is just JS." My brother in Christ. No the fuck it's not. That's why you need to transpile it. Try running your JSX mess in JavaScript without using react. See what happens, I dare you
I went from React to Vue bc I changed my job. Honestly, these nit-pick differences are just things you get used to. I realized it makes your code at least more convient to write with v-if v-for v-show. Vuex is a piece of cake and it's actually pretty hard to mess up with the render optimization. What bugs me the most is when I end up violating the open-closed principle bc I can't just pass a jsx as a callback for a component slot (let's say I want a data-table type of component with custom styles for each column)... I think that is why React still scales a little better. I can see your point with non-standard syntax, but I can't just get over className and htmlFor (they should at least follow the same name pattern). I dont think the way React deals with IFs and FORs is very elegant or readable either... Overall, I'm sticking with whichever pays my bills😅
The first point is somewhat irrelevant. JSX is fully compatible with Vue3. Also for components, usage of script setup removes the redundancy of the components object. You can just import and use like React/Svelte. You can also definite emits like how you define props and gain full intellisense/eslint checking.
I enjoy React too. One thing however in the React world, is because the library is fairly flexible in the way you do things, we often end up with multiple React projects build by different teams almost day and night in the way it's build. At least with Vue those strict conventions would mean developers follow the same way of doing things.
I'm a student and have to deal with people with varying levels in web dev working on projects. Working on React makes a scary and messy codebase because of its free nature but choosing Vue makes me confident so that I can give a component to say: someone who only knows vanilla and they wont have problems developing it. Vue's strictness really helps keep things organized
I think it's the opposite. Vue has just way more ways to do the same things, and Vue developers tend to have no idea how the framework actually works, so they end up producing a lot of spaghetti code. (Try asking a Vue developer about how reactivity works, or what a virtual DOM node is.) And I don't agree that the Vue tooling is rock solid: working with linters and TypeScript is not so fun, especially when you need to create your own plugins to these tools.
What I learned from this video: Judging a framework by it's documentation from a biased and already opinionated perspective, leads to biased and false conclusions.
You dont like magic, but you use React?. Both this things are essentially magic... you get to a point you are not even writing JS any more. You are React "Engineer", this alone should be a GIANT RED FLAG. Imagine this conversation A: "im a washer machine engineer", B: "oh, so you design and build washer machines?", A: "no, you need an Engineer to use them....".
Be honest, you struggled to make this video didn’t you? Haha. The amount of forced nitpicking was painfully obvious. The segment where you spoke about “ref” and “reactive” is Vue 3.0 Composition API which is completely optional. The Options API is still fully valid and is not being replaced by the Composition API. How do you complain about the excess complexity of using refs and toRefs etc when that is exactly the way React is written with useState and useEffect etc?
And one more thing, I do not like to use the ref, that is presented in Vue 3. In case you had a chance to play with Vue 2 and the why you can structure the code that way, I find it much easier and cleaner to use for reactivity.
Agree with the sentiments, went down the "magic" route with Ember back in the day until I stated using React. I do like the Vue-cli tooling but can't say that I'm particularly fond of Nuxt.
1). Vue also accepts JSX .. But guess people don't really know, cause they don't recommend it as the default in their documentation. Cause JSX is not true to vanilla HTML/JS logic and what webdevelopment means. Have you tried to do a complex FOR / IF tree inside JSX ? it's crazy. Also i hate the "className" and class combination. 2) The directives are loosely documented, aside from v-if, v-for most of them should be used with the short-hand (easier to remember, easier to read). Eg: v-on:click="something" becomes @click="something" v-bind:href="variable" becomes :href="variable" Also directives open possibilities of custom callbacks for any html element. Example: you can write a v-outsideclick directive to detect outside clicks of the given element, and then just use v-outsideclick="action" And when you say "this knowledge is not transferable outside Vuejs" you are wrong, cause this is actually a lot closer to HTML/JS logic than JSX. But the issue nowdays is ppl start learning react before learning vanilla JS/HTML. 3) Reactivity is actually a lot easier and consistent in Vue. The prefered way is to simply use ref() .. almost/never reactive(). Yes, you have to use count.value to reference/get the value, but you also don;'t need to use a setter like in React. You simply say count.value = newValue; it;'s a more cohesive login in line with JS.
As a FE Dev, I use both.. I do use Vue.js in work. I have no issue at 10:34 also if you're writing Vue for long time. It is best to use the new Composition API way. I kind agree in the Component composition and Refs part. :)
Same I am learning React and the ternary operators are odd and the v-directives are quite on point. React will help me to polish on JS/TS as it's heavy there but prefer Vue.
Not sure if you realized it…When you start talking about reactivity you’re talking about the new composition API. That’s very different from the original & more simple options API way of doing things. The new composition API is purely additive. You don’t need to use it. It’s like React hooks versus the object syntax. The options API is much simpler, you don’t need to use “ref” or dereference with .value in the options api
Reactivity didn't exist in Vue 2, right? I am trying to compare the latest versions of Vue vs React as that's what each is pushing their users to use. Composition and Hooks respectively.
@@hswolff Reactivity existed in Vue 2. If it didn't exist, what kind of framework would it have been? It would have just been jQuery on steroids. Vue is NOT pushing users to use Composition Api. The composition API is for larger projects. The Options api (Vue2) will still be developed. Vue's goal is simplicity... the problem is Vue has grown to the point where corporations are now using it and they are using it in big projects and have greater needs; hence the Composition API.
FYI: That reads a bit agressive... I don't mean it to sound angry. Your videos are awesome. Also, I haven't watched your video that came before this one yet... I need to do so but haven't had time.
I've used Angular, Vue, React, and attempted Svelte some... What i've decided is the further away you get from raw JS, the more unnecessary complexity. They are all great frameworks, but React makes the most sense to me.
Me too. I also do old school vanilla js on some SSR MVC websites and the transition feels very natural to me. Unlike Angular for instance where it abstracts JavaScript so much and It feels like I'm using "The angular language" not a JavaScript framework
So the problem that is solved by Vue's templating language using directives is reactivity. It's Vue's way of introducing efficient reactivity into an environment that is based on a highly imperative style of programming (Javascript and DOM). React achieves a very similar outcome, but in a different way. I'd say React's way is more brute-force, as in, re-run the entire component function on every single prop/state change, write the changes to the virtual dom, and let the diffing algorithm go to town. While this approach is simple to understand and implement, it's not the most efficient solution out there (in my opinion), which is why Vue does beat React in some benchmarking tests. Vue uses templating and directives which it then compiles down to code that performs precise updates of the DOM. It needs a new language to achieve this, because you cannot write such declarative and reactive code in javascript. This is also why a lot of Vue's functionality seems so "magical". React lets you write code that feels a lot like javascript, which means that your components are essentially black-boxes for React. React cannot understand your code, so it just let's it run everytime there is a change, and compares the result. Vue on the other hand, understands directives, so it can look at your code and template, track the dependencies, and figure out the most efficient way to re-render the DOM. If you haven't already, I encourage you to check out this comparison between React and Vue on Vue's website - vuejs.org/v2/guide/comparison.html#React. Hope my rant made some sense!
Nope, it didn't make sense at all, we know what shit we are doing in react via react profiler and check the issues if our app has slow rendering. Let it be, I even don't care what other people use, and I don't need vue because it's typescript support is shit.
Great comparison! I agree that vue reactivity stuff like ref,reactive,computed are a bit involved. But I usually write with options api that takes care of all that, and only use those when I write a composable.
What I liked about learning React, and so is holding me back of learning something like Vue, is that for React you had to learn very little to get going, and gradually can extend that. It feels like you're just learning a pattern, and not so much a new template language with obviously smart and nifty things. And the nice thing is that you can extend that pattern to React Native too. So for me just starting with JS this was an easy decision, that I didn't have to learn something new or extra, but just could concentrate on writing good and clean code.
It is interesting because it was the opposite for me. I came from jquery, tried React, and the step was HUUUGE for a newbie. My thoughts were "wait, what the heck is import? and why browser wont let me use it? nothing works in here!" (of course I did not know about all the bundling and new ES stuff). And Vue.js kind of embraced me as a newbie, offering lots of sugar sintax and stuff that, even though I had to memorize, were much easier. And then, two years latter, going from Vue.js to React was a breeze, much easier, because then I understood stuff better (I still prefer Vue.js though).
@@eduardocamillo2698 Well yes, I have to agree, I had these things too. But many of those hills where mostly not really specific to React, but just related to, in my case, learning everything that's related to a React project environment, like dealing with Webpack, Babel, functional programming, that's also useful in a broader scope. And sometimes I was a but unfortunate too, thinking that Styled Components was a cool thing, but these things can happen, it at least helped me to develop a opinion on what paradigm I like or not.
I watched both your Vue Vs Reactive videos. I have been learning Vue for about a year now and I found Vue easier to learn than react when I started. That was the main reason I chose it. If you were new to both what would u have chosen?
Vue's state management does *dependency tracking*, which is much more that you get with `useState`. It's like MobX in React, and that one has exactly the same weird distinction between objects created with `observable({...})` and primitive values created with `observable.box(...)`. Dependency tracking rocks and you really want it!
With directives, it's very similar to the AMP framework. Instead of v-bind:href="url" it would be either data-amp-bind-href="url" or with square brackets [href]="url". This actually makes me excited to learn Vue now. Thanks!
The vue template knowledge is transferable / interchangeable to other templating languages / frameworks like Django / Mustache / Jinja etc... ;). I've just startet diving in to react and I can see how this is nice for a JS developer. But for someone who uses many languages I think Vue was pretty straight foreward :). But again, React for JS makes "more sense". (And Vue is also nice to just drop in a vanilla html file for smaller stuff :) )
First both are unique in there own way, your react developer so you comfortable with react in the same way Vue developer comfortable with vue only, if both want similar then there is no need to introduce another framework.
Like I am getting that you are speaking from the perspective of a React developer. And while I can agree that to be efficient with Vue you have to learn something at the very least, I have to say that this statement also in 100% applies to React. I feel like overall video feels weak and low key misinformation. For example statement that directives are unique to Vue. I totally agree that there are no straight forward directives in React, at the very minimum you could use the knowledge in Angular(just replace v- with ng-), even without mentioning custom directives libraries that you can add to React and use them in JSX. Another example is React being vanilla as close as possible. Yes, but I can't remember exactly className attribute on HTML elements. In the same as there is no @change attribute. Both are framework specific. I guess, what I am trying to say here is that I feel that the video is laking preparation and you haven't used or build anything with Vue and only read the surface documentation to make a feedback video. Please correct me if I'm wrong. I hope you got more experience with Vue since the time of the video.
7:05 hahah I agree it's nitpicky, but the same thing bothered me for some reason when I was messing around with Vue. I mean, so much stuff is already "magic" and "just works", I'm wondering why couldn't they do this component registration automatically? I'm quite sure they could somehow automate that and also maybe exclude from the final bundle those components that you imported, but don't use anywhere inside your template for whatever reason.
There is some solutions for that. For example Nuxt.js (A framework upon Vue like Next.js), has this option. It scanned your component directory (Nuxt requires you to write your components there) and auto import them if he see that you're using them inside your template github.com/nuxt/components
I like the content but i think i do not agree with the comparison “only specific to Vue”. There are tons of things which are specific to React as well. They have their own specifics and that’s why they are different frameworks...
The two main points i like about vue, 1 is the way they divide your html code from js and it makes much cleaner code. 2 point is that I do not have to worry about vue rendering unnecessary components. It renders only those components who has any changes rather than by default rendering all child components if parent has changes
The last thing i want to say is that, i have been vue developer from first and recently i am switching to React. I like both frameworks, i just did not wanted someone to have some mis-information with vue because it really has a great potential
With React, you are just learning JavaScript. No magic and unknown effects. And almost everything you have learned with React can be transferred to any domain 'cause it's just JavaScript and JavaScript, well.. is everywhere.
@@hswolff Yeah I did. And I feed the safe that both frameworks are great! Even though I was Vue developer, I used to watch your react videos! It was just my opinion on the comparison method. I hope it is not hurting too much to anyone!
On the event subject. I like the way it functions (and that is even easier if you use a v-model instead). On React sometimes when I need this type of communication I have to pass down callback functions that will be called on an onChange function (like in a very basic controlled input component that has to send its value to the parent form). And well, if you think about it, it both are very similar approaches with different names. But is just more automatic with Vue. I think that's the strength of Vue. It knows some very common things that we as developers need to make and built them in the core framework. But in the end, they both are very similar solutions. All comparisons that I've already made or seen been made feel like nitpicking because maybe it is. And yeah, I think the 'v-for' syntax kinda bad. And the fact that the same tag cannot have a v-for and a v-if too. If you only want to render and v-for tag on a condition, you need to put some div or whatever tag to wrap up and put the v-if on it.
And about the ref/reactive things. It looked a bit overwhelmed to me, the first time I see it. But using it, is actually great. I feel it like a more mature Hooks implementation than React Hooks itself. That has its own lots of little things to be aware of and even needs specifics eslint rules to help you don't break the code. In Vue you just use it, nothing will be potentially broken if you don't follow a specific rule
As someone who uses React, this video gave me some headaches. It doesn't resemble Javascript to me. It looks like I am writing goddam Razor in a Dotnet project which is really messing with my thinking. Would love to check out though.
My bet is that the necessity to whitelist is meant to be a security feature. They still recommend not to trust templates, but they do other things that help not to do stupid things.
I find Vue very inelegant both on the surface (all those hideous @, $, #) and in depth (take the syntax of scoped slots and how awkward they feel when using them). I also really don't get the hype of SFCs when all they do is create massive files and working against you when you want to extract a few lines of template to increase readability. But to each their own I guess....
I have Svelte videos! Check out these videos: ruclips.net/video/TPVQ3M9b6CY/видео.html ruclips.net/video/RS1GpKxCoIA/видео.html ruclips.net/video/48gHuY4w0hY/видео.html
I enjoyed both videos on your view of pros and cons. v-for is great :D even I understand how it works and I am a beginner except for doing some html 15 years ago JSX makes my brain hurt haha :)
Jeez! I the part of the components registration is so misleading. You can globally register a component one time for all other components to use and access this one. Better do this if you this component is meant to be reusable.
I'm learning JavaScript now. I'm researching what to learn next, Vue or react. If reactors more similarity with vanilla JS, I will like to check that. But it has a poor documentation as I hear, so I'm still undecided. I'd like to keep developing my vanilla JS skills. React may be better for that.
Vue has no serious mobile game. React hooks quashed all previous debates on Vue being easier to work with. However Vue CLI is way better than Create React App... but you can always use Razzle.js which is similar to Vue CLI.
I don't understand how you can say 6:05 you need to learn onclick, onchange, onkeydown and that's better.. But Vue directives literally require you to learn those. Even in your example of href... you are using vue to bind a property to an HTML tag. The knowledge needed of HTML is the same because without it you would have no idea what you are binding to in Vue.
As a vue developer, I am also perplexed with changes introduced in v3, I might now know everything about the framework but I have the impression that all of a component’s data is reactive so I don’t understand the reason for the ref() thing...
The reactive engine in vue 3, was well design honestly, When you try to understand how proxy object works, then you will understand why the ref is designed that way. Plus the fact that i can use ref outside of vue project is great
Vue 3 reactivity is opt-in, nothing is reactive until you make it. Think about ref the same way as React's useState, both immutable, but in React you use setSomething to change its value, and in Vue, the ref function returns am object with a single property which you can mutate (.value).
you just said that its like complex, but you didn't show with comparison how it does with react, so that we can know how it is simpler with react for same thing
Most of the reactive issues listed ( refs, reactive) are from version 3 in the composition API. Im not a fan either. But v2 previous version makes 2 way binding truly “magical “. In case you like that 🤷♂️😅
You actually can pass props as a callback in Vue, but it's considered to be an anti-pattern. React has a two-ways data-flow, If you have a callback prop your components are tightly coupled. When you want to reuse your Child with a different Parent that has a different callback, it became messy. On the other hand, Vue has a one-way data flow: Child events are separated from Parent. Take a look at the example in this article: medium.com/js-dojo/passing-functions-as-props-an-anti-pattern-in-vue-js-b542fc0cf5d
vue is "html with superpowers". when I started in Front End i really love it. and in React. well. it's hard on the beggining. but after some time almost forced to use it. it's still looks like the beggining XD. just kidding but for me something like Alpine or Vue. is much , much more intuitive to the eyes of a begginer. and I was a begginer 5 years ago. even now I can use React i really miss Vue. a lot.
Plz also talk about angular if possible, what it does better than both react and vue... what it doesn't. Once again, I'm talking about Angular, not AngularJS.
I am a Vue developer and I used to complain about the difficulties with React but when looking back it wasn''t really React I had issues with it was always the over complications of Redux, which is typically used with React. I would love to see a Vuex equivalent for React, something simple and useful. Redux is just a nightmare. If anyone knows of another state management I can use with React that is similar to Vuex please let me know!
I dont know why somebody should use react in 2022. Vue.js and svelte arent unecessary bloated up like react and they are more user friendly to use then react.
@@hswolff about that... i closed it because how much deno has changed, you'd be better off redoing it. do check out the new release coming out tomorrow. i heard they added treeshaking.
You're wrong. Vue is the best tool around. But, as we know, the better tool isn't always the one heavily used for reasons. React somehow took the market, that's why we use it =/
A framework is supposed to do the magic for you. If you're using JSX you're using a lot of magic, hooks, magic, using reach router... magic. After some time, we should stop thinking of ourselves as React, Vue, Angular, whatever engineer. Once you have a wide breadth of knowledge you'll find that everything is trying to do the same thing in their own special way. Learn the computer science and stystem design behind and your career will thank you.
As a React dev, I feel like Vue looks just like Angular, but single file components instead of everything being split into their own files (html, css, ts)
I really dislike how the logic of a component gets shoehorned into the different component methods like computed. Also, the value binding to component props where you use colon, v-bind, or nothing is obtuse. React is JavaScript. Vue has so much framework particular code that is not intuitive with lots of black box magic, so you have no idea what’s going on. Vue is easily one of the most frustrating frameworks I have worked with.
"I don't like magic anymore..." Yep, definitely a React developer. 😜
Also definitely a Node developer. *cries in rails*
lol, it's very true hahaha
@@aforty1 yes, also cries in laravel
7:45 true only with options API. With composition API, in setup script in SFC, you can just import stuff and it automagically becomes available in the template
Hi Harry,
I like your channel, and I loved your previous video about Vue.
As a software engineer who wrote in Vue for a couple of years, and now at my company is working for over a year in React, I can definitely say that I know what you've ment regarding the directives.
It looks a bit weird at the beginning but after a bit, let's say after a month, I do believe that you will be able to see the amazing benefits.
The fact that it is just so clean and readable.
In addition, you can use the v-for loops to loop over objects as well, something that you'll have to do extremely differently in react.
I do hope you'll get to play with Vue a little bit more in the future and to see how great it is :)
Watching this video while building a Vue app.
hahaha
If you hate Vue's template syntax, you can write JSX in a render function as well..
but then if you have to write jsx then why use vue? why every library try to copy react and not come up with something new
I've coded 2 years in each as well as year of flutter. Prior to that it was a decade of JS/jQuery front end and YUI before that... Vanilla JS before that.
My favorite is Vue3 composition API with script setup. The project I work on in react (current full time job) is more complex than anything I have built in vue3.
I've had many UseEffect UseCallback nightmares with wierd race conditions and flakey automated tests with react testing library
My journey went like, angular to react to vue to react. 😅
Good thing to notice is, as we grow in our career we tend to move away from writing less code to gaining more control.
Angular literally did everything for me. Vue made a good style guide to adhere to.
React gave liberty, which may be bad for someone who has just begun web development as they can go for dirty shortcuts, but later on one sees the benefits.
My background is Ruby on Rails engineering, whose motto is Convention over Configuration. I wish react in near future lays down some better application structuring guidelines.
Kudos to you Harry for good work here. Following your videos from those early, react 16 announcement ones. 😅
Hmm I usually got a different impression, but of course it doesn't apply to everyone. People with more years of experience tend to use tools that do more out of the box for them (Angular in your example) and people with less years of experience tend to use stuff that requires more tinkering, but allows for more control in all aspects (Vue/React). At least that's how I experienced it with people. Might be just that more junior people still have more enthusiasm and are willing to endure pain while tinkering and setting everything up, while more senior people just want to get to work.
Regarding React team setting some "standards", I wish they would release an official css-in-js approach, official router and official state management solution. Yeah I know React Context does exist for state, but that's not it really.
Thanks for the great comment! Well said all around! Glad to have you as a viewer for that long!
I think a lot of react devs have a very warped view about web. For instance, the initial instinct to find template weird but JSX to feel natural likely stems from a backend devs inexperience with actual front end things like html. Both JSX and templates are html markup. It's just one is consistent html markup and the other tries to force JS syntax onto html markup which is arguably much, much weirder. But it feels less weird because a lot of react devs likely never really learned to think in terms of html in the first place.
A react dev looks at :class="function" and thinks "ew. A function in a string? What's that?"
While im like, "thats... That's proper html."
Meanwhile they will turn around and write "." And I'll be like "what in the actual fuck? How many different syntaxes are you going to use for the same block of code?"
And then they will tell me shit like "react is just JS."
My brother in Christ. No the fuck it's not. That's why you need to transpile it. Try running your JSX mess in JavaScript without using react. See what happens, I dare you
I went from React to Vue bc I changed my job. Honestly, these nit-pick differences are just things you get used to. I realized it makes your code at least more convient to write with v-if v-for v-show. Vuex is a piece of cake and it's actually pretty hard to mess up with the render optimization. What bugs me the most is when I end up violating the open-closed principle bc I can't just pass a jsx as a callback for a component slot (let's say I want a data-table type of component with custom styles for each column)... I think that is why React still scales a little better. I can see your point with non-standard syntax, but I can't just get over className and htmlFor (they should at least follow the same name pattern). I dont think the way React deals with IFs and FORs is very elegant or readable either... Overall, I'm sticking with whichever pays my bills😅
Vue code just looks much cleaner. It's easier to loose your mind reading React components haha :D
You can use Vue dynamic components and pass them as props to be mounted downstream
What i need is just a ❤️ to vue, i use vue finally
Very well put, I enjoyed hearing your reasoning. Keep it up!
The first point is somewhat irrelevant. JSX is fully compatible with Vue3. Also for components, usage of script setup removes the redundancy of the components object. You can just import and use like React/Svelte. You can also definite emits like how you define props and gain full intellisense/eslint checking.
I enjoy React too.
One thing however in the React world, is because the library is fairly flexible in the way you do things, we often end up with multiple React projects build by different teams almost day and night in the way it's build. At least with Vue those strict conventions would mean developers follow the same way of doing things.
True. One of the explicit differences between a library and framework.
I'm a student and have to deal with people with varying levels in web dev working on projects. Working on React makes a scary and messy codebase because of its free nature but choosing Vue makes me confident so that I can give a component to say: someone who only knows vanilla and they wont have problems developing it. Vue's strictness really helps keep things organized
true
It might result in bad practice
I think it's the opposite. Vue has just way more ways to do the same things, and Vue developers tend to have no idea how the framework actually works, so they end up producing a lot of spaghetti code. (Try asking a Vue developer about how reactivity works, or what a virtual DOM node is.)
And I don't agree that the Vue tooling is rock solid: working with linters and TypeScript is not so fun, especially when you need to create your own plugins to these tools.
What I learned from this video:
Judging a framework by it's documentation from a biased and already opinionated perspective, leads to biased and false conclusions.
You dont like magic, but you use React?. Both this things are essentially magic... you get to a point you are not even writing JS any more. You are React "Engineer", this alone should be a GIANT RED FLAG. Imagine this conversation A: "im a washer machine engineer", B: "oh, so you design and build washer machines?", A: "no, you need an Engineer to use them....".
Be honest, you struggled to make this video didn’t you? Haha. The amount of forced nitpicking was painfully obvious. The segment where you spoke about “ref” and “reactive” is Vue 3.0 Composition API which is completely optional. The Options API is still fully valid and is not being replaced by the Composition API. How do you complain about the excess complexity of using refs and toRefs etc when that is exactly the way React is written with useState and useEffect etc?
useState is way better than ref and reactive
And one more thing,
I do not like to use the ref, that is presented in Vue 3.
In case you had a chance to play with Vue 2 and the why you can structure the code that way, I find it much easier and cleaner to use for reactivity.
There is no reactivity caveats in vue 3 because you strictly diferentitate `.value`
Agree with the sentiments, went down the "magic" route with Ember back in the day until I stated using React. I do like the Vue-cli tooling but can't say that I'm particularly fond of Nuxt.
1). Vue also accepts JSX .. But guess people don't really know, cause they don't recommend it as the default in their documentation. Cause JSX is not true to vanilla HTML/JS logic and what webdevelopment means. Have you tried to do a complex FOR / IF tree inside JSX ? it's crazy. Also i hate the "className" and class combination.
2) The directives are loosely documented, aside from v-if, v-for most of them should be used with the short-hand (easier to remember, easier to read). Eg:
v-on:click="something" becomes @click="something"
v-bind:href="variable" becomes :href="variable"
Also directives open possibilities of custom callbacks for any html element. Example: you can write a v-outsideclick directive to detect outside clicks of the given element,
and then just use v-outsideclick="action"
And when you say "this knowledge is not transferable outside Vuejs" you are wrong, cause this is actually a lot closer to HTML/JS logic than JSX.
But the issue nowdays is ppl start learning react before learning vanilla JS/HTML.
3) Reactivity is actually a lot easier and consistent in Vue. The prefered way is to simply use ref() .. almost/never reactive().
Yes, you have to use count.value to reference/get the value, but you also don;'t need to use a setter like in React.
You simply say count.value = newValue; it;'s a more cohesive login in line with JS.
As a FE Dev, I use both.. I do use Vue.js in work. I have no issue at 10:34 also if you're writing Vue for long time. It is best to use the new Composition API way. I kind agree in the Component composition and Refs part. :)
I don;t know, for me the points presented are actually among the top reasons I like Vue over Raact.
Same I am learning React and the ternary operators are odd and the v-directives are quite on point. React will help me to polish on JS/TS as it's heavy there but prefer Vue.
Except Vue3 ref() and *.value syntax.
Not sure if you realized it…When you start talking about reactivity you’re talking about the new composition API.
That’s very different from the original & more simple options API way of doing things.
The new composition API is purely additive. You don’t need to use it.
It’s like React hooks versus the object syntax.
The options API is much simpler, you don’t need to use “ref” or dereference with .value in the options api
Reactivity didn't exist in Vue 2, right? I am trying to compare the latest versions of Vue vs React as that's what each is pushing their users to use. Composition and Hooks respectively.
@@hswolff Reactivity existed in Vue 2. If it didn't exist, what kind of framework would it have been? It would have just been jQuery on steroids.
Vue is NOT pushing users to use Composition Api. The composition API is for larger projects. The Options api (Vue2) will still be developed. Vue's goal is simplicity... the problem is Vue has grown to the point where corporations are now using it and they are using it in big projects and have greater needs; hence the Composition API.
FYI: That reads a bit agressive... I don't mean it to sound angry. Your videos are awesome. Also, I haven't watched your video that came before this one yet... I need to do so but haven't had time.
I'd love to do a recorded Zoom where we discuss these things and share on our channels.
@@DedicatedManagers lol I need you as my friend. worrying about others feelings is a rare quality these days.
I've written a lot of vue.js and I've never seen useRef, is that something from vue3?
I've used Angular, Vue, React, and attempted Svelte some... What i've decided is the further away you get from raw JS, the more unnecessary complexity. They are all great frameworks, but React makes the most sense to me.
@Nebula but those .svelte file extensions 🤢
@Nebula no, not really. Where in JS can you do $: doubled = count * 2;? And {#if user.loggedIn}?
Me too. I also do old school vanilla js on some SSR MVC websites and the transition feels very natural to me. Unlike Angular for instance where it abstracts JavaScript so much and It feels like I'm using "The angular language" not a JavaScript framework
To be honest, SVELTE templates is cleaner and makes more sense to me than Angular or Vue
{ #for } is better than ngFor or v-for
That's why I loke Solidjs; it's very minimal and close to the DOM.
So the problem that is solved by Vue's templating language using directives is reactivity. It's Vue's way of introducing efficient reactivity into an environment that is based on a highly imperative style of programming (Javascript and DOM). React achieves a very similar outcome, but in a different way. I'd say React's way is more brute-force, as in, re-run the entire component function on every single prop/state change, write the changes to the virtual dom, and let the diffing algorithm go to town. While this approach is simple to understand and implement, it's not the most efficient solution out there (in my opinion), which is why Vue does beat React in some benchmarking tests. Vue uses templating and directives which it then compiles down to code that performs precise updates of the DOM. It needs a new language to achieve this, because you cannot write such declarative and reactive code in javascript. This is also why a lot of Vue's functionality seems so "magical".
React lets you write code that feels a lot like javascript, which means that your components are essentially black-boxes for React. React cannot understand your code, so it just let's it run everytime there is a change, and compares the result. Vue on the other hand, understands directives, so it can look at your code and template, track the dependencies, and figure out the most efficient way to re-render the DOM.
If you haven't already, I encourage you to check out this comparison between React and Vue on Vue's website - vuejs.org/v2/guide/comparison.html#React.
Hope my rant made some sense!
Reactivity means things out of your control. It's just good for demo apps. For bigger app it's jsut hell.
Nope, it didn't make sense at all, we know what shit we are doing in react via react profiler and check the issues if our app has slow rendering. Let it be, I even don't care what other people use, and I don't need vue because it's typescript support is shit.
Truee
Hey Harry, so glad you are back on RUclips. Missed the console log.
Hey Edwin! Glad you found me again!
Great comparison! I agree that vue reactivity stuff like ref,reactive,computed are a bit involved. But I usually write with options api that takes care of all that, and only use those when I write a composable.
I think you can also use JSX with Vue
You can, yet not many use it. Goes to show what people prefer when they have an option.
yes there's an official babel plugin but also it has it's own quirks and gotchas, like for using slots, slot-scopes inside jsx.
What I liked about learning React, and so is holding me back of learning something like Vue, is that for React you had to learn very little to get going, and gradually can extend that. It feels like you're just learning a pattern, and not so much a new template language with obviously smart and nifty things. And the nice thing is that you can extend that pattern to React Native too. So for me just starting with JS this was an easy decision, that I didn't have to learn something new or extra, but just could concentrate on writing good and clean code.
It is interesting because it was the opposite for me. I came from jquery, tried React, and the step was HUUUGE for a newbie. My thoughts were "wait, what the heck is import? and why browser wont let me use it? nothing works in here!" (of course I did not know about all the bundling and new ES stuff). And Vue.js kind of embraced me as a newbie, offering lots of sugar sintax and stuff that, even though I had to memorize, were much easier. And then, two years latter, going from Vue.js to React was a breeze, much easier, because then I understood stuff better (I still prefer Vue.js though).
@@eduardocamillo2698 Well yes, I have to agree, I had these things too. But many of those hills where mostly not really specific to React, but just related to, in my case, learning everything that's related to a React project environment, like dealing with Webpack, Babel, functional programming, that's also useful in a broader scope. And sometimes I was a but unfortunate too, thinking that Styled Components was a cool thing, but these things can happen, it at least helped me to develop a opinion on what paradigm I like or not.
I watched both your Vue Vs Reactive videos. I have been learning Vue for about a year now and I found Vue easier to learn than react when I started. That was the main reason I chose it. If you were new to both what would u have chosen?
Learning it may be easy but getting a job is tough....
@@saravanan.r5079 Well if there is less people learning it getting a job is easier than you think
Vue's state management does *dependency tracking*, which is much more that you get with `useState`.
It's like MobX in React, and that one has exactly the same weird distinction between objects created with `observable({...})` and primitive values created with `observable.box(...)`.
Dependency tracking rocks and you really want it!
I’ve never heard someone pronounce href like that before, imma have to start saying that.
timestamp?
@@dipzera1025 4:34
Hahaha, yeah dunno why, always have.
Haha “he ref”
With directives, it's very similar to the AMP framework. Instead of v-bind:href="url" it would be either data-amp-bind-href="url" or with square brackets [href]="url". This actually makes me excited to learn Vue now. Thanks!
Vue developers do not use v-bind:href="url" but use shortcut :href="url" instead, that make more sense
The vue template knowledge is transferable / interchangeable to other templating languages / frameworks like Django / Mustache / Jinja etc... ;). I've just startet diving in to react and I can see how this is nice for a JS developer. But for someone who uses many languages I think Vue was pretty straight foreward :). But again, React for JS makes "more sense".
(And Vue is also nice to just drop in a vanilla html file for smaller stuff :) )
Depending on one's point of view, I prefer vuejs.
First both are unique in there own way, your react developer so you comfortable with react in the same way Vue developer comfortable with vue only, if both want similar then there is no need to introduce another framework.
Like I am getting that you are speaking from the perspective of a React developer. And while I can agree that to be efficient with Vue you have to learn something at the very least, I have to say that this statement also in 100% applies to React. I feel like overall video feels weak and low key misinformation. For example statement that directives are unique to Vue. I totally agree that there are no straight forward directives in React, at the very minimum you could use the knowledge in Angular(just replace v- with ng-), even without mentioning custom directives libraries that you can add to React and use them in JSX. Another example is React being vanilla as close as possible. Yes, but I can't remember exactly className attribute on HTML elements. In the same as there is no @change attribute. Both are framework specific.
I guess, what I am trying to say here is that I feel that the video is laking preparation and you haven't used or build anything with Vue and only read the surface documentation to make a feedback video. Please correct me if I'm wrong. I hope you got more experience with Vue since the time of the video.
7:05 hahah I agree it's nitpicky, but the same thing bothered me for some reason when I was messing around with Vue. I mean, so much stuff is already "magic" and "just works", I'm wondering why couldn't they do this component registration automatically? I'm quite sure they could somehow automate that and also maybe exclude from the final bundle those components that you imported, but don't use anywhere inside your template for whatever reason.
Yep, agreed! Do mooore Vue!
There is some solutions for that. For example Nuxt.js (A framework upon Vue like Next.js), has this option. It scanned your component directory (Nuxt requires you to write your components there) and auto import them if he see that you're using them inside your template github.com/nuxt/components
Also if you're using Vite in Vue 3, there is a plugin for that github.com/antfu/vite-plugin-components
@@shutterradio good to know. Thanks!
With script setup syntax actually you can register components in one line. Just import it and use in template.
I like the content but i think i do not agree with the comparison “only specific to Vue”. There are tons of things which are specific to React as well. They have their own specifics and that’s why they are different frameworks...
The two main points i like about vue, 1 is the way they divide your html code from js and it makes much cleaner code. 2 point is that I do not have to worry about vue rendering unnecessary components. It renders only those components who has any changes rather than by default rendering all child components if parent has changes
The last thing i want to say is that, i have been vue developer from first and recently i am switching to React. I like both frameworks, i just did not wanted someone to have some mis-information with vue because it really has a great potential
With React, you are just learning JavaScript. No magic and unknown effects. And almost everything you have learned with React can be transferred to any domain 'cause it's just JavaScript and JavaScript, well.. is everywhere.
Yep, both have their strengths! You saw my previous video right? About what I like more about Vue?
Each def has their own strengths and weaknesses.
@@hswolff Yeah I did. And I feed the safe that both frameworks are great! Even though I was Vue developer, I used to watch your react videos! It was just my opinion on the comparison method. I hope it is not hurting too much to anyone!
On the event subject. I like the way it functions (and that is even easier if you use a v-model instead). On React sometimes when I need this type of communication I have to pass down callback functions that will be called on an onChange function (like in a very basic controlled input component that has to send its value to the parent form).
And well, if you think about it, it both are very similar approaches with different names. But is just more automatic with Vue.
I think that's the strength of Vue. It knows some very common things that we as developers need to make and built them in the core framework. But in the end, they both are very similar solutions. All comparisons that I've already made or seen been made feel like nitpicking because maybe it is.
And yeah, I think the 'v-for' syntax kinda bad. And the fact that the same tag cannot have a v-for and a v-if too. If you only want to render and v-for tag on a condition, you need to put some div or whatever tag to wrap up and put the v-if on it.
And about the ref/reactive things. It looked a bit overwhelmed to me, the first time I see it. But using it, is actually great.
I feel it like a more mature Hooks implementation than React Hooks itself. That has its own lots of little things to be aware of and even needs specifics eslint rules to help you don't break the code. In Vue you just use it, nothing will be potentially broken if you don't follow a specific rule
As someone who uses React, this video gave me some headaches. It doesn't resemble Javascript to me. It looks like I am writing goddam Razor in a Dotnet project which is really messing with my thinking. Would love to check out though.
I like vue though my first framework is vue
Yo i am a CSS Engineer. Is the term "engineer" being tossed a round these days?
Hell yeah! Do it up!
I am HTML 4 engineer, learning HTML 5 in 2021
My bet is that the necessity to whitelist is meant to be a security feature. They still recommend not to trust templates, but they do other things that help not to do stupid things.
I find Vue very inelegant both on the surface (all those hideous @, $, #) and in depth (take the syntax of scoped slots and how awkward they feel when using them). I also really don't get the hype of SFCs when all they do is create massive files and working against you when you want to extract a few lines of template to increase readability.
But to each their own I guess....
Agreed. Recently switched from React to Vue for work and I must say those hideous signs are annoying
Readability goes out of the window when you look at jsx mess.
You could use import function in the components :)
Loving this videos. Would curious to hear your thoughts on Svelte?
I have Svelte videos! Check out these videos:
ruclips.net/video/TPVQ3M9b6CY/видео.html
ruclips.net/video/RS1GpKxCoIA/видео.html
ruclips.net/video/48gHuY4w0hY/видео.html
React for me is like using PHP inside your HTML without a template engine. React is just too ugly for me.
I enjoyed both videos on your view of pros and cons.
v-for is great :D even I understand how it works and I am a beginner except for doing some html 15 years ago
JSX makes my brain hurt haha :)
Jeez! I the part of the components registration is so misleading. You can globally register a component one time for all other components to use and access this one. Better do this if you this component is meant to be reusable.
Vue reminds me a lot of knockoutjs. I haven't used Vue. But that is what it reminds me of. Seems like they are almost the same.
Yes Vue is based on knockout, could have been knockout v2
I'm learning JavaScript now. I'm researching what to learn next, Vue or react. If reactors more similarity with vanilla JS, I will like to check that. But it has a poor documentation as I hear, so I'm still undecided. I'd like to keep developing my vanilla JS skills. React may be better for that.
You could start learning both, I think it'll be pretty clear what you prefer once you start using them. Also check Svelte, it's pretty cool as well.
@@ChumX100So best advice is to start learning 3 frameworks at once huh? Got it
Best comparison videos out there. Tnx!
Vue has no serious mobile game. React hooks quashed all previous debates on Vue being easier to work with. However Vue CLI is way better than Create React App... but you can always use Razzle.js which is similar to Vue CLI.
Dont u think that maybe comparing a framework vs a library is the reason u find these differences?
check out global registration bro ;) one line to register a component in all other components
I don't understand how you can say 6:05 you need to learn onclick, onchange, onkeydown and that's better.. But Vue directives literally require you to learn those. Even in your example of href... you are using vue to bind a property to an HTML tag. The knowledge needed of HTML is the same because without it you would have no idea what you are binding to in Vue.
"Historically a React engineer"....sure, make me feel old. Javascript was just a fledgling, "fun" tool when I started building websites.
As a vue developer, I am also perplexed with changes introduced in v3, I might now know everything about the framework but I have the impression that all of a component’s data is reactive so I don’t understand the reason for the ref() thing...
The reactive engine in vue 3, was well design honestly, When you try to understand how proxy object works, then you will understand why the ref is designed that way. Plus the fact that i can use ref outside of vue project is great
Vue 3 reactivity is opt-in, nothing is reactive until you make it. Think about ref the same way as React's useState, both immutable, but in React you use setSomething to change its value, and in Vue, the ref function returns am object with a single property which you can mutate (.value).
you just said that its like complex, but you didn't show with comparison how it does with react, so that we can know how it is simpler with react for same thing
Most of the reactive issues listed ( refs, reactive) are from version 3 in the composition API. Im not a fan either. But v2 previous version makes 2 way binding truly “magical “. In case you like that 🤷♂️😅
yeah I tried to learn vue 3 but damn that syntax is annoying nd difficult, I went back to vue 2 😂
You actually can pass props as a callback in Vue, but it's considered to be an anti-pattern. React has a two-ways data-flow, If you have a callback prop your components are tightly coupled. When you want to reuse your Child with a different Parent that has a different callback, it became messy. On the other hand, Vue has a one-way data flow: Child events are separated from Parent. Take a look at the example in this article: medium.com/js-dojo/passing-functions-as-props-an-anti-pattern-in-vue-js-b542fc0cf5d
vue is "html with superpowers". when I started in Front End i really love it. and in React. well. it's hard on the beggining. but after some time almost forced to use it. it's still looks like the beggining XD. just kidding but for me something like Alpine or Vue. is much , much more intuitive to the eyes of a begginer. and I was a begginer 5 years ago. even now I can use React i really miss Vue. a lot.
What u think abt angular
Here we go
Plz also talk about angular if possible, what it does better than both react and vue... what it doesn't. Once again, I'm talking about Angular, not AngularJS.
Yoh, I know you've recently invested in that green screen, but what about the sound?
I have a good mic, problem is the room is just echoey. That problem I can’t fix until I get a better office.
@@hswolff Yes, it's not the mic, but some more decoration in that room, maybe some curtains. Plants maybe?
learning react is easy without learning 3rd party libraries which is necessary.
I am a Vue developer and I used to complain about the difficulties with React but when looking back it wasn''t really React I had issues with it was always the over complications of Redux, which is typically used with React. I would love to see a Vuex equivalent for React, something simple and useful. Redux is just a nightmare. If anyone knows of another state management I can use with React that is similar to Vuex please let me know!
Couldn't agree more. React Redux plust it's ecosystem like "redux saga" etc... is way more complicated than Vuex.
Redux and Vuex is just similar.. you just need to keep using it in order for you to understand well, on how it works.. they both same pattern.
I dont know why somebody should use react in 2022. Vue.js and svelte arent unecessary bloated up like react and they are more user friendly to use then react.
are you going to try your hands at Deno sometime again?
It's on the long todo list. I do hope to record merging in your PR (eventually)!
@@hswolff about that... i closed it because how much deno has changed, you'd be better off redoing it. do check out the new release coming out tomorrow. i heard they added treeshaking.
Nice! Ok. Good to know, thank you!
You're wrong.
Vue is the best tool around. But, as we know, the better tool isn't always the one heavily used for reasons. React somehow took the market, that's why we use it =/
I did like your previous video, but this video doesn't make sense and seems illogical.
Actually good points
Thanks!
Vue.js looks very similar in it's templating system as Angular 2.0. Heh, anyone care about Angular anymore? :)
Level of complexity (where 1 is easy and 10 is hard)
Angular: 8
Vue: 3
React: 4
Svelte: 1 💪
Your type is vanilla js there is less magic :D
vue dx and performance and state managment >>>> react , sorry it's the truth
A framework is supposed to do the magic for you. If you're using JSX you're using a lot of magic, hooks, magic, using reach router... magic. After some time, we should stop thinking of ourselves as React, Vue, Angular, whatever engineer. Once you have a wide breadth of knowledge you'll find that everything is trying to do the same thing in their own special way. Learn the computer science and stystem design behind and your career will thank you.
you're just a half js developer if you use vue.
As a React dev, I feel like Vue looks just like Angular, but single file components instead of everything being split into their own files (html, css, ts)
Does your wife's boyfriend know you made this video?
I wasted some time watching this video
Hey, but not all your time!
no sense meaningless arguments
Didn't we say no to this crap in angular.js?
I really dislike how the logic of a component gets shoehorned into the different component methods like computed.
Also, the value binding to component props where you use colon, v-bind, or nothing is obtuse.
React is JavaScript. Vue has so much framework particular code that is not intuitive with lots of black box magic, so you have no idea what’s going on.
Vue is easily one of the most frustrating frameworks I have worked with.
Vue looks and writes like hot garbage.
Vue is garbage. It's just more or less a clone of react. who needs this
Vue is more like holding your hand while you develop an app, that’s why beginners find it easy
Vue is like copy this thing from angular copy this thing from react and just make it best of both worlds without any philosophy.