Webpack 5 module federation and more

[Music] i think i am ready to rock so in this video we will talk about webpack 5 and all the new stuff that it offers let's roll you can watch this video either on youtube and if you do please consider subscribing or liking or whatever you do and whatever youtubers keep asking i don't ask very often but you know once in a while cannot hurt and the other way that you can watch this video is probably by being forced right you're at a meet-up or you're at a conference and this is one of those pre-recorded talks that you'll be watching so because of that i will also introduce myself because you kind of want to know your speaker right who is this that is talking to you on a youtube video that might be a little bit off so you can find chapter markers in the video so you can switch if you wanted to so let's dive in and marvel at this you know hours worth of photoshop that i did for this talk um here we go so aris who is um organizing this meetup um link in the description he told me tim webpack five is awesome but it's also fantastic and four was also fantastic but now we are five so why not do some like fantastic four kind of superhero theme and i thought yes i like superheroes um i don't really watch all the new marvel videos or marvel movies but actually those 60s cartoons are awesome so that's where this cover came from okay on to the talk now so as i said just now i'll introduce myself because this is actually conference talk so my name is tim you can follow me here on twitter um i am dutch but i live in paris so born and raised in amsterdam and that's also why my accent is a little bit off it's not entirely english it's not really french and it's a little dutch whatever there you go that's me so i work as director of front end development at valttec and i'm also a media developer expert at cloudinary and i have a little bit of news that i am very proud to announce today in this video is that i am also a next ambassador yes that just happened and i'm really happy because you know what i love next and next is in almost all my videos and all my talks so there you go thank you guys that's super awesome okay now it's time for the talk so what is new in webpack 5 but first i would say let's do a quick refresher on how webpack actually works and why those new features in version 5 are so much better than what it was in feature in in version 4 even though it's already cool right so here we go so webpack is a static module bundler for modern js apps i guess everybody kind of already knows this and you just use it as is and it works really well right so let's talk about what did we do before web pack like steve ballmer is like truly back in the day when he was shouting developers look at him go man such majesticness anyways so back in the day we had static assets on our website right so we had them in the source and they were just pushed to the browser and that's it if you had 10 javascript files we would just serve 10 of them then we actually started to think about okay so now we have a lot of small files but then http is a little bit slow and if we load a lot of files there's too much overhead things are slow so we decided you know what we need to concatenate them and we had php magic we had other stuff too right but we had some sort of magic where we can concatenate things like two javascript files would become one bigger file and that would actually be faster and then we got things like yui compressor and a whole bunch of others that i won't dive into now that made our lives a lot easier but there was a lot of you know there's a big tool set you needed a back-end developer and a front-ender to to do all this stuff and then jumping a whole bunch of steps here but then we got to the era of webpack where basically webpack still does magic but actually it's not that magical i have another talk or a video where you can actually see how webpack really works on the inside and i'll link it in one of those cards but basically webpack would have a dependency graph you would include everything into your main file and then webpack would be super smart based on loaders and all the things that it has to output highly optimized assets for your website wow that was a crash course right there so um i photoshopped a lot for this talk so um i just kept like three or four of them in there and only for the parts that count because it was just too much work so now with that we know webpack let's dive into what version 5 actually can give us right so um there's a whole list here right so um i know there's a bunch more that i'm going to tell you now but this is more of a shorter video to get you inspired and try to use it right so faster builds with persistent caching we have smaller bundle sizes we have better long-term caching and the big one module federation right so let's dive right in and i know people who are a bit more expert-like on webpack they know there's a bunch of other stuff i know too and i'm really excited but for this video we're going to keep it relatively short okay so how do we have faster builds right so basically the thing that they did is really smart the caching is really good now it was good already but now you can also have cached stuff module stuff that you use all the time on the file system right so it doesn't have to repopulate or re compile everything the moment you hit save or when you click build right so stuff that's in use all the time is actually cached so it's much easier to grab and put in and therefore you have faster builds it's a very simplified explanation but this is actually really really convenient then smaller bundle sizes we all want smaller bundle sizes right and you get smaller bundle sizes generally by something called tree shaking so a tree shaking is kind of like you have a whole tree of all this javascript stuff and stuff you don't need you just snap off and you don't use so webpack 4 does this really well already but in webpack 5 it got way smarter so they can actually even if you use a specific part of a module it can inside that module now also remove that code so everything becomes even smaller really really nice stuff guys i don't know how you do it but it's it's magical then we have better long-term caching which is also a pretty interesting thing and it's actually kind of an open door but what they did now is if you add like well let's say what we used to have when you add anything to your file and you make another build the file names would change based on a hash right the hash of the file inside and therefore if you now deploy all your stuff for a new deploy all files are invalidated because they all have another name so the browser have to re-fetch them and now if you add a comment or you change a variable name or stuff like that it won't actually change the name of that junk for you anymore because there's not that much different it still works right and comment doesn't change your code a variable name doesn't change your code so because of that browsers can now cache the same way as they always did but because the names don't always change on every update you don't have to recache right so less cash invalidation and therefore better long term cash this is a really good one guys and then the big one i'm calling this the big one module federation because there's a whole bunch of cool stuff that now suddenly happens or is possible um actually model federation already worked in webpack 4 through a really cool plugin i'll link that below but now it's native right so basically i would say yay for micro front ends like in a whole bunch of projects that i do at work which is pretty big enterprise stuff for example we have a whole bunch of separate applications for a car brand or a dealership right we have checking license plates it's a little app we have a car configurator is a little app we have a checkout flow for all those different kind of i leased this car but i buy that part myself and there's like that's a little app like we have a whole bunch of applications and the drawback of having all these applications is that you cannot really share your bundles every application has its own full bundle size and you kind of want to figure out how you can actually expose certain features from certain bundles so apps can share right and this is what module federation does in webpack 5. so basically each app or each bundle that you build can expose or ingest external components or functions or whatever so you can make one bundle with the header and the footer and that's just exposed and then all of the apps would just get those and guys this is life-changing for big companies that have a whole bunch of applications all working with webpack that now constantly has to serve all new bundles for every user but now with webpack 5 with module federation this is no longer a problem yes i can finally re-architect all those big systems and make it just way better for the end user and that's what it's all about right so i went really quite fast over these and now let's look at the braking changes because basically what they did is they decided okay we have a new version now there's a bunch of breaking changes let's do them all now so in the future we can be more stable because webpack tends to be a system that is just i set it and forget it i touch it twice a year right it just works so you don't want to have too many breaking jsons over time you just want to have it once so fix your stuff right so what they did is from webpack 4 there's a bunch of things that are deprecated so right now that deprecation warning it still works but it's a warning in webpack 5 that's gone so if you are moving to web pack 5 and you have a whole bunch of those warnings make sure you solve those warnings before moving then some of the built-in plugins have changed uh we don't we won't discuss which those are but it's like the way you give them properties and stuff like that it's just streamlining things then and this is a bigger one that has a bit of hate from some people is that by default webpack would actually polyfill a lot of things from node.js right so if you build a node component or node module that would always work on the web because of some polyfills and that's really really cool um but it's also a bit bloaty and it's like now they decided to remove it and you can write your own polyfills to be super optimized and it's also better for the code base of webpack 5 but i can imagine people who are note module builders probably now might get a bunch of tickets in there or issues in their githubs saying hey but it doesn't work in the browser and they might complain that they actually have to add support for webpack now you know what i guess for the future this is the way to go you know dino is coming in at one point and so they kind of need to streamline stuff but this is kind of a hard one and now the last one should you upgrade right now i would say it really depends on your project right if you have a completely customized webpack setup and you know what you're doing you've worked with that all the time this is an excellent moment to just switch right if you know it already you have custom stuff you can just update things but if you use something like you know react scripts or your view cli or whatever kind of packaging system that gives you all the features you want as blackmagic don't touch it just yet let react scripts add v5 add fusela latv wow let view cli add some new stuff and then just benefit later on right that's just the easiest way to go so this was like super fast like the fantastic five web pack um an overview of webpack five so i really want to thank you for watching and you can follow me at tim bennex you can also subscribe to me on youtube where i do a whole bunch of those kind of videos i have like 41 videos out now at the time of recording so there's a whole bunch of stuff you can dive into and last but not least i actually decided to start a sponsorship or donations page at buy me a coffee um i have done this because there's so much work that goes into these kind of videos this is probably like take 50 like it needs to be correct right so um if you wanted to please consider either subscribing or even donating i would love you forever and um that's it thank you very much and have fun at your meetup cheers