วีดีโอ

Was asked about the exact same question during the interview, had no idea then end up bombing it. This video explains so much in a clearest way possible! Definitely saves me from future interviews. Thanks!

Great video, vue only render when the value is change and opt-in in the template, and react re-render everything and use "use" to opt-out them.

You are absolutely brilliant! Thank you.

Thanks

Thank you so much. The graph makes it much easier to understand.

Wish i watched it before learning it the hard way))

THIS IS AMAZING!!! I've been looking for a way to trace and understand the journey to our current setup and there's just so many different parts to it that I've just never managed to understand how all fell into place. This video explains all of that in almost an ELI5 way and covers almost everything needed! Thank you so much for this!

3:00 I don't think its fair to say that "React is just JavaScript". React exports a function, which you may expect to be invoked serveral times. While Vue is defining top-level JS, which you'd expect to be executed only once. It is quite trivial to make Vue do the same thing as React, while it's non-trivial with growing complexity to prevent React from re-invoking the component.

Never had I understood babel soo deeply. Kudos to you man!!

Why use events here?

Thank you for sharing this. I find it very informative for every new developer to understand where all things came from and why it evolved that way.

You inlined count++ in react code but used a function in vue. So vue version looks more verbose. In fact, vue's code mostly less verbose than react's.

Amazing

Vue 3 has fragment built-in on root, so you can have multiple html tags under root, I.e. No need to wrap it in div 🎉🎉

I love and use Vue because it does not use JSX

thank you sir

Is incredible how react is the most used framework when it is a pile pf 💩

Nice tutorial. How did you run both react and vue at the same time?

Great video!

It’s actually a confuse from vue 3 composition API, when use the old vue 2 way, options API then it make you instant clear and understand why it doesn’t double the count value

Briliant video . Thnx

Such a great video ❤

I just forced myself to watch whole video, and it was good

I think the author missed the key point why react's way is just wrong. It is spelled out in the code but wasn't mentioned explicitly in the narrative. The point is, that frameworks should do things for us, not us instructing the framework each time over and over again what makes sense. In the presented example it is the developer who needs to keep track of the dependencies (much like Ember.js does) whereas with Vue, because you tell it what is reactive, it can keep track of the dependencies itself. This means that if the callback to watchEffect will change and suddenly will have more reactive state being used in it, then there is no need to further tell Vue what should influence the re-execution of said callback. The bottom line is that working with React is a constant struggle of "why isn't this thing re-rendering" vs in Vue it's "I want this to just work and I don't care how it is doing its magic"

very clear explanation

You could have just used inline for count increment on both.

Thanks for clear and concise explanation! I'm working in both React and Vue but never think of their difference in this way.

Amazing in-depth look at the build system, thank you

Composables are the simplest. Pinia is the best in most cases.

Excellent explanation!

Which version of vue test utils did you use? Since this is 4 years old, I'm trying to check if there's been significant changes where following along with this won't be helpful. Thank you

where's the book man? I've been waiting for some time! Good luck with it.

I did bundle with grunt at the very beginning where nothing else existed, then webpack and I stay at webpack until it breaks something specially. Never change a good running system. So Vite does sound good, but I would never refactor my bundle process on a existing process. So I will wait wait wait and wait until it's mature enough. For new Projects, it's worth maybe the try. Just my 2 cents.

webpack was built FOR react. aside from that, great content we've been building on complicated frontends for a while before webpack

Non-mutable state is one of the advantages of React. Fortunately, you can write a simple composable "useState" that will provide a reactive value and a function to change it in Vue. Why is that? Because good patterns are worth using regardless of the frameworks you work in

what is opt in actually?

0:51 is the best part of the video

I always love to know what is happening under the hood in the tools and frameworks I use otherwise I feel uncomfortable while using them and this explanation helped me to scratch the surface and figure out what is going on and what are these tools is all about, thank you a lot.

thank you, this is extremely helpful and clear.

Great run through!! Helps wrap my head around things.

Pretty cool video :)

React is used when you decide to follow the status quo, Vue is used when you decide to be happy

React is opt-out, Vue is opt-in. I said this to ChatGPT, then said choose one of the two: opt-out or opt-in. Then, its answer: Opt-In is generally considered good because it provides a more guided and structured approach, making it easier for developers to adopt best practices and tools gradually. This can simplify the development process and ensure consistency across the project.

Another framework from FB we are not gonna talk about XD

25:40 the hardest part of this is implementing the actual real life hot.accept method. I know that u used a simplified example where u just rerender the component, but it real-life conditions it would be much harder (like how do restore the props state for the hot swapped component from the parent?)

cool and make sense

What do you think about writing it this way ? ``` test.each([ { count: 1, expected: 'odd', }, { count: 2, expected: 'even', }, ])('should test if $count if $expected', async ({ count, expected }) => { const wrapper = mount(app, { props: { count, }, }); expect(wrapper.html()).toContain('Hello, world!'); expect(wrapper.html()).toContain(`Count: ${count} is ${expected}`); }); ```

The best thing is react devs dont talk about other frameworks being bad, we just build stuff, bcos competitors whos combined framework marketshare dont even come close to half of react usage, keep on yupping about how their framework is better rather than building good projects, what am guessing is vue and svelte cant build great projects and startups, they are the cool kids of frameworks, their users only yup 24/7 how they r better.

any updates with the book? I've been waiting for it since i subscribed

For the Index Types; what I do is define TestingTypes as an enum and TestingType as a `typeof keyof TestingTypes`