This is absolutely brilliant. Attaching a storyline to this was genius. This is how everyone learns; through context and use cases. Keep to this style of tutorials and this channel will sky rocket. Well done 💯
We transpile typescript to javascript then transpile javascript to older versions of javasript for wider browser support and then the browers JIT compile the javascript it loads to run the actual code. Even without webpack, different loaders, webassembly and the other stuff going on it's complex enough.
This video is awesome. In just 25 minutes you explained the whole modern javascript paradox. How a simple button click in JavaScript is evolved to be so complex. Thanks a lot it made me understand concepts that are very confusing.
The video I have been looking for as a junior developer - to actually try and understand the bigger picture and fundementals. Please make more of these type of videos! You are hitting a much neglected part of the web development RUclips tutorial/course/explainer videos market!
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!
This video is really helpful to me. When I dive into Huge numbers of libraries from single page with HTML CSS JS. it really drive me crazy. But thank your sharing. I understand a lot and get a clearness feel.
Absolutely brilliant. Seems like you witnessed everything as if you yourself was a kernel routing and directing every piece to work together just like that :)
this is just beautiful, i had a lot of troubles understanding what webpack, babel were, and where are they exactly used, but this video just puts everything together in a brilliant way, thank you for the video
I'm honestly impressed with how good this was to give and idea about how we ended up using all of these tools in the modern web development. Thanks for your effort!
This really confused me too when I started learning web development. Now I have a great resource to refer to other people thanks! On another note, I see you have a few videos on testing using Jest, Cypress, etc. I personally am quite new to testing I understand there are different types of tests like unit testing, integration testing and end to end tests. I know what each of them are but I do not understand how they all come together in one project? Would be great if you could do a similar overview type video on how all these are implemented in a production application.
Yeah this stuff is confusing - there is way more tools in the average project too, but this is the general idea. Sure, I will definitely do more content around all the different types of testing... great suggestion. One of my favorite topics.
This entertaining and very eye opening when it comes to the past couple decades of web development. I hate when people use simple examples that have been simplified so much that they don't represent reality anymore. But your example was as simple as it needed to be but no more. It's really cool to see how it all really works and how it came together.
10:37 I don't understand why webpack is needed here if the improvement is to export createElement and import it in index.js. It's impossible to to do this without webpack?
@@LachlanMiller if you ask me, I will say that given there are lot of tools out there like your video has explained, it will be good if you can make individual in depth videos of each tool and explain different configurations and what they are used for. I am happy to help as I am also learning these things and there is lot to learn out there.
As a newbie this was great. Struggled today with some jest testing presets and had absolutely no idea what was going on. I think I solved it because the error went away but I am worried the test was just skipped. Luckily I have no idea how to check which tests was skipped or not so I can go to bed without worry.
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.
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.
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?
Depends, last job I worked we had a lot of users on IE11 (hospitals) so we just used babel to target es5. Nowdays browsers can actually load es modules natively via , so depending on your project you might not even need webpack, just a simple typescript build that exports modules, but I think a pre-configured setup (vue cli, create react app) is probbly the way to go.
This is absolutely brilliant. Attaching a storyline to this was genius. This is how everyone learns; through context and use cases. Keep to this style of tutorials and this channel will sky rocket. Well done 💯
Thanks Lothar!
History in tech is important. Someone needs to do a video of the history of the internet (from a network point of view)
Now this is something I'd highly recommend any JS developer to watch
Great stuff! Thank you !
In less than 30 min you fast-forwarded me from the 90's to modern era :)
Thanks ⚡️
Amazing video! With every part you explained WHY something was needed. This is missing in most of explanation videos on the internet. Thank you!
We transpile typescript to javascript then transpile javascript to older versions of javasript for wider browser support and then the browers JIT compile the javascript it loads to run the actual code. Even without webpack, different loaders, webassembly and the other stuff going on it's complex enough.
This video is awesome. In just 25 minutes you explained the whole modern javascript paradox. How a simple button click in JavaScript is evolved to be so complex. Thanks a lot it made me understand concepts that are very confusing.
This is the best explanation I've come across... Most videos are too long and too minified.
Thank you for this ❤️
Glad you found it useful!
One of the best video I come across while searching for basics
Rare you can have a history Today. Big picture is always forgotten making if difficult to get clarity. Thank you for taking the time to do it.
The video I have been looking for as a junior developer - to actually try and understand the bigger picture and fundementals. Please make more of these type of videos! You are hitting a much neglected part of the web development RUclips tutorial/course/explainer videos market!
Thank you! I'l do my best, glad it helped you, good luck!!
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!
This video is really helpful to me. When I dive into Huge numbers of libraries from single page with HTML CSS JS. it really drive me crazy. But thank your sharing. I understand a lot and get a clearness feel.
Just amazing, every new person getting into web dev should watch this video. I can't believe you don't have more subscribers.
thanks!
Never had I understood babel soo deeply. Kudos to you man!!
now finally all the dots got connected... brilliant mate !
Best tutorial watched in the recent days.. Precise and no BS... you got a great teaching skills, mate! Please keep doing the videos..
thanks!!
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.
Absolutely brilliant. Seems like you witnessed everything as if you yourself was a kernel routing and directing every piece to work together just like that :)
This is amazing.. front end is so crazy…. Thanks for bridging the gap!
Give m a like/sub, announcement soon but I'm going to be making a course/book going way deeper on frontend tooling!
this is just beautiful, i had a lot of troubles understanding what webpack, babel were, and where are they exactly used, but this video just puts everything together in a brilliant way, thank you for the video
No problem, glad you found it useful!
Great video on how modern web development has evolved.
Thanks :D
Congratulations from Brazil. content like this is very rare, i'm subscribing.
Thanks for the support!
This is the best explanation I've come across
Glad you found it useful!
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)
Man this content is plain and simply amazing
thanks for the praise Michael, I appreciate it. also, the comments help me know what kind of content people like to see.
a beginner learning this. Honestly great video
Thanks!
I'm honestly impressed with how good this was to give and idea about how we ended up using all of these tools in the modern web development. Thanks for your effort!
Great vid! Love how you went on the whole journey from just html to more.
This was so good. All the confusion regarding modern web cleared in one video ! Thanks a lot.
thanks glad you liked it!!
This really confused me too when I started learning web development. Now I have a great resource to refer to other people thanks!
On another note, I see you have a few videos on testing using Jest, Cypress, etc. I personally am quite new to testing I understand there are different types of tests like unit testing, integration testing and end to end tests. I know what each of them are but I do not understand how they all come together in one project? Would be great if you could do a similar overview type video on how all these are implemented in a production application.
Yeah this stuff is confusing - there is way more tools in the average project too, but this is the general idea.
Sure, I will definitely do more content around all the different types of testing... great suggestion. One of my favorite topics.
This is the explanation I've been looking for!! Subscribed!
Thanks! I'll try to make more videos about tooling in the future.
Thanks for the 20 minute headache :)
No but really, this made it so much easier to understand what tf is going on.
Thanks, glad you found it useful!
This is amazing. You're a genius. You made it so easy to understand.
Great run through!! Helps wrap my head around things.
Bro you are now my new history teacher. Great work and thanks for the explanation🔥
with a bit of luck, this is one of the coolest video i've ever watched :)
Thanks! What did you like about it?
Great & short Video that explains what's going behind the scenes with modern web dev, Thanks 😊
Finally someone that explains the problem that is being solved by these stupid installs lol. 10/10 vid.
exactly what I was looking for, Thanks, great job
Glad it helped!
I like your methodology , it's a very great and enjoyable learning experience !
Excellent video explaining the history and transition to modern js libraries.Superb!!!!!!
This entertaining and very eye opening when it comes to the past couple decades of web development. I hate when people use simple examples that have been simplified so much that they don't represent reality anymore. But your example was as simple as it needed to be but no more. It's really cool to see how it all really works and how it came together.
You nailed it!!! Finally I understood, Thank you so much from the heart, you're awesome
god tier explanation
Thank you!
Thank you for creating this video. It was extremely helpful.
10:37 I don't understand why webpack is needed here if the improvement is to export createElement and import it in index.js. It's impossible to to do this without webpack?
Fantastic video!
Amazing explanation, love the approach and evolution of the code, great stuff
You have nicely explained in simple way with good example. Thank you.😊
This was awesome! Thank you for making this!
Great video, I really like the flow of it
Great explanation. Thanks
I hope you do more videos about tooling. It's really helpful
thanks for explaining all this from basics.
This was very helpful thank you for making this!
This is why WordPress is so popular. Running SQL HTML PHP and sometimes JavaScript and you don't even know it.
I'm glad this video exists
thanks I am glad you exist and watched it!
that is the best video I watched in my life
I became your fan in just 26 minutes and 41 seconds....
Hey, thanks for the praise!
Any other kind of videos you would like to see? Trying to find a good direction for my content and channel 🤔
@@LachlanMiller if you ask me, I will say that given there are lot of tools out there like your video has explained, it will be good if you can make individual in depth videos of each tool and explain different configurations and what they are used for. I am happy to help as I am also learning these things and there is lot to learn out there.
@@LachlanMiller just sent you request on LinkedIn. Let’s connect.
This is just amazing, hat off to you!
You are absolutely brilliant! Thank you.
Awesome! Thank you for the explanation and case study
As a newbie this was great. Struggled today with some jest testing presets and had absolutely no idea what was going on. I think I solved it because the error went away but I am worried the test was just skipped. Luckily I have no idea how to check which tests was skipped or not so I can go to bed without worry.
Glad you got it working - skipping a test is never ideal, might be good to find out why it's failing lol. Sleep tight
@@LachlanMiller turns out it was marked with test.skip(...). All greens.
Superb explanation! Thanks a lot for this 🙌
thanks!
thank you, this is extremely helpful and clear.
This was AWESOME! Thank you!
very good content, pedagogically supreme
webpack was built FOR react. aside from that, great content
we've been building on complicated frontends for a while before webpack
All your tutorials are always fast pace that it becomes hard for one to follow your pace
Pure awesomeness 😍
There's so much worse it can be with SASS, handlebars, WASM, and so much extra complexity you can add on top lol
And this is just the top of the iceberg
Damn straight, below lies dragons
Maybe I should make an iceberg video on JS tooling!
My brain is thanking you.
Thank you! More course React!!!
Main focus is around Vue, but definitely could look into some more generic tutorials on concepts that apply to both React and Vue.
This is great and very helpful! Thank you!
3k views wtf... u need to be recognised
Thanks for the motivation!
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 thank you very much
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.
Simply amazing. Thank you so much.
Thanks! Glad you enjoyed it.
great video 🔥
"We're not sane, we're INSANE, we're modern web developers" LMAOOO
This is just one of the web development tutorials I have ever seen, Why don't everybody create tutorials like that?
Many people don't understand it all haha
in babel.config, how wepback knows the order to use ? in case of tsx, which loader is gonna run first ?
It goes in the order of the array. I think it goes last to first (weirdly enough).
hilarious and brilliant!!!
any updates with the book? I've been waiting for it since i subscribed
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?
legacy code be like : Look what they need just to mimic a fraction of our power. 😃
welcome to js land where people over engineer stuffs for convenience
If given the choice, would you support ES5? It seems a lot of this complexity comes from supporting old browsers.
Depends, last job I worked we had a lot of users on IE11 (hospitals) so we just used babel to target es5. Nowdays browsers can actually load es modules natively via , so depending on your project you might not even need webpack, just a simple typescript build that exports modules, but I think a pre-configured setup (vue cli, create react app) is probbly the way to go.
I would like to see how server-side JavaScript comes into play with this 😂
Another can of worms, maybe soon!
@@LachlanMiller ooh 👀
Bro casually flexing his VIM skills
I'm very much an average Vim user - always learning new things!
Although nowadays I'm using VS Code with the Vim plugin.
Why? I am tired of configuring Vim!
When i see a guy using vim, I just assume that he is a godly tier developer. Once more I was proved right
this is amazing . thank you
It's really awesome things to me. Thanks a lot.
Glad you found it useful!!
Briliant video . Thnx
Great video, thanks a lot!
Best explanation
25:25
Can’t relate more
😂
Great Content!!!!!!
Really great video
thanks!
Incredible 👌
thanks JP
This is treasure!