Lachlan Miller
Lachlan Miller
  • Видео 174
  • Просмотров 433 678
How Hot Module Replacement REALLY Works | JS Toolchain From Scratch
🎉 NEW book on tooling (build your own tools!) Coming 2024, register for updates): lachlan-miller.ck.page/92dfa021b3
⚠️ NOTE: I refer to HMR as Hot Module RELOAD - it's actually "Replacement", I had been saying in wrong for years.
🐦 My Twitter: Lachlan19900
✏️ Diagram/notes from video: app.eraser.io/workspace/W1ZOWqpCPrv4Vz2vcytS?origin=share
🔨 I am building an entire JS toolchain from (mostly) scratch. In this video, we lay the foundations and build out a naive but simple and functional hot module replacement (HMR) implementation.
Source: github.com/lmiller1990/build-your-own-vite/tree/main
Просмотров: 2 582

Видео

Visual Guide to the Modern Frontend Toolchain (Vite)
Просмотров 74 тыс.3 месяца назад
🎉 NEW book on tooling (build your own tools!) Coming 2024, register for updates): lachlan-miller.ck.page/92dfa021b3 🐦 My Twitter: Lachlan19900 ✏️ Diagram/notes from video: app.eraser.io/workspace/1CfLxNLf9DY9E9Ndesq4?origin=share I talk about Vite, the best toolchain for building frontend apps right now, which combines a number of other tools under the hood with with some extra good...
How To Debug Infuriating Module Errors
Просмотров 8404 месяца назад
🎉 NEW book (coming 2024, register for updates): lachlan-miller.ck.page/92dfa021b3 📗 Current Book (Vue, Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns 🐦 My Twitter: Lachlan19900 🧠 Useful Links - Why you should ALWAYS use an extension: lachlan-miller.me/articles/why-you-should-always-use-an-extension-for-javascript-files - Node's creator regrets about module exte...
Vue's New Rendering Strategy (Vapor), Innovation vs Maintenance
Просмотров 5 тыс.4 месяца назад
🎉 NEW book (coming 2024): lachlan-miller.ck.page/92dfa021b3 📗 Book (Vue, Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns 🐦 My Twitter: Lachlan19900 Today I talk about Vue's new rendering stategy, Vapor mode, performance, and more broadly the implications of innovation vs maintenance in the JS community. 🧠 References: - github.com/sveltejs/svelte/issues/2546 - va...
My Favorite TypeScript Tips and Tricks
Просмотров 4,6 тыс.4 месяца назад
🎉 Writing a book about tooling, testing and development philosophy: lachlan-miller.ck.page/92dfa021b3 📗 Book (Vue, Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns Type Challenges to learn and push yourself github.com/type-challenges/type-challenges 🐦 My Twitter: Lachlan19900 Some neat TypeScript tips and tricks I've learned over the years. Now you know them, too!
3 Ways to Avoid Prop Drilling in Vue/React
Просмотров 4 тыс.4 месяца назад
📗 Book (Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns 🎉 Writing a book about tooling, testing and development philosophy: lachlan-miller.ck.page/92dfa021b3 🐦 Twitter: Lachlan19900 Sick of passing props to deeply nested components? Here's a few alternatives I've used over the years, with my thoughts and recommendations.
Form Validation Strategies for JavaScript Apps
Просмотров 1 тыс.4 месяца назад
📗 Book (Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns 🎉 Writing a book about tooling, testing and development philosophy: lachlan-miller.ck.page/92dfa021b3 🐦 Twitter: Lachlan19900 Some different approaches to validating forms I've seen over the years with my thoughts.
The Mighty Deferred Promise - An Interview Recount
Просмотров 7 тыс.6 месяцев назад
❗️ See the comments - I over-engineered this, my solution is far from ideal. Good discussion in comments! 👉 I am writing a book on tooling! Check it out: lachlan-miller.ck.page/92dfa021b3 🐦 Lachlan19900 I had an interview recently which featured an interesting question. In this video, I share the question and my solution, along with a construct, the mighty deferred promise. There's ...
Patterns for Error Handling
Просмотров 1,8 тыс.6 месяцев назад
👉 I am writing a book! Check it out: lachlan-miller.ck.page/92dfa021b3 📗Book on Design Patterns: lachlanmiller.gumroad.com/l/vuejs-design-patterns 🐦 Lachlan19900 In this video, I share some thoughts and techniques about error handling in a little application I'm working on.
The Difference Between Vue and React
Просмотров 29 тыс.9 месяцев назад
📗 Book (Updated Aug 2023): lachlanmiller.gumroad.com/l/vuejs-design-patterns 🐦 Twitter: Lachlan19900 Today I talk about the philosophical difference between Vue and React and how it impacts the reactivity system of the two frameworks.
Renderless Component & Type Safety (Advent of Vue #17)
Просмотров 1,2 тыс.Год назад
My solution to the 17th and final Advent of Vue challenge! Good one to end on - renderless components are a great example of separation of concerns. We also talk about pushing logic out of a component into a stateless function. I also talk about renderless components in my book: lachlan-miller.me/design-patterns-for-vuejs 👉 Link to algorithm www.movable-type.co.uk/scripts/latlong.html 👉 Haversi...
Type Safe Custom Directives (Advent of Vue #16)
Просмотров 616Год назад
My solution to the 16th Advent of Vue challenge! Pretty quick one, and something that doesn't get as much attention as it probably deserves - custom directives. 🎄 Advent of Vue: adventofvue.com/ 💻 Code: github.com/lmiller1990/aov2022/tree/christmas-done 🐦 Keep up with me on Twitter! Lachlan19900 If you like my teaching style, I have a book and two courses! 👀 (Book) Design Patterns f...
Shuffling Arrays and a Map Trick (Advent of Vue #14)
Просмотров 546Год назад
My solution to the 14th Advent of Vue challenge! New favorite - we get to talk about shuffling algorithms and the the jankiness of Array.prototype.sort. 👉 Fisher Yates Shuffle: en.wikipedia.org/wiki/Fisher–Yates_shuffle 🎄 Advent of Vue: adventofvue.com/ 💻 Code: github.com/lmiller1990/aov2022/tree/14-done 🐦 Keep up with me on Twitter! Lachlan19900 If you like my teaching style, I hav...
Solving a 2000 Year Old Problem with TDD and Vue (Advent of Vue #12)
Просмотров 574Год назад
My solution to the 12th Advent of Vue challenge! This was my favorite one so far! Explaining this in a short video while coding was difficult, I hope it's not too difficult too confusing 🤯 👉 Numberphile on Josephus Problem ruclips.net/video/uCsD3ZGzMgE/видео.html 🎄 Advent of Vue: adventofvue.com/ 💻 Code: github.com/lmiller1990/aov2022/tree/aov-12-josephus 🐦 Keep up with me on Twitter! twitter.c...
Arbitrary Values & Properties in Tailwind (Advent of Vue #11)
Просмотров 595Год назад
My solution to the 11th Advent of Vue challenge! Some neat Tailwind tips and tricks. 🎄 Advent of Vue: adventofvue.com/ 💻 Code: github.com/lmiller1990/aov2022/tree/aoc-11-twinkle-solution 🐦 Keep up with me on Twitter! Lachlan19900 If you like my teaching style, I have a book and two courses! 👀 (Book) Design Patterns for Vue.js: lachlan-miller.me/design-patterns-for-vuejs (YT_5_OFF fo...
TDD, TypeScript Tricks and Sorting (Advent of Vue #9)
Просмотров 1,7 тыс.Год назад
TDD, TypeScript Tricks and Sorting (Advent of Vue #9)
Vue i18n & Locales (Advent of Vue #8)
Просмотров 4,1 тыс.Год назад
Vue i18n & Locales (Advent of Vue #8)
Composables and Functional Logic (Advent of Vue #6)
Просмотров 1,6 тыс.Год назад
Composables and Functional Logic (Advent of Vue #6)
For Loops? Recursion? (Advent of Vue #4)
Просмотров 1,1 тыс.Год назад
For Loops? Recursion? (Advent of Vue #4)
Simple Functions and Conditionals (Advent of Vue #2)
Просмотров 793Год назад
Simple Functions and Conditionals (Advent of Vue #2)
Fetching and Debounce in Vue (Advent of Vue #1)
Просмотров 2,3 тыс.Год назад
Fetching and Debounce in Vue (Advent of Vue #1)
Pushing Logic into Composables
Просмотров 1,7 тыс.Год назад
Pushing Logic into Composables
Cypress CT 5/8 - Asserting Again Emitted Events
Просмотров 574Год назад
Cypress CT 5/8 - Asserting Again Emitted Events
Cypress CT 3/8 - Building a Better Mount
Просмотров 674Год назад
Cypress CT 3/8 - Building a Better Mount
Cypress CT 1/8 - Diving in the Deep End with Cypress Component Testing
Просмотров 4,4 тыс.Год назад
Cypress CT 1/8 - Diving in the Deep End with Cypress Component Testing
Cypress CT 8/8 - Better Type Safety, cy.mount & CT at Cypress
Просмотров 408Год назад
Cypress CT 8/8 - Better Type Safety, cy.mount & CT at Cypress
Cypress CT 2/8 - A Useful Pattern for Wrapping Components
Просмотров 1,3 тыс.Год назад
Cypress CT 2/8 - A Useful Pattern for Wrapping Components
Cypress CT 6/8 - Forms & Intercepting Requests
Просмотров 405Год назад
Cypress CT 6/8 - Forms & Intercepting Requests
Cypress CT 7/8 - A Suspenseful Test
Просмотров 278Год назад
Cypress CT 7/8 - A Suspenseful Test
Cypress CT 4/8 - The Seam Between CT & E2E Tests
Просмотров 444Год назад
Cypress CT 4/8 - The Seam Between CT & E2E Tests

Комментарии

  • @basarat
    @basarat 6 часов назад

    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 🤷🏻‍♂️

  • @alexanderzin
    @alexanderzin День назад

    This is gold

  • @kerim_id
    @kerim_id День назад

    I'm glad this video exists

    • @LachlanMiller
      @LachlanMiller День назад

      thanks I am glad you exist and watched it!

  • @basarat
    @basarat 2 дня назад

    Nice video ❤ However you don’t need a deferred promise for this. I’ll be happy to edit the code for you if you post a gist 🌹🫰🏻

    • @LachlanMiller
      @LachlanMiller 2 дня назад

      Heya, thanks for the comment, we discussed this already in the pinned comment

    • @basarat
      @basarat 2 дня назад

      @@LachlanMiller I see it now, Perfect 🌹

  • @mlv60
    @mlv60 6 дней назад

    0:47 not very important but potentially good habit/convention for both readability (separation of concerns) and consistency with vue's approach: you can extract the anonymous function from the jsx into an appropriately named const and then just simply pass it in the jsx event. this way any changes you make to the logic will be done in the logic part of the code (just like in vue) and if you are writing a more complex function it would look ugly and clutter the jsx. this way, simple or complex, your logic consistently shows up where its expected and you and your team will frown less :] edit: the reason i mention consistency with vue is that its easier to switch or be good at both the more similar they are, in general

  • @JulienMayer-fh7wj
    @JulienMayer-fh7wj 6 дней назад

    Great video but I think your explanation at 9:40 may cause someone to think React does not return "new" JSX

  • @sourabhajoshi2129
    @sourabhajoshi2129 7 дней назад

    Hello Miller. Really am v happy from your channel. can you please make one medium TDD application? OR If you have means, can you share it with me ?

    • @LachlanMiller
      @LachlanMiller 7 дней назад

      hi, are you asking for an example project with lots of tests? Are you looking for Test Utils specifically?

    • @sourabhajoshi2129
      @sourabhajoshi2129 7 дней назад

      @@LachlanMiller yes. Am looking for project with all test cases

    • @LachlanMiller
      @LachlanMiller 7 дней назад

      This one has some, check it out github.com/lmiller1990/vuejs-composition-api-course/tree/main/tests/unit

    • @sourabhajoshi2129
      @sourabhajoshi2129 7 дней назад

      @@LachlanMiller Thank you v much 😍

  • @sourabhajoshi2129
    @sourabhajoshi2129 7 дней назад

    Really very nice.. Thank you so much miller 🥰

  • @StandardLoop
    @StandardLoop 7 дней назад

    Really great video

  • @avimonnudash1762
    @avimonnudash1762 8 дней назад

    Beautiful

  • @mxsniper223
    @mxsniper223 9 дней назад

    thanks' a lot man <3

  • @pisyaone6635
    @pisyaone6635 9 дней назад

    How are you managing to run Vue and React at the same time? Are you utilizing micro-frontend technology on this example?

    • @LachlanMiller
      @LachlanMiller 9 дней назад

      No, I just import them both and mount the apps on different DOM elements. Eg <div><div id='react' /><div id='vue' /></div>

  • @shinobi1975
    @shinobi1975 10 дней назад

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

  • @josipbjezancevic5697
    @josipbjezancevic5697 10 дней назад

    This is great, thanks!

  • @FavourAkpasi
    @FavourAkpasi 12 дней назад

    a lot of react slander on the CS. i am still a react fan. but this video is a good comparison between both.

  • @oleksandraokhotnykova8672
    @oleksandraokhotnykova8672 13 дней назад

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

  • @Manoj-qf6lq
    @Manoj-qf6lq 18 дней назад

  • @ohsimtabem
    @ohsimtabem 26 дней назад

    Nice overview, as always! I'm doing a refactor of a legacy Rails app form to Vue and we have a mix of "Server config driven" + "Reward Early". We didn't want to discard the existing base field "rules schema" coming from the backend but, at the same time, we want to improve UX as the form is very complex/big/stepped. From my experience, the major problem with the "Server config driven" was dynamic/conditional field validation: a "field B" is required only if "field A" has a certain value. This led to duplication on the front end as we didn't find any good solution to share those rules and is indeed a source of bugs/inconsistencies. In some cases where the validation logic was so complex, we drop the client-side validation of that field and render the error only after validating on the server, so it is more of a hybrid approach! Thanks for another insightful video! Keep it up!

    • @LachlanMiller
      @LachlanMiller 26 дней назад

      I hadn't thought of the related field validation - eg only require field A when field B is checked, or something. Thanks for the comment, very insightful. Why are forms still so tedious in 2024 🤯

  • @Ari-lv8nc
    @Ari-lv8nc 27 дней назад

    why god , why

  • @kevinisaac4958
    @kevinisaac4958 27 дней назад

    You've got my subscribe. More videos like this please!

  • @mahadyounis8734
    @mahadyounis8734 28 дней назад

    Great

  • @adriatic123
    @adriatic123 Месяц назад

    Another useless feature. Vue project built 2 years ago is totally obsolete and doesnt work anymore. Talk about reliability, total failure. Next please

    • @LachlanMiller
      @LachlanMiller 29 дней назад

      Code doesn't just stop working - unless the environment changed, it should be fine. Docker solves this problem! What is the issue, I might be able to help you debug?

  • @serhiicho
    @serhiicho Месяц назад

    Good explanation! Thanks

  • @dontry1812
    @dontry1812 Месяц назад

    Great stuff. I am starting to hook on Vite. One important thing I hope Vite had out of box is Module Federation, which is quite essential to build micro-frontend. Do you have any idea how to build micro-frontend with Vite?

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Not sure about micro frontends! I have not worked with those before. Let me know iff you find out!

  • @lamborghinicentenario2497
    @lamborghinicentenario2497 Месяц назад

    Why is this so hard to follow

    • @LachlanMiller
      @LachlanMiller Месяц назад

      not sure, what part are you struggling with?

  • @jhlee111
    @jhlee111 Месяц назад

    I have been working on my vue3 project off on for last 2 years. Started with options API with SFC and later with composition. Watching your this video series helps me understand fundamentals of the framework. Your videos are very helpful especially in bridging gap between regular javascript/typescript world and fully tooled vue framework. You are one of the best teacher I found on youtube.

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Thank you! This is a really old series but I am glad you still found it useful. I re-recorded this entire course, check on Udemy!

  • @Pablitox26
    @Pablitox26 Месяц назад

    This is amazing! Learned a lot, thanks so much!! 😃

  • @dimasheiko
    @dimasheiko Месяц назад

    great video! please keep this tooling series going 👏

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan Месяц назад

    Let's always do alot of good

  • @rameshramesh-bd2wu
    @rameshramesh-bd2wu Месяц назад

    Awesome content, when can we expect your book ?

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Hopefully later this year, this kind of content takes a ton of time! I will send out email updates as they come.

  • @aidanwelch4763
    @aidanwelch4763 Месяц назад

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

  • @Asvarox
    @Asvarox Месяц назад

    I think there are couple of inaccuracies though as per Vite docs 1. when you run vite build it doesn't do typechecking and doesn't use tsc - it uses esbuild to get rid of types. You need to do the typechecking yourself or add a plugin 2. when building, by default esbuild is used to minify JS

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Definitely possible I made mistakes. I looked into your two points: 1. For type checking, I made a new react TS project. `npm run build` does this: > react-ts-vite@0.0.0 build > tsc && vite build So you are right, vite build does not do type checking. But many Vite templates will run tsc when you run a build step. Good point, thank you for pointing this out. 2. Did not check this in depth but I suspect you are correct. Wasn't expecting this vid to blow up so much, will definitely be more thorough in future! I think this still gives a good overview of the general tools but there is a lot more going under the hood.

  • @bk1507
    @bk1507 Месяц назад

    im confused in the hotmodule class you have an accept method that takes in a callback. but then the accept method is not called anywhere so where is the callback coming from?

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Confusing right... it is called in the `child,.js`, it is `import.meta.hot.accept(...)`. It is called as soon at the module is loaded. See here: github.com/lmiller1990/build-your-own-vite/blob/371c6a991615f881ac1562ebcbb2ffdf02fe9c6e/dev-server/src/child.js#L3

  • @bk1507
    @bk1507 Месяц назад

    This sounds a lot like an interview I had at canva a few years ago

    • @LachlanMiller
      @LachlanMiller Месяц назад

      I'll just share it, this was Atlassian, most likely a lot of people go back and forth between the two! I'm guessing this question has been used at a lot of places.

  • @aaditolkar
    @aaditolkar 2 месяца назад

    Great series! It can be hard to understand how these tools work at a basic level but you made it very digestable!

    • @LachlanMiller
      @LachlanMiller Месяц назад

      Thank you - I am glad you are enjoying it!

  • @Mac501pl
    @Mac501pl 2 месяца назад

    Great video! Nice to know how things we take for granted actually work

  • @Kevin-xo5ul
    @Kevin-xo5ul 2 месяца назад

    This is something I've been wanting to look into for a while, so great timing on the video.

  • @sravansuresh7460
    @sravansuresh7460 2 месяца назад

    This was awesome. Loving the series.

    • @LachlanMiller
      @LachlanMiller 2 месяца назад

      Thanks, glad you are enjoying it! Not sure what to focus on next, any recommendations?

    • @sravansuresh7460
      @sravansuresh7460 2 месяца назад

      @@LachlanMiller I have always been curious about source maps and how the browser uses them. I would also love to see a basic bundler & transpiler built with something like esbuild and what to keep in mind when working with them.

    • @LachlanMiller
      @LachlanMiller Месяц назад

      @@sravansuresh7460 Source maps for sure, to show this off I think we need a bundler / transpiler first, that might be next 🔥

  • @TheAlexLichter
    @TheAlexLichter 2 месяца назад

    I was today years old that it is Replacement and not Reload 🙈 Thanks for the video Lachlan 🙌🏻

    • @LachlanMiller
      @LachlanMiller 2 месяца назад

      Thanks! Been tuning in to you & Michael's podcast, great stuff! SSR / hydration isn't something I know well, might have to hit you up for some help when I get to making a video about how that works under the hood...

    • @TheAlexLichter
      @TheAlexLichter 2 месяца назад

      @@LachlanMiller Glad you enjoy the podcast ☺ Oh yes, absolutely! My DMs are always open 🙌🏻

  • @LachlanMiller
    @LachlanMiller 2 месяца назад

    The R in HMR is for "replacement" - I say "reload" in this video (and have done so for years). Sorry about that 🤦‍♂ Enjoy!

  • @mohamadybr
    @mohamadybr 2 месяца назад

    I like both frameworks. I used React a lot back in my uni and worked as a Vue(2) developer - soon I have to migrate to Vue 3. I like both! I enjoy the simplicity of Vue and the ability to move fast, but in all honesty, I prefer React! Although it is more difficult to manage, the amount of experience you gain is unmatched! I had to, forcefully, learn a lot of things in React to implement good Apps, but with Vue, it was just there! so far working with Vue2, I feel like I had to spend more time learning the framework than learning how to think about the problem I'm solving. To me, React gives more opportunities to be a better programmer as you have to learn more concepts and be more involved. On the other hand, Vue is just more relaxing to work with

  • @MilanDrazic
    @MilanDrazic 2 месяца назад

    Vue code is so dummy. Tomorrow you looking code and don't know what code is doing. Anti-javascript

    • @LachlanMiller
      @LachlanMiller 2 месяца назад

      Any examples of code you think is hard to understand in Vue?

  • @coffeemakir1977
    @coffeemakir1977 2 месяца назад

    Bro!!! This answered so many questions/problems nobody talks about since I looked at react years ago and now I have more questions 😭

  • @SXsoft99
    @SXsoft99 2 месяца назад

    One of the things that i find better in Vue over react is when you add conditions and other things like this The directives make the code easier to read when you have something more complex than a counter I have meet a lot of devs that comed from different backgrounds and they first used react and were apprehensive at the code but when using vue they felt all the pain points go away

  • @Usmankhaled
    @Usmankhaled 2 месяца назад

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

  • @rredington305
    @rredington305 2 месяца назад

    Godspeed CRA, my loyal old friend. I'm hooked on Vite for months now.

  • @hut_fire1490
    @hut_fire1490 2 месяца назад

    Oh man, gold stuff sir ! I wish you can go deeper, but this stuff is a very great introduction already

  • @PRonYouTube
    @PRonYouTube 2 месяца назад

    Loving this content on "JS infra", I think it's a very underserved area! You've earned a subscriber :)

  • @brightyouthacademy
    @brightyouthacademy 2 месяца назад

    Still amazed me

  • @armynyus9123
    @armynyus9123 2 месяца назад

    damn I would so much love to see this but I only have time after work hours and then I really physically can't look into bright white screens anymore. YT vids are where darkmode just fails.... uff had to scroll up even writing this. Maybe worth a consideration...