Bun Crash Course | JavaScript Runtime, Bundler & Transpiler

what's going on guys so there hasn't really been many new technologies outside of AI that have really got me excited in quite a while technologies that have to do with web development so this project bun has really caught my eye and it's an emerging lightweight JavaScript runtime and toolkit that's gaining traction really fast I I believe it's been around about a year but 1.0 was just released and in this video we're going to talk about what bun is look at its capabilities and we're going to jump in and look at a lot of its features now before I get into to anything I just want to say that the JavaScript ecosystem in general has been very just all over the place for years and years and I think it's getting better I think that this is a a huge piece to the puzzle because bun is not just a runtime like node.js it does all that stuff but it also includes a bundler for your front end it includes testing it it it's an all-in-one toolkit which is what I really think we need in the JavaScript world to to have a respectable organized ecosystem so I'm really excited about this project and this video so let's get into it foreign guys so let's go a bit further into what bun actually is so it's a JavaScript runtime and all-in-one toolkit to serve the modern JavaScript ecosystem and when I say JavaScript runtime this can be compared to node.js and Dino in fact bun is actually a drop in for node and I'll talk about that in a minute now it's not just a run time to run JavaScript on the server it also includes a native bundler a transpiler task Runner and npm client so you can bundle transpile install and run JavaScript and typescript projects and in the past we'd had to use all these separate pieces these separate Technologies to build full stack applications with JavaScript we need node.js for our server a bundler like webpack or Veet for our front end testing Frameworks and so on however bun has all that stuff baked in so I think it's a step closer to just having a single tool that can do everything that we need to build full stack applications with JavaScript and typescript not to mention it's also super fast which I'll talk about in a bit so bun is written in Zig which is a newer low-level language that is designed to be fast safe and simple and from what I understand it's supposed to be a replacement for C and C plus plus so it's fast and Powerful yet small and simple so it's less complicated than those other languages and it's super fast now like I said bun is described as a drop in replacement for node.js so it's completely compatible with node apis and it's also compatible with the npm ecosystem so you can use bun to run your node.js applications and you can also use bun to install and run npm packages but you do have additional optimized apis and tools that you don't get with node.js and Bun is not just a fork of node.js it's not built on the V8 engine like note is it's actually built on the JavaScript core engine which is the performance minded JavaScript engine built for Safari in webkit and it isn't dependent on node or npm so it's a very minimal stack and of course this increases performance which is one of the main goals So speaking of goals there's three major design goals that that bun has so one is speed bond is faster than both node.js and Dino with little dependencies and extending the JavaScript core engine it's able to achieve this another aspect that increases performance is rewriting JavaScript JavaScript implemented apis in a lower level language it also aims to have an elegant API it provides a minimal set of Highly optimized apis for performing common tasks like starting an HTTP server writing files and so on and we'll get more into this in a little bit also a cohesive developer experience but is a complete toolkit for building JavaScript apps including a package manager test Runner bundler so you don't need to use a bunch of different tools to build your applications so let's quickly look at some of the features and advantages of buns so we talked a bit about Speed and Performance and that bun uses the JavaScript core engine and it uses native speed functionality implemented in the zig language and just to give you an idea you can take a look at this image that compares some of the common actions that we can do with node.js Dino and Bun so server side rendering react you can see that button is way up there sixty six thousand plus node.js is only at thirteen thousand HTTP requests per second and then with a web websocket chat server messages sent per second you can see bun is over a million node is only at 179 000 and loading a huge table so having to do with making queries to a database you can see bun is is way up there and this is using SQL Lite all right so very very fast in in many ways and like I said it's a drop in for node.js so it's compatible with all of the node.js apis it's it has all of the um the built-in modules like FS path Etc it also implements the globals like process and buffer so you can run your node.js apps with bun it also works with node modules so you still have a package.json you still have a node underscore modules folder to manage all your dependencies there's also a native npm client so when you install npm modules you can use bun install you can use bun run all types of basically just the same things that you would do with npm except it's supposed to be up to 30 times faster and take those statistics with a grain of salt that's just what they claim although using it you can tell that it is much faster so no module Madness this is one that that is big for me so with node.js they've been trying for years to implement es modules without affecting certain things and breaking certain things and you can do it you know you can edit the package.json and you can add the type module and so on with bun you can use either the es module syntax or the common JS syntax you could even use them both in the same file and have no problem so that's something that's that's big for me web standard API so bun implements apis like fetch websocket form data Etc of course you get typescript out of the box it's a first class citizen in bun uh simply use a TS or TSX extension and directly execute your typescript files jsx so yes button supports jsx out of the box it transpiles jsx syntax to vanilla JavaScript it assumes react but you can change that within the TS config file so there's a watch mode no more tools like nodemon when we use node.js if we make a change on the server we have to restart unless we use something like nodemon well with bun you simply can do dash dash watch and it will do the same thing it'll reset every time changes are made there's also a hot hot reload option as well environment variables so just like with node we can have a DOT EnV file except we don't have to install a package like dot EnV it just works and it will read your environment variables integrated bundler so this is huge button has a built-in bundler that's faster than webpack and parcel and many others it'll take your source files and bundle them together into a single file that can be loaded into the browser and I'm going to show you how that works in a little bit and then it even has an as a built-in sqlite database that you can use for your applications which is very convenient for development and those are just some of the features and Advantage there's more that I didn't even mention there's also Frameworks that we can use with bun of course we can use express and and KOA and all that stuff there's also a framework called Alicia JS it looks really interesting and it's supposed to be around 20 times faster than Express and it's built to be used with bun all right and again take those those um comparisons with a grain of salt now when it comes to insulation remember a bun is still very new 1.0 was just released so at this point if you're using Windows you do need to use the windows subsystem for Linux to kind of get the full experience if you're on Mac or Linux then you can just use it and you can install it either with curl or you can even install it globally with npm all right I'm on a Mac but if you're on windows again I would suggest using the windows subsystem for Linux all right so enough talk enough slides let's go ahead and jump in and see what bun has to offer all right guys so this is bun.sh this is the official website for bond this is where you can find all the documentation and you'll see that there's a command here a curl command that we can use to install now notice down at the bottom it says supported on Mac OS Linux and WSL so if you're on Windows you're going to want to use the windows subsystem for Linux now I have a video that shows you how to get set up it's it's I think it's a 12 or 13 minute video it's quite old it's a few years old but not much has changed so you can follow along with that to get set up I'll put a link in the description if that doesn't help there's tons of other videos out there that will help you get that set up all right and that's if you want to follow along you can just sit back and you know look at the features and see what this is all about so there's a few ways to install if we go to docs and we go to installation you'll see that we can install with curl but we can also install globally with npm if you want to do it that way if you're on Mac you can also use Homebrew you can also use Docker you can also use Proto so I'm going to stick with this this curl command so I'll grab this off the home page now I already have bun installed so it's all set up on my machine but what I would do is paste that in run it and it's not going to tell me to run this command but if it's your first time running this it's going to also have you do exec slash bin slash zsh so that will make it so that you can use the bin command I'm sorry bun command so once you do that then you can just try bun dash dash version and you should see the current version which at this time is 1.0.2 okay so now that bond is set up let's open up vs code and I just have a an empty folder called bun crash and I have my integrated terminal open down here and the first thing I'm going to do is run bun and knit just like we would with npm we do npm init It'll ask for a package name that's fine entry point index TS is fine and what it does is it creates a little more than what you would get with node.js with node.js you would just get the package.json and the lock file so here you're also going to get the a couple things the the typescript config file which we're not going to need to do anything with but if you want to customize typescript you can you get the actual entry point which is this index TS file which just has a console log in it you get the the bun lock file our package.json along with the peer dependency of typescript and the dev dependency of the bun types so those installed and you can see we already have our node modules folder so we don't need to run npm install we have that stuff set up also a git ignore file as well Anna readme so those get that that's what we get to start off with so to run a file we can say bun run and then the file so let's say index.ts and we get hello via bun because that's what's in this index TS now you'll notice if I do Bun Run index without the extension it says missing script index so you do have to add the extension onto the end there so what I'd like to do first is just create a very simple server using the bun API using the bun.serve which is similar to the HTTP module in node.js but it's much faster and it's more optimized it's not something you'd really use in production just like you wouldn't use just the HTTP module with node but I do want you to know you know the very basics of how that works and we can see how to use a bun API so let's create a variable here called server and we'll set this up with bun dot serve and we don't have to bring bun in we don't have to import it or anything like that so in serve let's pass in an object and I'm just going to disable co-pilot for now disable that because I know that can get kind of annoying okay so we have our object and then we can Define the port that we want let's say we want to use port we'll say 5000 and what we do here is add a fetch method and that's going to take in a request object okay and then in here we want to return a response so we'll say return new response and then whatever we want to put in here I'll just put a string of hello world and then down here we're going to do a console log and let's do a template literal here and we'll say listening on Port and then we'll just put in that pour actually we have to do server dot port okay so now if I come down here and I run bun run and then index.ts we can see listening on Port 5000. so we've created a very simple web server and if we go to the browser and then we go to let's go to localhost 5000 we should see the hello world okay so very simple this is comparable to using the HTTP module with node.js now what's cool about this is we have a watch mode so with node you would have to install something like nodemon because you'll see if I try to change this like let's say hello bun instead of hello world and if I come back over here let me just make this a little smaller if I come back over here and I reload it doesn't change I have to restart the server however what I can do instead is use the is use watch mode so I can say bun and then Dash Dash watch and then the name of the file which is index dot TS and now it should be in watch mode so you'll see it says hello bun let's say I just want to add an exclamation save come over reload and now you can see that that exclamation is added so it's similar to as if you were using nodemon there's also hot reload so if you're if you're dealing with let's say you have a react app and you're dealing with State and you don't want that extra reload to have to change your state you can use hot reloading by simply doing instead of watch you can do hot like that and that should work as well we're not going to see any difference here but if we had some State you would see the difference there's there's some examples in the documentation if you want to check that out all right now the next thing I want to look at is environment variables so let's create a file called dot EnV and in that I'm going to put the port variable and we'll set that to 5000. all right so we'll save that now normally with node.js you would install a package called dot EnV and then you would have to initialize it you call the config method and so on but we don't have to do that it should just work so what I'll do is where we have this 5000 there's actually two ways we can do this we can do the Old process.env Dot port and I'll just say or let's say eight thousand if it for some reason can't find this and then I'll just restart and you'll see it actually did restart um and it said 8 000 because it hadn't read that file yet because it does need a restart but now it says 5000 meaning that it's reading this port so if I reload this that should still work now another way to do this is to say bun dot EnV Port so if I do that that gives us the same result we're still getting five thousand so you can use either process.env or bun EnV and you don't need to use a third-party package like the dot EnV package now as far as scripts we can also add bun scripts so let's go to our package.json here and let's add a Scripts we'll say scripts and this is going to be an object whoops this is going to be an object with a start script so for the start script I'm just going to use Bun Run index dot Ts that way we can do fun start but I also want a Dev script that will watch it that will use watch mode so for that we're going to say bun Dash Dash watch and then index.ts okay let's make sure we put a comma here so now if I want to start up my server I can now do I can do bun start okay so that starts it normally or if I want to do it in development mode and I want to use watch mode I can say Bun Run Dev and now it's in watch mode now like I said this probably isn't something you're going to use in production you're probably going to use some kind of framework like Express or Alicia but just to take it a little bit further let's create a route here so we'll have a route for the home page and for let's say the blog page so first off we can get URL and we can get that with new URL and we're going to pass in here that request object has a URL property on it so that'll get us the URL and then we can say if the URL Dot path name if that is equal to slash then that's going to be the home page actually we don't even need these curly braces we'll just say return a new response and we'll pass in just a string of home page all right and then underneath that I'm just going to copy that down never mind these red lines for now so this path name let's say if that is equal to slash Blog then we're going to return let's say blog and then under that we're going to return so if it's neither one of those then we'll return a 404 so we'll say new response and we'll pass in here just 404 exclamation so now if I go to the home page I see home page if I go to slash blog I see blog and if I go to like slash blog1 which doesn't exist I see the 404. so that's just the the basic server API now there's also with the npm client the bun npm client you also have bun X which is similar to npx so this allows you to run a package without installing it so I'm going to stop the server here and go down to the the terminal and let's run bun X so it you could either do bun Space X or the shortcut for that is just bun X like that and we're going to say cow say which is just a really simple program that will have a cow say whatever you type here so I'm going to say hello bun and we'll run that we see just a little ASCII cow with hello bun so if you wanted to use I don't know create react app or something like that something that you want to use npx with and just use something without installing it you can do that with bun X now as far as node modules go like the uh the the default modules like path and Fs you still have those available so I want to show you those so I'm going to just create a new file here and I'll just call it node well let's just call it modules doesn't really matter this is just experimentation so we'll just say modules TS and I'm going to import let's say path from path and another thing I'm using the es module syntax here but if I wanted to I could also use the require syntax I'll show you that in a second and you can even use both in the same file I don't know why you would do that but you can so let's say cons file path just to show you that we can use this and we'll use the join method so path.join and we'll say Foo so a folder called Foo folder called bar and then we'll have a file called image dot PNG so let's say we have that file path and then I want to get the file name so I could say path dot base name and then pass in the file path and then I'm going to just console log the file name all right so if I run this file by saying bun run and then module dot TS what I call oh modules sorry so it's modules TS you can see I get the file name of image.png and if I wanted to use the require syntax I could say const path equals require path and run the file and that works just as fine so I mean you can use whatever syntax you want there's no extra steps now you have other core node.js modules you could use such as FS but instead of FS there's actually a new optimize API for dealing with files that bun offers so I'm actually going to create another file here I'll just call it file.ts and we can close this stuff up here so I'm gonna first off just write or create a file and write to it so I'll go ahead and just say const data and I don't even have to bring anything in it's it's it's on the bun object so I'm going to say data and I'll say I love JavaScript okay and then let's say I want to write that to a file called output.txt what I can do is I can await on bond dot right and we have a top level async so I don't have to wrap this in an asynchronous function and then let's say output Dot text and what we want to write in that file is that data all right so we'll save that and then let's run this file so we can say Bun Run file dot TS and now you'll see there's an output.txt with I love JavaScript so that's if you want to write to a file very simple just two lines of code it can make easily make it one line and then if we want to read files we can do that let's just comment this out we can do that with bun.file so let's um yeah let's say const and we'll call this file and we'll set that to await bun dot file and the file I want to read is output dot txt so the file we just created and then we can get a bunch of different things from this if we just want the data as a string then we can just simply say file actually we have to await file Dot text which is a method so now if I run this we can see I love JavaScript so it just gives us it as a string if you want to get for instance the file size there's a size property so we can say file dot size and that's a property not a method so no no um parentheses and you can see 18 so it's it's in bytes that's 18 bytes and then you could also get the contents as a readable Stream So if you wanted to do that you could do a weight file Dot stream so that would be a readable stream if you want to get it as an array buffer you could do that so a weight file Dot array buffer and if I run that you can see we get it as a stream here and then we get it as an array buffer so there's a lot of different things you can do with files using this this bun API all right now for testing there's also integrated testing so let's create a new file here and let's call this we'll just call it index.test dot TS you want to make sure you have that DOT test in there and then what I'm going to do is import a couple things from and it's going to be from bun and then colon test and let's bring in here describe expect what else test and before all so basically we can have hooks in here it's very similar to what you would do with jest so for instance you could call before all and pass a function in here and then here is where you could say set up tests but let's create an actual test with describe so we're going to say describe math pass in function here and then we'll have a test so our test is going to be called addition pass in a function and let's say I want to expect to plus 2 and then dot 2B so we want that expect that to be 4. okay so let's save that and now all we have to do is simply run bun test and it's going to look for files that have the DOT test so it should automatically pick this file up so if I run that you can see that it runs in the the math test Suite it runs the addition test and it passes so really cool and we haven't installed anything the only thing that we've the only thing that's not bun is typescript that's the only thing that's in the the package.json which is really nice and we haven't even touched the bundler yet so the whole front end part of this so let's do that now so for the bundler what I'm going to do is create a source folder all right and then in that Source folder I'm going to create an index Dot let's let's give this yeah we'll do TS I'll show you more of the jsx react stuff in a bit but let's just do a very simple um just something simple I want to fetch a user from the GitHub API using axio so using a third-party module and I want to then bundle that into a single file that I can include in the browser and my front end so let's install axios we'll come down here and we can say bun install axios and do you see how fast that is so it's extremely fast the npm client and actually in addition to index TS just so I can show you how we can use multiple files let's create another file and we'll call it GitHub API dot TS and here we're going to import axios from axios and then we're going to have an async function we can't use the top level async because this is going to actually be bundled for the front end so we have to wrap it in a function and I'm going to call it fetch user and it's going to take in a user and then let's make our request and put it into a variable called res so we'll say a weight axios dot get and then the URL which is https API Dot github.com users slash and then I'm going to just append or concatenate the user onto the end of that and then underneath let's just return the response dot data okay and then we just want to export so let's say export as default the fetch user function so that we can use it in our index file so we'll go to our index file now and let's import fetch user okay and then since this returns a promise we need to wrap it in an async function so I'm just going to use an iffy here we're going to say async and just have an arrow function and let's say cons user data and we're going to await on the fetch user function and pass in the user that I want to get which will be my own so just Brad traversy and then underneath that we want to I want to just put it in the the browser body so let's say document Dot query selector and I'm just going to select the H1 and then set the inner HTML and we're going to set that to just Json Dot stringify and I'm just going to insert the entire Json string so we'll pass in the user data all right so what we can do now to be able to bundle this and and include this in our HTML in our front end we can come down here into the terminal and use bun build okay so button build and then I'm going to specify the file which is going to be dot slash Source slash index.ts and then we can do dash dash out file and set that to where we want this the bundled file to go which I'm going to say dot slash dist slash bundle dot Js so let's run that and now you'll see It'll create a disk folder with the bundle.js file and this is everything in the source folder here the index TS and the function inside the GitHub API is all in here and that's what we want to include in in the front end so now what we can do is in that disk folder we can create an index.html and we'll just put a boilerplate in here we'll say GitHub user data and then in the body remember we we put it in an H1 so I'm just going to put an H1 doesn't really matter what we put inside of it and then let's make sure that we include that script and the source is going to be the dot slash bundle so let's save that and then I'm going to open this with live server and now you can see that we get all the data that we requested from the GitHub API is now being put in the front end here in the the browser window and of course you can interact with your backend server you know if you if you're using a framework and you have routes where you're interacting with a database and remember this comes bundled with an SQL Lite database as well so you just have so so many things that you can do without touching any other projects any other dependencies now there's also a watch mode if you want to develop so let's um let's do that I'm just going to come down here and change this command up just a little bit and just add on to the end of it dash dash watch I believe that should do it so if we run that and now let's uh let's go into the index.html and right above the H1 I'll put an H2 and say hello and save and you can see that we now see the H2 with the hello and I didn't even have to reload it reloads on its own so really cool stuff now I want to get a little deeper into the the whole front end thing and I want to give you an example where we use react and how we can actually transpile jsx so let's uh let's stop this and let's install react and react on so we'll say bun install react and react Dash Dom okay so now we have that installed and what I'm going to do here is go to my index TS that's in the source and we're going to rename this because I want this to have some jsx in it so we're going to rename it index TSX and then just get rid of everything so this will be the entry point to our react application so let's say import react from react and then we also want to import from react Dom create root so that's going to be from react Dom and then let's say const root set that to create root and in our HTML file we'll have a div with the ID of root so let's say document Dot get element by ID and that will have an ID of root okay and then let's create our app component so here's where we're going to use some jsx so in here I'm going to have a little bit of State we're just going to have a count I'm just going to create a button that we can click and it'll just increment you know that that example that so many Frameworks use so let's say set count to change that and we'll set that equal to react dot use State and it'll be Zero by default and then we want to return jsx so I'm going to say return and then in parentheses we'll have a div and then let's have an H1 we'll just say hello world then we'll have an H2 and we'll say count and then I want to Output whatever is in the count state and then I want a button that will increment it so let's say button and we'll say increment and that button is going to have an on click Handler and we'll set that to oops we want to set that to curly braces with an arrow function and that's just going to call set count and we want to pass in there our count and just add one to it so very very simple little application and then down at the bottom under the app component we just want to call Root dot render and we want to pass in our app component okay now over here obviously this is still this is going to stay the same until we we bundle it again so let's go to our index.html before we bundle it let's get rid of this stuff and let's have an ID of root so that's our output for our react application again it's not going to show yet but we can come down here now and let's run the bun build and watch command if I do that oh it's this module not resolving oh yeah I need to change that to TSX so this right here this index TS should be TSX okay so there's our application if I hit increment there we go so I don't know about you guys but to have all this stuff together is is huge because I think one of the the worst things about JavaScript is is how the ecosystem is just so scattered if you look at other languages if you look at you know C sharp or python or rust and I mean they every language has its issues but they all seem very put together in terms of of the whole ecosystem and the different packages and Frameworks and this and that JavaScript just seems all over the place it's very difficult for beginners to understand you know what they should wear they should start so I think that having something like bun that puts everything in one place is a big step and I think that it's it's a it's a step in the right direction in my own opinion all right and I just showed you just we just scratched the surface so there's a lot more to it and it's very very new 1.0 was just released so you know plan on seeing bigger and better things and I'll be doing some bun projects when it's a little bit more established so that's it guys thanks for watching and I'll see you soon

Channel: Traversy Media

Views: 56,505

Keywords: bun, bun.js, bun js, bun tutorial

Id: U4JVw8K19uY

Length: 40min 19sec (2419 seconds)

Published: Mon Sep 18 2023