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.
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
Why is mutable state bad? I think it's fine - as long as you manage it well, try to keep the mutation limited, and understand your system and how the data flows through it: bar.value = "foo" setBar("foo") Are these really that different? Seeing a function call without assignment (in the `setBar` example) means there **is** a side effect (mutation) somewhere, right?
@@LachlanMiller There have been a whole bunch of books, articles, videos and projects proving why direct state mutation is the cause of many bugs, including ones that are difficult to debug. Comments under the youtube video does not lend itself to a thorough discussion of this issue, I recommend You a little work with a search bar and you will easily find a comprehensive materials about the the drawbacks of directly mutable state.
@@coder_one Yep definitely a ton of content out there. I am not convinced `setState(foo)` is any better than `foo.value = "bar'"` - it's more about how and where you handle the mutation than anything else, imo. Ideally - push the mutation to the edges of your system, and understand how the data flows; keep your business logic immutable and pure, and only mutate things in response to external effects (API call, user interaction...). Fascinating topic! My favorite video on this is "Functional Core, Imperative Shell" from "Destroy all Software". Check it out and lmk what you think!
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.
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.
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?)
Yep, and if a component imports a module and the module changes, you need to notify the component, and (maybe) anything importing said component... For framework specific things (like props) some frameworks have some utils. Eg React has fast refresh, integrated here github.com/vitejs/vite-plugin-react/blob/0f7684ae277da8b92da4d98c8eabafe5fc7b18ae/packages/plugin-react/src/fast-refresh.ts#L67 Although this is simplified gotta start somewhere! The next step here would be considering modules (need a module tree) and then framework specific hooks.
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.
I have no idea how you got that impression from this video, I think I gave a pretty good overview of the reactivity systems. In my exp most of the developers I know are pretty happy to work with either React, Vue or whatever other tool is required.
I'm sorry I haven't been active in this regard. I ended up going back to study part-time and content creation, my hobby, has taken a bit of a back seat. I might just aim for some more videos in the interim... any particular topic that fascinates you, that'd you like to know more about?
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 └── ...
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 for the kind words! sounds like you have a great understanding of this now. worth considering that apparently React has a compiler that changes how rendering works - I'd recommend checking that out to see what's the latest developments in that area.
@@LachlanMiller In close to the beginning of the video you said to mark const variables "as const" in typescript (first tip actually). And I thought "wow what a cool trick" and then I did an experiment with it and then I was like - WAIT A MIN - typescript already does this out the box without needing to add as const to it. I'm not sure if maybe older typscript versions didn't do that. I tried it mutating both const array and const object litterals and it all gives red warning underlines for it out the box with my tsx files if you try to mutate them
Hello, I was analyzing your RU-vid 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.
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.
You can load modules async, so the initial bundle isn't huge. But yes, some libs have really huge bundles - I do not think there is any upper limit, I have worked on apps with 20mb of JS. This takes a long time to parse in the browser. Things like gzip, minify, etc can make it a lot smaller.
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
Whatever runtime you are using will resolve modules using its own pre-determined rules. In this video the runtime is Node.js. You can google "node.js module resolution algorithm" or read here. nodejs.org/api/modules.html#loading-from-node_modules-folders In Node.js if the import is not a relative path, it will look in `node_modules` and then find the `package.json` for the module. In there it looks at specific fields like "main", etc.
@@LachlanMiller I agree, but there seems to be no room for optimization for Vue reactivity system. Besides, React won't go to this optimization room, so to say, since it'd be a whole paradigm shift. React is based on a flawed immutability-first approach, which causes tons of allocations and loops (both in spreads and dependency array comparisons)
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?
It creates a map of all dependencies for each reactive effect. See ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HzhcXVFEiVY.html or lachlan-miller.me/articles/vue-3-reactivity-from-scratch
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.
The watchEffect is a VueJs hook/event itself provided by the api, whilst the onClick function is made by the developer and is a arbitrary name he could have called it anything. Since in VueJs 3 there is no longer the seperatation between methods and vue hooks/events so it can be found in the same space.
Great vid as always 🌹 Wonder if the vue code is valid 🤔 click=onClick …. Fn click=onClick2() …. Value,Void,undefined If it’s invalid, sad that vue doesn’t give an error despite being ts. Might be a big reason why enterprise would choose react 🤷🏻♂️
