Bash? Nah, I Have Bun.

at this point y'all are hopefully familiar with bun it's a new alternative tool chain for JavaScript developers everything from bundling to running to installing your packages bun is really exciting project I've already covered it extensively make sure you check out my truth about bun video if you haven't already a lot of important contexts that I think will help with this video anyways what are we talking about today so right now we're just talking about JavaScript how is Bash involved well crazy enough the title isn't clickbait bun is competing with bash now and as crazy as that sounds I do actually think this is a great idea what the hell am I talking about well let's take a look the bun shell JavaScript is the world's most popular scripting language so why is it hard to run shell scripts in JavaScript a fun fact not a lot of people know is that quick scripting like this was actually one of the original goals of node what if we could use the beauty of javascript's flexibility as a way to quickly run scripts on the server side despite that being a goal node became a much bigger thing for running large JavaScript applications on servers as well as the ecosystem that we use for managing all our packages and everything else associated with it which is why this is such an interesting thing because previously Dean tried to go back to this putting the script in JavaScript in your terminal and in your servers and I honestly once again feel like bun has done a better job at Doo than Dino because this is how I want to write my JavaScript CLI code going forward they give examples of how these things work in stuff like node like importing spawn sync and then calling all of these values for a command collecting the status standard out standard error and using this in your code base there's also apis for doing some of those things like reading directories and all of that but none of this is as simple as writing a shell script of Ls star. JS wouldn't it be really cool if we could just write this in our serers side JavaScript code this is the goal of what they've done with the bun shell existing shells don't work in JavaScript for a bunch of reasons they go in depth here I love the fake Hacker News comment here shells are a solved problem Hacker News commenter probably I'm almost certain if we go to The Hacker News for this release someone said that they don't work well in JavaScript why Mac os's zsh implementation is different from linux's bash and Windows command they're all slightly different have different syntaxes and commands the commands available for each platform are different and even the same command can have different flags and behaviors I can't tell you how many times I've run into random scripts that I was promised by the internet would work great that just did not run in zish even though they ran fine in bash there's one performance flag one that I always forget about that only works in Linux bash and doesn't work in Mac OS remember what it was that it was annoying me recently I'm sure I've all had the experience where we find a bash script from like chat GPT or stack overlow we go run it on our Mac and it just doesn't work because it has some weird expectations about arguments that just aren't thing in Mac we've all deal with that before the problem here isn't just that you have to modify your script slightly to run it on Mac versus Linux is that you don't have one file with code in it that runs properly everywhere writing crossplatform scripting is actually really difficult and as a result we often opt out of doing that in the shell and instead do it using packages that bind to random things per platform like Fs in node has different bindings for all these different os's so you don't have to worry about what shell they're using but what if we could just write shell code and it worked prop l in all these different places as they mention here npm solutions to rely on the community poly fill missing commands with JS implementations things like rmrf don't work on Windows there's a package called Rim Raff that gets downloaded 60 million times a week just so you can rmrf on Windows that's insane environment variables also don't work on Windows you're going to notice a theme Here Windows is a bit of a a lesser child when it comes to these things because Windows is the only non-n platform that's relevant at all Unix Linux and Mac are all very similar cores Windows is its own world which is where on Windows This Bites me so often this is another 65 million week package what also an important detail shells take too long to start how long does it take to spawn a shell on Alix Linux x64 hat machine takes about 7 milliseconds to launch a new shell very annoying if your intended to run a single command starting the shell can take longer than running the command itself you're running many commands in a loop this gets expensive quickly so imagine you LS to get a bunch of directories and then you have a for Loop that runs through each of those directories to check for a file now you have that 7 millisecond block on every single one of those runs unless you parallelize it externally yourself obnoxious and now the core Point are all these polyfills really necessary in the world of 2009 to 2016 when JavaScript was still relatively new and experimental relying on the community to polyfill missing functionality made a lot of sense but now it's 2024 javascript's on the server and it's mature and widely adopted JavaScript ecosystem understands the requirements today in a way no one did in 2009 we can do better I really like the way this is written the tone of this article is very good for a release introducing the bun shell the bun shell is a new experimental embedded language and interpreter in bun that allows you to run cross-platform shell scripts in JavaScript and typescript this is the important thing when I first looked at this I assumed it was just spawning out a shell the same way things did all the way up here with a child process where it was just spawning using whatever your native shell was that's not what's Happening Here bun wrote their own shell scripting Lang anguage very different and very very interesting we see here the standard out use to wait dollar sign LS start JS and yes dollar sign isn't for jQuery we'll be sure to try some fun things with it regardless we await dollar sign LS or if we want to get the string we just await do text cool now we have the text for whatever this command did you can await a fetch call get some response and then you can throw that into Gip and get the standard out array buffer pretty cool this is such an interesting thing it's blending JavaScript semantics like awaiting a Fetch and shell things like calling gzip and blending these things and using string templating to keep your inputs safe is really cool the reason that they have this syntax is similar to why the versel SQL examples use the syntax this is a template string literal which means this is effectively calling a function where all of the things you put here are called as arguments and Bun can then sanitize it so you don't break out of the command here for example because you could just pipe or bar or semicolon and then do some nasty native stuff but since this is interpolated that can't happen there's no way this response could return like rmrf and this would then run it really really nice I love these tag template literals it's cool to see this becoming more and more normal I just wish developers wouldn't look at this and immediately assume it's some sketchy thing that they shouldn't be touching this isn't just embedding a string in a string this is interpolating a string in a function very different very important to know they even called this out for security all template variables are escaped so here we have Fuji JS semicolon rmrf I love I swear I didn't pre-read this just the exact thing I was saying you pass the file name and now you're going to get an error cannot access fjs rmrf because it will wrap this in quotes so that it tries to access this as one input instead of calling two different commands really nice that they handle that using bunell feels like regular JavaScript you can redirect standard out to buffers so we made a buffer that's that's wild that's so wild you can just pipe the output to a JavaScript buffer what I didn't know that what they doing some crazy stuff that's really interesting you can redirect standard out to a file this makes a little more sense it's interesting you have to use their file like function to do that really cool you can just pipe with standard bash and zish pipe Syntax for whatever shell you're using it's pretty standard you pipe to the escaped file output. text or you can just pass it as a literal that's good okay I was concerned you might need this but it's cool that you have that as an option you can pipe standard out to other commands that I would hope you can even use response as standard n yeah that's really cool so if you're curious what this does this is allowing an input from an external source so we're going to grip Fu from this set of things and it's going to be bar new line Foo new line bar new line Foo new line so this would grap those two Foo instances really cool wild stuff the ability to send response objects that you've created like this into your commands is super cool someone mentioned in this makes FFM Peg way easier yes I did a lot of stuff like this with Elixir where I would take a file I would run it through FFM Peg I would take the buffer response and I would pipe that to another ffmp process that would then stream it to Twitch those types of things are now not just like doable injs but trivial with this really cool stuff I'm hyped we also have built-in commands like CD Echo and RM obviously it seems like most of the common things you would do in a shell are supported I'd love to see a doc that says everything but most of the core stuff you would run seem to work here it works in Mac OS windows and Linux they have implemented many common commands and features like globbing environment variables redirection piping and more really interesting signed the drop and replacement for simple shell scripts in bun for Windows it will power the package Json scripts in bun run this is cool it seems like a lot of their energy here is because of bun for Windows in how little they could make things Universal previously they were probably already building a layer that would let them write one pile of code that would then work properly on Windows Mac and Linux and they decided to make that this abstraction where now it's its own shell and you can JavaScript code to command these layers really really interesting I should chat with Jared about what led to this we chatted a bunch about it but not why they did it it's really interesting I think we have to try it like we do have to try this now right you all probably looked at this dollar sign and thought wait isn't that a jQuery thing well it's being used now that doesn't mean I don't want to use jQuery here though so how would we do that well first and foremost we have to go a different name so we'll their double dollar sign equals require jQuery sadly jQuery needs a window to work and since we're running on the server there's no window object so we need to make a Dom and then grab the window from it to bind here thankfully there's already a package for this JS Dom so const jss require JS Dom and we can make a new one and get the window from it this way and we just pass that as the argument to the require and now we have proper classic everyone's favorite jQuery I screwed up though we don't want cons cuz we're we're blending old and new so we're going to ve our way through this let's use this well we need some data so let's grab it everyone's favorite dollar sign. Ajax need to give it a URL oh that's pretty smart I'll autocomplete that part I don't want to spoil things yet so uh we figure out what to do here so now we have this response since we specified the data type here we already know it's Json but that's cheating we're going to delete that let's quickly see what we get back we can log the result I also want to know the type so let's see what we get from this Fun Run that's a bunch of stuff and it's an object interesting despite removing the Json part here jqu smart enough to recognize it Json and parse it for us so we're just going to have to turn that back to a string that's totally fine but I want to select a key off this let's say I want name we could do the the classic thing of like name and it would be res. name and sure that works but that's so boring we have a whole separate dollar sign here we could be using so let's have some fun con text equals a wait dollar sign we need to do something here we need to parse this Json somehow thankfully there's something else that will continue our naming confusion here with dollar signs and J queries it's a great thing called JQ which is a shell package for parsing Json and getting things out of it we want the name so we'll do- r. name this will get us the name but how we actually get the Json here we're going to pass it the classic way with an echo echo pass in re pipe but wait isn't re an object yes it is good catch json. stringify res and now we can in the simplest way possible grab the name key off of this response and then console.log name text I forgot to do the do text at the end here and now if all works properly we are grabbing the name value from the Json blob that is passed to the echo people are pointing out why console log when I can Echo very fair point a wait Echo text who needs console log anyways oh I forgot to put name isn't this beautiful isn't this incredible aren't yall proud that we can blend so many wonderful Technologies from jQuery to jsd to bun to JavaScript to bash to JQ there are more Technologies than there are lines of code in this file and I'm very proud this is wonderful am I looking at some kind of War crime here no this is just your brain on JavaScript my guy this could have prevented so much of the chaos that we've experienced in node and we have to make more to make up for it anyways I am very happy with my work here I guess this is a better time than ever to wrap up there are real use cases for this like build scripts and so many other things you'd run in CI but I just wanted to have some fun if you want to see more ways to use bun correctly let me know in the comments and I'll be sure you that in the future if you haven't already watched my truth about bun video I'll pin that in the corner thank you guys again appreciate you all a ton see you in the next one peace nerds

Channel: Theo - t3․gg

Views: 71,837

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: hy8GLnqb5sI

Length: 12min 38sec (758 seconds)

Published: Sat Jan 27 2024