วีดีโอ

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`

Super helpful, thank you!

Great video, I really like the flow of it

You have awesome content.I am stuck on a problem plz guide me on I am implementing server-side rendering for a datatable (e.g., blog listing) in my Laravel project. I need to create a JavaScript file for this purpose. Should I place this datatable JS file in the public directory? If so, how do I compile the JS file from the resources directory to the public directory using Laravel Vite?Where should be the file placement in the folder structure. project-root/ ├── resources/ │ ├── js/ │ │ ├── app.js │ │ └── datatable/ │ │ └── blogListing.js ├── public/ │ └── build/ ├── vite.config.js ├── package.json └── ...

Great vid! Love how you went on the whole journey from just html to more.

Content 🗿

oh my god friend you will never believe how useful this video was for me and how many concepts you helped me to grasp ! Thank you very much , i love you i wish you the best <3

First of all, great video! I was struggling to find some good comparison as you did, nice job! At 9:26, actually the whole React JSX gets rerendered. That's how React works: whenever a state (useState) changes, the whole function will be executed, including the render/JSX. There are no exceptions on this. There are no actual "dependencies" for the JSX render, it's just about the state changes. It's behind the scenes that React decides whether a node should be "committed" to the DOM, i.e. change the actual DOM nodes: this phase is called "Commit", and it's the last one of the whole rendering process. But this is something we shouldn't care much about as devs, we just have to know that the whole function/component gets re-executed and re-rendered. When you "opt-out" a variable from the reactivity as you said, it just ensures it remains the same (not reassigned, meaning the function inside useMemo is not called) unless an element in the dep array changes (strict equal ===). This is just about expensive computations of that specific variable, therefore it's quite rare to use. Anyway, I loved how deep you dived into these things, which could open up a lot of thoughts into various aspects of both tools. Thanks for the video!

Thanks. Quality explanation.

Excellent

typescript already gives you warnings if you try to edit a const array or object litteral

Hello, I was analyzing your TH-cam channel. your you tube SEO score is zero. It should be increased. and subscribers ,views , like, comments is very low according to your channel age. This is why your you tube growth is very low and your channel setup is also having many problems. If, you can solve this problems your channel will grow and be famous very quickly.

Thank you for creating this video. It was extremely helpful.

Now this is something I'd highly recommend any JS developer to watch

Great content. Thanks

Just amazing, every new person getting into web dev should watch this video. I can't believe you don't have more subscribers.

Nice explanation! I loved how you compared Vue.js and React. Please post a new video explaining how code is compiled in both frameworks step by step

One question: if webpack bundles everything (including third party modules) into bundle.js, doesn't that ever get too big for the browser? The Gatsby library has 1200+ modules; I would assume the bundle.js would be absolutely massive.

Came here after the beef between Evan You and the guy from TsCoding Haha. Really interesting stuff really. Great video! Thanks, man.

This is a phenomenal video, thank you!

awesome video man ! i do have a quick question tho , when you reached the part of using react and imported React from 'react' what tool was responsible to resolve the location of 'react' or to be more precise the actual location of the file that contains the React object

Actual web development

At least four new allocations on every count update in this React component. And zero in Vue

It's a bit unclear and i haven't see some good explanation how does vue know that there was a change in some of the ref variables. Like is it some setInterval that check it or some hidden setter function?

What a gem! Love that you included the error solving parts and the "single take" nature of the video. Liked, subscribed, and added to a playlist)

Great video. This is exactly the type of breakdown I was looking for.

Thanks a lot fo the tutorial !

For the Vue side, it appears to me that you have a function called watchEffect, but when the button is clicked it is calling a function named onClick. I don't understand this.

you got a subscriber here

excellent resources alway hard to show up on searches on TH-cam. You are Amazing mate