 Hello and welcome everybody. We're gonna start with a talk called build tools 101 Unfortunately, this talk was previously meant for a UX track or UI track and it was moved to the build tools track so if you're interested in build tools for other stuff other than JavaScript and front-end for for applications or libraries We will probably not be able to serve you well, but we'll try our best to explain you where the world of build tools in JavaScript went where it went from and where it is going right now and what is probably the best thing to work with today so let's jump in and Let's go over there to the others Yes, so the most important thing of this talk. We're gonna introduce ourselves first Person on the left that's Karl Yeah, hello guys I'm in front-end developer for more than five years now For me first kind of a lot and I've been mostly working on cloud projects But although my background went all the way to Java and PHP and so on and so forth So then I moved to cloud projects and I worked on front-end and I'm really like going to us enthusiastic, so I like to building like stuff together so that's why I chose the front-end part and I have a co-speaker with me His name is Tommy Sofa Yeah, that's that will be me When it comes to front-end, that's not mine my Main area of expertise. I call it front-end as a hobby Fah as we're used to call everything as a service. So I call it as a hobby Instead of front-end my expertise is mainly in analytics and backend stuff for for different Areas of our cloud offerings, so I'll be I was doing AI ops or automation analytics in Red Hat Island and Let's dig in so the motivation for this talk or where the idea of having such a talk came from is Originally there was an article there still is an article it's it's from your 2016 from Jose Aguilnaga who wrote an article for Hecramoon and This article is about what should I do if I want to start some JavaScript publication from scratch right now in your 2016 and right now we're in year 2020 and we figure out that it kind of Many of the ideas or many of the key aspects that he mentioned still applies though it kind of requires an update and We would like to cover that so if you would like to start some projects start completely different stuff today and write it in JavaScript or run right front-end for it What would be the advice tooling for you to use? Because the space evolved a lot and There are many different possibilities now than there were and the facilities that there were available Back then are probably not not relevant anymore. So we're gonna start with defining some requirements what we expect to deliver what we expect to Define when we are what what the project basically means for us. So Let's imagine a completely Fixtures scenario. Yeah, so we have a team of developers and they are Writing some JavaScript code and this code should deliver either libraries for other teams to use or a web application, which is their product and They want this application to be built and bundled and be able to deploy it in some Easy fashion so they don't need to spend tons of time every time they want to release stuff and They want it to be easy to set up to be easy to use for new developers when they come on the team to be do the same as well and Bear in mind. This is not This is not Cloud native stuff. This is still the legacy workflow on our laptops so we'll try to Try to describe how to do these stuff and since we are defining an application since we are defined defined or we are Defining in a library. We would like to use some kind of framework for that We would like to know to build everything from scratch in custom. We would like to incorporate some of the major maybe Yeah, something like stream you mainstreamly used frameworks as we have now so React angler and things like that. Yeah. Yeah, and we also use we want to use some new cool JavaScript goodies I don't know if you're familiar with them with them like spread operators federal functions and so on so forth and We also want our applications to be able to run on almost anything like for instance by e10 and so So before we can do that today we should learn some lesson from the past and That's an aspect which is easy to forget about that There's been some history in this ceiling. There's been some historical development around this building and there are some Decisions some decisions were made that kind of steer the wheel wheel of the Industry, so yeah, I'll pick from from here so First thing we need to define is we need some task on our task around In JavaScript, this isn't that easy and first task around that we choose to speak about Days back to the year 2012 That's for in JavaScript world. That's like Stone Age mostly even though it's eight years ago and the first Render was called ground. It was relatively easy to use but it has Drawbacks for the time it wasn't that Thrown upon like it is now it was using temporary files and it didn't allow piping tasks So this was year 2012 I Guess that most of you are familiar with something called jQuery the most laughed and hate dumb manipulation library I would presume so you see between the year 2006 and 2012 I call it like before the Stone Age because You usually just had one file with copied code from Stack Overflow You are either you injected to your JavaScript code in the HTML It wasn't that pleasant. I Was coding in jQuery as well and now I discourage you from using it because the new JavaScript UDs actually allow you much more than jQuery and even though if you are Skilled with jQuery and you know that if you call dollar sign You can query the DOM The new JavaScript UDs allow it allows that as well But but let's go back to the year 2012 When the ground was released Also a new technology was created It was fairly colorful bird called Bower It was aiming to deliver Like JavaScript packages to front-end world it heavily relied on on github Or any git library that was publicly available or available on your machine But it also had plenty of goodies for instance. It had integration in Ruby where you can install Ruby gem and it was basically served JavaScript library through Bower. That was really cool and around the time folks They were using grant Didn't quite like temporary files didn't quite like that the grant wasn't able to use piping So they created clever folks at that time created gulp It was much faster it allowed file piping and But it was becoming confusing If I say it became confusing my first job was to introduce Some task in gulp and I just opened this file with 200 lines of code and I didn't quite Know what to do. I just knew that the gulp took a file and at the end there was a different file And for me it felt like a black box even though there's just some JavaScript and such I didn't quite understood it so That's actually one of the reasons why these technologies were either replaced Completely or renewed So As the as the browsers evolved for instance es6 es7 es next was introduced HTTP to code splitting tree shaking magnifications and sources and these tools of dark age learned that Useful anymore Because they didn't quite keep the pace so and also We got introduced to npm be him off of JavaScript libraries you can Think of any library if you type it in npm. There's a high probability that the library is already there The fault behind the npm There's Google so it has like Huge servers to back it also So it's it's really really nice technology and also introduced a task runner in npm So you don't really need and the tasks are answering more because you have npm or yarn or any other package management that can also run run tasks and Right now. It's easier to configure the config to build tools Than it was before and though some might argue that the package is really complicated and We'll show you it is really complicated Trust me. It is less complicated than gulp I would add to it to that. Yeah, one of the main reasons also why it was replaced is that Current tooling at a time wasn't able to Properly adapt to the new features of the ecosystem around it. So we had HTTP to Protocol features like code splitting or we require tree shaking for our not as well-behaved developers as we used to have to remove that code from our bundles and All these kind of stuff were not possible Back then with calp or if they were possible. It was really hard to achieve them across the board. Yeah, yeah, exactly because for instance the gulp just took one file and Addended to those another file But you want to have three shaking among all of your code files or code base. So, yeah Thanks for Russian so And the state of the JavaScript now is not easy You have so many options to choose from Starting with the package management. You can either choose NPM or yarn, which one is better? There's one side that yours yarn is better. There's other side that yours NPM is better Both are good both are bad. Let's focus what are a good edge and let's talk about it. So Yarn is from Facebook and PM is by Google both giant companies Yarn supports workspaces. This is really awesome if you are working on a large project and Are unhappy with your code base? You can go to to Mono repose and you can help you tremendously It's really great if you look at for instance, how Babel is doing it how react is doing it How pattern flies you in doing it they use Mono repose you have multiple packages in one repository You have same developers doing the code code reviews and so on so forth You aren't also introduced block files as a first NPM followed You're also introduced local caching NPM followed But at the same time NPM comes with the node. Yes So whenever you install node. Yes, you automatically have NPM in order to install yarn You have to install it through NPM. So it's kind of cumbersome and if you have like a large team of developers I Would say it's probably safer to use NPM because I personally like NPM as well Yarn is nice. It's it's for me. It's niche here that you can use but Yes, it's drawbacks and also with what is really awesome in NPM. It coins contains Npx That's really awesome tool. You can run your commands on the fly That's that's really great. And I would also like to introduce PNPM Although I don't think it's going to catch up as much as yarn NPM But me personally I come from Java world and I come in really hard to that if you want to run your newly pulled git repository you have to run NPM install on it and This PNPM It doesn't download the file the libraries it hardlings them the way Linux Fortunately this talk is not about the package managers only and We're gonna focus rather the build tools because we think the package manager of choice from the previous two big mentions so yarn or NPM Either of them can do the job sufficiently and you won't run it into into any issues anymore so instead we're gonna focus mainly on the build tools and What's available for us today are these three? Big projects. Well the one on the left the web pack That's kind of the behemoth on the of of the industry nowadays. It's like the mega build machines Big a build machine that can build nearly anything and and is really really powerful tool But there are also the other two Parcel and drop each of them has their own advantages and disadvantages and we're gonna cover those later in the In the talk as demos, so you're gonna see how they perform and what's the difference and how that behaves So what it comes to that pack as I said, it's an old-purpose build tool also the It requires configuration. It doesn't work. Well out of the box you Usually and in really 99.9 person cases you need to have some configuration for it Do since it's So used it and it is extensible it already has a huge population of plugins and Other Extensions that can help you with the build process On the other hand the parcel and throw up are much younger projects Though they focus each of them on a different aspect of the of the build process When we go from the opposite direction from the roll-up Roll-up is focused on building libraries. So if you're building Library to be shared cross teams or are being published roll-up is Really focused on this type of Loads of this type of tasks They introduced the static analysis Before the build to employ tree shaking there. So They claim and we're gonna later find out if it's true or not They claim their build size when it comes to libraries is much smaller than what comes out of that pack and Also, they are focused on building the ES modules and also Out of these ES modules, they can build any other target so they can build you DM. They can build other stuff as well and In the middle we have parcel which is deferred to and that one is actually focused on the Other target that we have that's the web applications It introduces a zero config builds so When you don't want to do any extra set up any extra steps to to actually Spin up an application and make it running parcel can do that for you without any Configuration required and since it's written from ground up. It's much it's claims It's much faster than what back since it can use multiple cores. So you can have distributed builds And it also has file system caching. So if you're building the application And you want to rebuild it. It's gonna take much less time and Since we're building packages, we don't need just these bundlers and compilers. We also need something called transpilers, which is a Which is a I think an invention in The biggest invention in JavaScript world And we have we listed two two main ones When it's type script, which is like a flavor or superset of of features above JavaScript, but it allows you to use all that fashion in JavaScript all that all that Quirks and cool features that new JavaScript offers but So it's so it's easier for developer to to develop the Application but also when it's compiled it can support all the browsers which don't support this type of syntax or this type of features It also was was the main advantage and it's it's also written in the name of it. It's type script. So it's statically typed and Therefore it allows static verification of your code. So You can build much more robust applications out of the box basically via type script the other tool It's called Babel and it's like Set for JavaScripts so it's a extensible parser for JavaScript files That goes through each of the files and do some changes in there. So it's basically It's a find and replace tool for different syntax sugars or different Module types basically and things like that. So so you can modify the files that you are bundling or compiling afterwards to adhere to some kind of a standardized syntax so We're gonna focus rather the Babel stuff than type script because type script It's fairly easy to use. You just use basically a bit different language, but Babel is used over the regular Java script that you have It's it's just another tool in the tool chain that you're gonna Use as a step in your in your build process As you can see we have listed few config options in there that's What Babel consumes It has some presets which is like bundles of plugins So you don't need to define what plugins to use and what what extra options these plugins have to have Set up to support your use case and then you can list also your plug-in. So as you can see it's really really extensible and You can you can define which Babel config to use based on your environment and based on what kind of build you do so I Think that's the way Okay, and up with the boring stuff What was before where it's now and such Let's focus on some examples We have prepared a two scenarios one is web application web application What the new web application usually has which was react from from react framework because using react framework you might argue that Would like to use Angular in the bull chain. It wouldn't probably change that much We also want development server. So whenever developer writes this awesome code the browser refreshes and Developer can see These new awesome changes We'd also have tree shaking because we heard about new feature that's been introduced in JavaScript like a year or two ago that It's that code analysis analysis If you've ever worked in see you probably heard about it as well JavaScript heard about it two years ago. I believe And we also want one configuration file for both developer developers and the actual production As it is as it is we want to also have static files like styles images Videos whatever you choose So let me share with you Demonstration Over here so first of all Let's look at at the web pack application How we'll config for that pack application could look like as I said It's fairly easy, but at the same time Just just I'm gonna jump in that we have a single just to just introduce the demo a bit We have an application And we're gonna build this application via different tools. So we're gonna see how Easy or hard is to come over the configuration for such scenario and How the build behaves basically what kind of build you get out of it. So if it's bigger smaller How the linking works and stuff like that. Yeah, thank you. I probably forgot to tell it So as you can see here is the back config file Many of you probably saw it before You have a lot of plugins just to copy some files create HTML's Extract CSS then you have these rules nobody really understands them Then you have the dev server and you also have This optimizations split chunks chunk all I have to Google that all the times just to be clear it's optimization thing and It's something the clever guys at Google figure out nobody else can understand it as well and Let's see how do not this one, but how do Actual build looks like This one Yeah, so If you were if we were to run npm start or or npm npm start for instance This is what you would see This is what you would see in your command line It says that you have like a couple of JavaScript files One of them is seven megabytes big. Wow. How that happened Then you suddenly run npm run build and You can see that the vendors is not that big because of the tree shaking that comes with a webpack That's a really awesome feature But as you as you saw The config is not that easy When it comes to the configuration This is Karl's daily job. So he's basically Doing this kind of stuff on daily basis But it still took him about our to build it from scratch Just to be sure that all the required stuff are in there and to be sure that the application works So if you change something in the application layout You would still need to go to this config file and adjust it or if you choose to use a different for example styling thing Not just plain CSS or You would rather use sauce or something else You would need to probably adjust the config so it's It's not as easy as as it might My look like yeah. Oh, it doesn't That's probably fulfilled Let's move on to to parcel config file. I can't find any find any That's because if you want to Run a parcel build You just do this just Run one command parcel build for instance today couple dogs application You want it to be On public URL just just do just a slash You don't want any source maps and you want it to be in the in one folder We're pointing we were pointing it out To one HTML file. They're not pointing it to the JavaScript file because Let me show you how the index looks like This is something similar to what it looked like before like in 2014 15 or so You have just one one script included in here And you would expect that in the index.js there would be new entire application No, we have classic React application that is using Imports and such so that's a very clever idea But at the same time let me show the preview The cold start can take a few seconds it can take up to tens of seconds and I Showed you do the dogs application. That is fairly fairly okay fairly small But what happens if you are going to use a library that doesn't fully support tree shake or Reliance and reshaking you might end up with a bit of problems here This is why everybody hates JavaScript developers because their applications are huge so that's because there is no tree shaking probably and That's one of the problems with presenting It's one of the problems That has So as we said webpack has a huge selections of plugins It is large community. So whenever you find something like You stumble upon a problem the terminal you also do an error You can just paste the error into into Google and probably stick overflow has tens of replies to it It is a relatively good documentation. I Could find anything in there But it's hard to set up and It requires a lot of world boilerplate. There are tons of Thousands of boilerplate applications just to bootstrap react application bit material UI bit webpack If you Google material UI Webpack react into a github. We will probably find tense repositories that does just this it all comes back to the extensive configuration because it's not easy to figure out the configuration rate and For simple use cases You still need a lot of configuration and you still need to know what you are doing with the webpack So it's usually easier to start with some bootstrap and you're basically stripping out of the bootstrap what you don't need and Yeah, that's probably not the best idea to yeah to spend days before you even start developing application So you can go to parcel. It's easy to set up as I said You just point it to an HTML file where you include your JavaScript files Yeah, but it doesn't have has to shaking which is Fairly problematic. It is some experimental ones. I tried them and They work okay ish sometimes they work sometimes they don't and It's harder to use in specific projects if you want for instance custom variables from from environment you have to Change the build and such the thing is with tree shaking is that if you use well-behaved Libraries or dependencies like materially UI you don't need that you you can really Work your way or make the application work even without the tree shaking required So but if you use something which is not where it's in a way that it's it It relies on tree shaking You might end up with a big big chunk of JavaScript Okay, you might ask how to actually write an MPM package library Many of you will probably and are probably writing web applications and some of you I believe are writing code and library so Let's define the library we want to create It has like you You export one huge chunk of file called index dot j s That has all the files and you also want to export Small parts of your library in order to support the tree shaking actually So we're going to show you how to do that It also Has needs a support for named and default exports you Can't have 10 default exports in your index dot j s. It's not how JavaScript actually works and And it Remove the external libraries. You don't really want to have a library that also includes your react and redux and other libraries That's that's how it works. Yeah, that's these are requirements We expect from our build tools to be able to deliver based on our library code. So If we are developing a library, we want the build the actual output of the build process to Fulfill these needs for the developers that's going to use the library. So Yeah, so Let's let's dive in This is how our web pack config might look like these two functions are fairly easy and are the core principle of Having multiple exported files As you can see here, we export index j s and we also export everything that is in Source components. We have two components in here in here And it bundles into multiple Types of bundles UMD It doesn't have ESM as of yet About that pack 5 promised it to be there so we'll see about Like in two three months will probably be there and You might say that it looks kind of similar ish the rules are still here and There are no plugins We just defined the externals here Based on the dependencies. So please have your dependencies in order not to put Develop developer dependencies in here. It would be quite strange And what what it looks like on the when built it creates three Folders three like environments one is common. Yes, the other one is is modules ESM and then the other one The last one is UMD That's where you would go if you want to have like one index. Just import it You also tell you that in your package Jason Jason you should always include main and module so when You are importing something from if someone is going to use your library and they import your index They the bundle file or the bundler chooses the correct one So, yeah, let's look at roll up. We were discussing it before. Do you have any metrics on the build? Yeah, yeah, definitely. Definitely. Thanks for pointing that out Yeah, so this is how the Output of build would look like There's just just couple of kilobytes For each environment It's nothing too to fancy nothing too complicated So we don't expect anything huge. We don't expect anything to like strange to be happening here It's better in mind There are these are kilobytes So let's move on to roll up. They promised us something better It promised that promised us that it will be the bundles will be smaller that they support ESM and That it will be much better So we still have this one function to grab all things in source code There's some some globals some externals some babel options a few plugins Those are mostly just to resolve JavaScript post CSS Injects and and one on our analyzer So we have two two environments common JS and ESM and we also have UMD and Output looks like the ESM actually looks like Run this Yes, I'm actually looks like ESM. It does have exports and imports Rather than in the web pack world where you have like like this strange thing So that's a huge plus You have just a small files tree shaking is coming out of the box. That's that's awesome You also have other Environments common JS and UMD just to support all the browsers or or any other goodies and Let's look at the the statistics Okay, so for It has the file files are really small it has only few bytes No, no kilobytes just bytes As you can see, that's really really nice even for the UMD It's just just a couple of bytes It is really nice to see so Yeah Let's dive back to Here so what we saw is that web pack It's just that back. It's what we expect it from but they're all up. That's fairly interesting The bundles were smaller. It supports. Yes. I'm not simply and Even though it has name text ports like me personally I once found out that my build was broken because of name text parts in webpack and we found out all the way in production because tests weren't failing at all Test weren't failing at all Nothing happened. It just happened only when we used the library in production because of the name text part because webpack assumed the name next part was default default so That's when we looked at the build tools and we saw the roll up and with the roll up We didn't experience this issue anymore So on the other hand when you compare webpack and roll up configs, you see not much of a difference. It's it's fairly Big and structured configs. So you still need to come up with that. You still need to invent those. Yeah, yeah, exactly and It also Drawback for webpack is that it doesn't support ESM modules. As I said webpack 5 Promising them. We'll see they deliver ready deliver them Yeah, so on a bit lighter note We kind of draw some parallels and take this Lightly as a bit of a joke not too seriously When we compare these two build tools We kind of draw a parallel between Vim and webpack. It's a Really robust tool big tool that can achieve nearly anything you wanted to achieve but you need to know how to configure it you need to know how to use it and It's not always as easy as you would expect it to be to support different scenarios on the other hand if we're writing a document in Vim and we want to Build a PDF out of it or or just have a text document If we use parcel we can draw a parallel to Office world office word Which gives us what we expected to so it gives us some styling We can draw a document we can include pictures and we get a document out of it but we can't we can't Use this as a as our IDE for example Or we can but we are not that masochistic Yeah, and the last one is throw up which is Which is like an IDE basically which which allows you Really great possibilities when it comes to going Through the rabbit hole to to the insurances of the code. Yeah, but when we want When we wanted to be easy to use it's not As well as easy to use when we compared to you must work for example Just bear in mind these three package libraries were chosen by us They were deliberately chosen to draw a parallel between webpack because oftentimes when I speak to developers They use webpack even though they don't understand it fully. So we wanted to show you that Okay, we have webpack, but we also have a parcel We also have a roll up which is throw up is really awesome for libraries parcel is really awesome for small Applications and don't be afraid to experience with them And you can go dig deeply and find some different Built tools that fits your needs So yeah, it was the aim of this presentation. I hope you enjoyed it. I hope you learned something new just Enjoy the time here and Last but not least if you are interested in the source code We use for demos and you would like to see or build this for yourself Or you want to use the config files? You can find it on that link in the middle on github and That's probably all of it from us. Thank you for attention. Thank you for listening to us And if you have any questions, please go ahead Yeah Yes, yes, so the question was that if you're new to the industry or new to the Frontend development world and you want to start a project from scratch it's still fairly complicated to set it up and That's that's not a question I would suggest to you try using some some Pre-configured configs like either that but if you're starting up like writing application on the library You can go pretty well with the parcel which is a zero config thing and you just need to install it via node which adds it to your package.json and Then you would just define one build command that would build the application for you. So This is maybe the biggest simplification we can offer for for onboarding Yeah I wanted to point out that there are so many boilerplates. You just choose which one you want download of the Stake and you are free to go but with these boilerplates There's a problem that you might end up with something that you really don't either don't use or don't need as with any boilerplate and Any other question? Okay. Thank you very much