Understanding the Complexity of Modern Web Dev Stack (Webpack, Babel, TypeScript, React)

Ғылым және технология

A look back on ye old days, where we came from, and how we ended up in this mess. Few mistakes, can you really blame me? 😇 TIMESTAMPS:
1:00 In the beginning
3:00 JS all the things
5:28 Babel
9:00 Introducing Webpack
14:20 Babel with Webpack
16:00 React (no JSX)
19:00 JSX all the things
21:50 TypeScript and TSX
24:17 Bundle all the things... CSS imports
🐦 Twitter: / lachlan19900
👉 Complete Vue.js 3 30% OFF!! www.udemy.com/course/complete...
💯 My course "Typing the Test Suite" www.udemy.com/course/typing-t...

Пікірлер: 159

  • @menglin7432
    @menglin743227 күн бұрын

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

  • @lotharmohlala851
    @lotharmohlala8512 жыл бұрын

    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 💯

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Thanks Lothar!

  • @_SoundByte_

    @_SoundByte_

    9 ай бұрын

    History in tech is important. Someone needs to do a video of the history of the internet (from a network point of view)

  • @Speglritz
    @Speglritz2 жыл бұрын

    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.

  • @AkshyatChapagain
    @AkshyatChapagain29 күн бұрын

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

  • @LachlanMiller

    @LachlanMiller

    28 күн бұрын

    thanks!

  • @paperC_CSGO
    @paperC_CSGO5 ай бұрын

    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 KZread tutorial/course/explainer videos market!

  • @LachlanMiller

    @LachlanMiller

    5 ай бұрын

    Thank you! I'l do my best, glad it helped you, good luck!!

  • @marianrys316
    @marianrys3163 жыл бұрын

    Great stuff! Thank you ! In less than 30 min you fast-forwarded me from the 90's to modern era :)

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    Thanks ⚡️

  • @brentleemans
    @brentleemans7 ай бұрын

    Amazing video! With every part you explained WHY something was needed. This is missing in most of explanation videos on the internet. Thank you!

  • @pkproductions1623
    @pkproductions1623 Жыл бұрын

    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.

  • @user-zw7go3we9f
    @user-zw7go3we9f7 ай бұрын

    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.

  • 10 ай бұрын

    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!

  • @johnphillips8600
    @johnphillips86002 жыл бұрын

    This is the best explanation I've come across... Most videos are too long and too minified. Thank you for this ❤️

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Glad you found it useful!

  • @narayan1509
    @narayan15092 жыл бұрын

    One of the best video I come across while searching for basics

  • @abuzarbaig3116
    @abuzarbaig3116 Жыл бұрын

    Great & short Video that explains what's going behind the scenes with modern web dev, Thanks 😊

  • @siddharthnayak4448
    @siddharthnayak4448 Жыл бұрын

    Excellent video explaining the history and transition to modern js libraries.Superb!!!!!!

  • @vitaliyd23
    @vitaliyd23Ай бұрын

    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)

  • @apereiracv
    @apereiracv Жыл бұрын

    Amazing explanation, love the approach and evolution of the code, great stuff

  • @johnas3
    @johnas3 Жыл бұрын

    Bro you are now my new history teacher. Great work and thanks for the explanation🔥

  • @andriopratama6587
    @andriopratama65872 жыл бұрын

    Awesome! Thank you for the explanation and case study

  • @Usmankhaled
    @Usmankhaled4 ай бұрын

    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 :)

  • @uchihai_a_h4871
    @uchihai_a_h48718 ай бұрын

    now finally all the dots got connected... brilliant mate !

  • @rioredwards
    @rioredwards2 ай бұрын

    This was awesome! Thank you for making this!

  • @wattsfield1889
    @wattsfield18897 күн бұрын

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

  • @universalkittii
    @universalkittii2 жыл бұрын

    This was very helpful thank you for making this!

  • @almuhanadal-nihmy7452
    @almuhanadal-nihmy7452 Жыл бұрын

    Great explanation. Thanks I hope you do more videos about tooling. It's really helpful

  • @rajeev2127
    @rajeev2127 Жыл бұрын

    You nailed it!!! Finally I understood, Thank you so much from the heart, you're awesome

  • @deveshprasad6418
    @deveshprasad64182 ай бұрын

    This is amazing. You're a genius. You made it so easy to understand.

  • @michaelhashimoto1650
    @michaelhashimoto165011 ай бұрын

    This is amazing.. front end is so crazy…. Thanks for bridging the gap!

  • @LachlanMiller

    @LachlanMiller

    11 ай бұрын

    Give m a like/sub, announcement soon but I'm going to be making a course/book going way deeper on frontend tooling!

  • @mmkvhornet7522
    @mmkvhornet752211 ай бұрын

    I like your methodology , it's a very great and enjoyable learning experience !

  • @jfsimard2
    @jfsimard210 ай бұрын

    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.

  • @udonjijiwaiwai935
    @udonjijiwaiwai9352 жыл бұрын

    This is great and very helpful! Thank you!

  • @davevids95
    @davevids952 жыл бұрын

    This is the explanation I've been looking for!! Subscribed!

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Thanks! I'll try to make more videos about tooling in the future.

  • @zalabhaskar9795
    @zalabhaskar97955 ай бұрын

    You have nicely explained in simple way with good example. Thank you.😊

  • @XpressBits
    @XpressBits5 ай бұрын

    Best tutorial watched in the recent days.. Precise and no BS... you got a great teaching skills, mate! Please keep doing the videos..

  • @LachlanMiller

    @LachlanMiller

    5 ай бұрын

    thanks!!

  • @NoName-tt9ye
    @NoName-tt9ye6 күн бұрын

    Great video, I really like the flow of it

  • @micahtonning7967
    @micahtonning796726 күн бұрын

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

  • @reralt
    @reralt5 ай бұрын

    This was so good. All the confusion regarding modern web cleared in one video ! Thanks a lot.

  • @LachlanMiller

    @LachlanMiller

    5 ай бұрын

    thanks glad you liked it!!

  • @CyberCass2000
    @CyberCass2000 Жыл бұрын

    This is just amazing, hat off to you!

  • @jhonyortiz5
    @jhonyortiz5 Жыл бұрын

    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.

  • @okamianimes8190
    @okamianimes81907 ай бұрын

    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

  • @LachlanMiller

    @LachlanMiller

    7 ай бұрын

    No problem, glad you found it useful!

  • @gionatha3747
    @gionatha37477 ай бұрын

    Fantastic video!

  • @aashisrimal7379
    @aashisrimal73793 жыл бұрын

    Great video on how modern web development has evolved.

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    Thanks :D

  • @chubbycat9212
    @chubbycat92122 жыл бұрын

    This is the best explanation I've come across

  • @LachlanMiller

    @LachlanMiller

    Жыл бұрын

    Glad you found it useful!

  • @needtubes121
    @needtubes121 Жыл бұрын

    thanks for explaining all this from basics.

  • @DjSeymur
    @DjSeymur Жыл бұрын

    Superb explanation! Thanks a lot for this 🙌

  • @LachlanMiller

    @LachlanMiller

    Жыл бұрын

    thanks!

  • @jimbrannlund4677
    @jimbrannlund4677 Жыл бұрын

    This was AWESOME! Thank you!

  • @opsJson_
    @opsJson_ Жыл бұрын

    Congratulations from Brazil. content like this is very rare, i'm subscribing.

  • @LachlanMiller

    @LachlanMiller

    Жыл бұрын

    Thanks for the support!

  • @fogguy3838
    @fogguy38384 ай бұрын

    exactly what I was looking for, Thanks, great job

  • @LachlanMiller

    @LachlanMiller

    4 ай бұрын

    Glad it helped!

  • @dipanshuikey6650
    @dipanshuikey66506 ай бұрын

    great video 🔥

  • @isaacmoses3377
    @isaacmoses33779 ай бұрын

    Pure awesomeness 😍

  • @MoizAli-eh9gv
    @MoizAli-eh9gv7 ай бұрын

    a beginner learning this. Honestly great video

  • @LachlanMiller

    @LachlanMiller

    7 ай бұрын

    Thanks!

  • @dimitriborgers9800
    @dimitriborgers9800Ай бұрын

    This is a phenomenal video, thank you!

  • @LachlanMiller

    @LachlanMiller

    Ай бұрын

    No problem!

  • @webb-developer
    @webb-developer Жыл бұрын

    this is amazing . thank you

  • @shinobi1975
    @shinobi19752 ай бұрын

    Finally someone that explains the problem that is being solved by these stupid installs lol. 10/10 vid.

  • @michaelvigato3228
    @michaelvigato32283 жыл бұрын

    Man this content is plain and simply amazing

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    thanks for the praise Michael, I appreciate it. also, the comments help me know what kind of content people like to see.

  • @user-tt6nc6mo7k
    @user-tt6nc6mo7k3 жыл бұрын

    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.

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    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.

  • @laithdrebaty6709
    @laithdrebaty6709 Жыл бұрын

    Great video, thanks a lot!

  • @imheretohelp2075
    @imheretohelp20752 жыл бұрын

    very good content, pedagogically supreme

  • @alextonev4145
    @alextonev4145 Жыл бұрын

    Simply amazing. Thank you so much.

  • @LachlanMiller

    @LachlanMiller

    Жыл бұрын

    Thanks! Glad you enjoyed it.

  • @shweta4911
    @shweta49112 жыл бұрын

    Great Content!!!!!!

  • @slahomar1497
    @slahomar149710 ай бұрын

    that is the best video I watched in my life

  • @squarerootof2
    @squarerootof2 Жыл бұрын

    hilarious and brilliant!!!

  • @bakaleisanich
    @bakaleisanich2 жыл бұрын

    Thank you! More course React!!!

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Main focus is around Vue, but definitely could look into some more generic tutorials on concepts that apply to both React and Vue.

  • @thequang9234
    @thequang923410 ай бұрын

    with a bit of luck, this is one of the coolest video i've ever watched :)

  • @LachlanMiller

    @LachlanMiller

    10 ай бұрын

    Thanks! What did you like about it?

  • @AiwwwA
    @AiwwwA11 ай бұрын

    Best explanation

  • @jasonadventure2265
    @jasonadventure2265 Жыл бұрын

    Impressive ❤

  • @learncodeinbangla9181
    @learncodeinbangla91812 жыл бұрын

    It's really awesome things to me. Thanks a lot.

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Glad you found it useful!!

  • @kerimzunic
    @kerimzunic2 ай бұрын

    I'm glad this video exists

  • @LachlanMiller

    @LachlanMiller

    2 ай бұрын

    thanks I am glad you exist and watched it!

  • @taaaaaaay
    @taaaaaaay3 жыл бұрын

    Thanks for the 20 minute headache :) No but really, this made it so much easier to understand what tf is going on.

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    Thanks, glad you found it useful!

  • @StandardLoop
    @StandardLoop2 ай бұрын

    Really great video

  • @LachlanMiller

    @LachlanMiller

    2 ай бұрын

    thanks!

  • @edwinquinonespardo4768
    @edwinquinonespardo4768 Жыл бұрын

    Amazing

  • @JosephLKausi
    @JosephLKausi Жыл бұрын

    Just awesome

  • @jpmohan96
    @jpmohan963 жыл бұрын

    Incredible 👌

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    thanks JP

  • @makealemonade
    @makealemonade4 ай бұрын

    My brain is thanking you.

  • @rossli8621
    @rossli86218 ай бұрын

    This is treasure!

  • @jordantseng8330
    @jordantseng833010 ай бұрын

    god tier explanation

  • @LachlanMiller

    @LachlanMiller

    10 ай бұрын

    Thank you!

  • @avimonnudash1762
    @avimonnudash17622 ай бұрын

    Beautiful

  • @austincodes
    @austincodes Жыл бұрын

    And this is just the top of the iceberg

  • @LachlanMiller

    @LachlanMiller

    Жыл бұрын

    Damn straight, below lies dragons Maybe I should make an iceberg video on JS tooling!

  • @mxsniper223
    @mxsniper2232 ай бұрын

    thanks' a lot man

  • @GoatCS
    @GoatCS5 ай бұрын

    This is why WordPress is so popular. Running SQL HTML PHP and sometimes JavaScript and you don't even know it.

  • @ihateorangecat
    @ihateorangecat5 ай бұрын

    Thanks for this video. ❤🙏 Please make update version too. 🙏❤️

  • @LachlanMiller

    @LachlanMiller

    4 ай бұрын

    Sure thing I’ll try and do it soon. This stuff changes way too fast.

  • @bhavyabansal1143
    @bhavyabansal11432 жыл бұрын

    I became your fan in just 26 minutes and 41 seconds....

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    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 🤔

  • @bhavyabansal1143

    @bhavyabansal1143

    2 жыл бұрын

    @@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.

  • @bhavyabansal1143

    @bhavyabansal1143

    2 жыл бұрын

    @@LachlanMiller just sent you request on LinkedIn. Let’s connect.

  • @AnthonyObi-wr6ro
    @AnthonyObi-wr6ro Жыл бұрын

    All your tutorials are always fast pace that it becomes hard for one to follow your pace

  • @RikThePixel
    @RikThePixel2 жыл бұрын

    I would like to see how server-side JavaScript comes into play with this 😂

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Another can of worms, maybe soon!

  • @RikThePixel

    @RikThePixel

    2 жыл бұрын

    @@LachlanMiller ooh 👀

  • @oleksandraokhotnykova8672
    @oleksandraokhotnykova86722 ай бұрын

    "We're not sane, we're INSANE, we're modern web developers" LMAOOO

  • @kashnigahbaruda
    @kashnigahbaruda3 жыл бұрын

    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.

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    Glad you got it working - skipping a test is never ideal, might be good to find out why it's failing lol. Sleep tight

  • @kashnigahbaruda

    @kashnigahbaruda

    3 жыл бұрын

    @@LachlanMiller turns out it was marked with test.skip(...). All greens.

  • @sangilyun234
    @sangilyun2343 жыл бұрын

    25:25 Can’t relate more

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    😂

  • @aidanwelch4763
    @aidanwelch47634 ай бұрын

    There's so much worse it can be with SASS, handlebars, WASM, and so much extra complexity you can add on top lol

  • @NomanKhan-pi2dc
    @NomanKhan-pi2dc Жыл бұрын

    When i see a guy using vim, I just assume that he is a godly tier developer. Once more I was proved right

  • @KousayJebir
    @KousayJebirАй бұрын

    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

  • @LachlanMiller

    @LachlanMiller

    Ай бұрын

    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.

  • @KousayJebir

    @KousayJebir

    28 күн бұрын

    @@LachlanMiller thank you very much

  • @slahomar1497
    @slahomar149710 ай бұрын

    in babel.config, how wepback knows the order to use ? in case of tsx, which loader is gonna run first ?

  • @LachlanMiller

    @LachlanMiller

    10 ай бұрын

    It goes in the order of the array. I think it goes last to first (weirdly enough).

  • @aimanali7877
    @aimanali787710 күн бұрын

    Content 🗿

  • @naveedalirehmani4135
    @naveedalirehmani4135 Жыл бұрын

    legacy code be like : Look what they need just to mimic a fraction of our power. 😃

  • @oscardasilva971
    @oscardasilva9712 жыл бұрын

    This is just one of the web development tutorials I have ever seen, Why don't everybody create tutorials like that?

  • @LachlanMiller

    @LachlanMiller

    2 жыл бұрын

    Many people don't understand it all haha

  • @roronoa_d_law1075
    @roronoa_d_law1075 Жыл бұрын

    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?

  • @anudeepreddy1027
    @anudeepreddy10277 ай бұрын

    Bro casually flexing his VIM skills

  • @LachlanMiller

    @LachlanMiller

    7 ай бұрын

    I'm very much an average Vim user - always learning new things! Although nowadays I'm using VS Code with the Vim plugin.

  • @LachlanMiller

    @LachlanMiller

    7 ай бұрын

    Why? I am tired of configuring Vim!

  • @codybontecou
    @codybontecou3 жыл бұрын

    If given the choice, would you support ES5? It seems a lot of this complexity comes from supporting old browsers.

  • @LachlanMiller

    @LachlanMiller

    3 жыл бұрын

    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.

  • @Manoj-qf6lq
    @Manoj-qf6lq2 ай бұрын

  • @susilthapa4367
    @susilthapa43675 ай бұрын

    Great content! Thank you so much!

  • @LachlanMiller

    @LachlanMiller

    5 ай бұрын

    Glad you liked it!

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan3 ай бұрын

    Let's always do alot of good

  • @dimitriborgers9800
    @dimitriborgers9800Ай бұрын

    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.

  • @LachlanMiller

    @LachlanMiller

    Ай бұрын

    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.

Келесі