This Go library makes your CLI apps look INSANE

Have you ever wondered how applications like terminal.shop render beautiful TUIs from the command line interface? So for example, here on my terminal, if I just SSH into terminal.shop, you can see I'm greeted by their logo and then bang, I see this beautiful user interface all through my terminal. This allows me to pick different flavors of coffee, purchase the quantity I want. I can see my cart and I can check out all through my terminal. It looks nice. It feels nice. But what tools did they use to build this? How did they build this? In this video, I'm going to break down exactly what Golang tools they use to build their terminal user interfaces. And these tools are definitely something that you need to add into your own toolkit if you plan on building your own Go CLI applications. All right. So, I'm on GitHub. I'm on the terminal shop terminal uh GitHub repository. You can see uh how this entire system, this SSH CLI was built. You can see there it's primarily built with Typescript. uh but there is some go and this is the part that we're interested in because if you go into the packages you go into the go folder here is their entire go package or their go application they used to render that terminal user interface I showed you earlier and in previous videos I've also talked about the application I built called go blueprint which is entirely written in go and it's also a CLI application you can see here it renders different options you can go ahead and check and select to spin up a Go boilerplate project. Link will be in the description if you're interested. But both of these both of these repositories use the same underlying system to create these terminal user interfaces. Now, the tool that's responsible for creating those beautiful TUIs is called Bubble T by Charm Bracelet or Charm for short. And as it says, it's a powerful little TUI framework. It has 31,000 GitHub stars. Uh it's entirely written in Go, so that's awesome. But this is kind of the quintessential tool you need to know about if you're also interested in building CLI applications. Now, if you don't know what the Elm architecture is, it can be basically broken down into these main three components which are going to be essential for us to know when we dive into the code for using bubble tea. There's the model which contains the entire state of your application. There's the view which is what gets rendered. So when we look at the TUI, we go back to something like Go Blueprint, this is all the view. This is what's rendering everything for us to interact with and look at. And then the last state is update, which is basically how the model gets updated. So anything that's stored in the model, the application, the business log, anything like that, this is where the update kind of branch of Elm or MVU gets stored in. And Charm offers a bunch of really cool packages for you to explore and to help you create these awesome CLI applications. We are going to be looking into bubble tea today. Another one that I really enjoy which we're also going to be looking into is called lip gloss. And the way I view lip gloss um it's as it says style definitions for nice terminal layouts built with TUIs in mind. The way I kind of view it this is kind of like the CSS of um a CLI. Right? So a lot of the times you'll see a lot of projects use lip gloss and bubble tea together to kind of use both of those strengths to create awesome TUIs for your application. Okay. So, we're going to start with the uh blueprint project just to kind of give you a quick introduction into typically how lip gloss and blueprint are used together in applications. I will say though, go blueprint has some different uh opinions that really you don't really necessarily have to follow and the way you want to use your application right is totally up to you. But this is basically how we've built it. We use Cobra. So there's a bit of a CLI framework on top of the TI TUI framework from uh charm which is bubble tea. And here you can see that we have basically our init method and then we have some strrus that we define. And really here we use cobra to define our run method. And here this is really what you should care about if you're using bubble t. We instantiate something called t program which is of type t.program from bubble t. So here I just short form the import. So instead of running bubble t I write t. And then here t program um kind of just going through a bunch of logic here. You can see we run this new program. And this new program from bubble t is really what kicks everything off. So you can see new program creates the new program which initializes the model and basically allows us to use bubble t uh and all the awesome things that come with it. So I'll quickly give a demonstration of govm for those who aren't familiar. So govm it's a very simple go version manager tool. You can see here uh it refreshes with the most recent versions of go available. So at the time of this recording it's 124.2. You can see it's active and installed. Uh I can open up another terminal to go version. You can see it's 124.2. Uh I can switch between one that I already have by pressing U. So now 124.1 is active. So I can go back go version. You can see 124.1. And lastly, if I want to install, you know, a different version I don't have, like 123.8, I can click in I to install. And now you can see it's fully installed. You can actually see all the versions of Go I have installed on my computer. Uh, I'm going to go back to using 124.2. If you want to know more of why I built Gov VM and the logic behind it, leave a comment down below. I'll gladly make a video about it. But for this one, I want to go into how it's built because I think it does a better job demonstrating how to use bubble tea and lip gloss together. Okay, so we're going to start with kind of the project structure. I think that's going to be the best way to kick things off here. So, this is basically the entire project for GOVM. It's pretty short. It's pretty uh, you know, nothing too crazy. Uh, we have the main.go, which is going to contain a lot of the kickoff logic as I like to call it, and then we have essentially just five packages. A CLI package, a model setup. So just this sets up the model in that uh MVU structure we saw earlier. I have another model setup in a setup package for first-time users which I'll show in just a second. I have a styles package which is pretty much where I'm going to use a lot of lip gloss to kind of style my components, error messages, etc., etc. And then I have this utils package. And I want to say this up front. I know a lot of Go developers don't like the concept of having like a util package or common package. I personally don't mind, but I will say I did not use the utils version or the utils package here correctly because I have a lot of business logic that is actually important to the models I have uh that I just didn't bind to any structure. And that's actually on me. That's actually a poor decision. Uh, I think I just wanted to get something out and I kind of just kept making these functions as they came without binding them to the actual model. So, this doesn't really fit the criteria of the utils package. But if you go back to our main.go, the main.go is fairly simple. The actual main function, it just sets up the shim directory. And this is going to be important because the shim directory basically allows us to use different Go version managers and unbind them for the previous version of Go that you may have installed on your machine. and then it uses that shim uh to kind of reference the version of Go you have installed on your computer uh or not. And then lastly, we have these kind of two main functions. We have if someone is use is choosing to use GoVM as just kind of the CLI again not using the TUI, you can just do go VM and type in list and it gives you the list of Go versions you have installed instead of actually just typing go VM and then checking you know. So give someone the opportunity to do something uh that may you know nobody really wants to use a TUI I guess but if they want to use a CLI they're more than welcome to. So that's why I have this function here to handle command line but the one that's more interesting is definitely going to be the launch TUI. So here launch TUI has basically two purposes right it as the name suggests it launches the terminal user interface but first it actually introduces and checks does the setup model have a shim do you does a firsttime user have the shim necessary from using govm right so every first- time user is not going to have this so it's going to fire off this new setup model and if I go into what this is you can see here it's a model structure structure which has the width, height, shim path, config done and a key prompt and this will only go off the first time. So the way I chose to break this down is I have my first time model structure and then this is only used for the first time to get everything configured set the shim and then the next time you're going to use it you're going to be using the actual model structure that's intended for returning users who will depend on go VM. But what I want to show you between both of these structures, you can see here I have my model strruct with this as any struck in go. The simple process is to hold application data throughout your app. Right? That's kind of how I view strrus. And then as we saw with the Elm architecture, I have this method called view which renders everything for my users, my firsttime users. I here I've highlighted my different styles. my title style using lip gloss new style and I can kind of determine if I want to be bold can give it a color for the foreground any margin and you know different styles like box style highlight style etc etc even the footer and this is what I mean by lip gloss really feels like the CSS uh version for styling on a CLI using go right I really like the way it's you know you can chain these methods you can determine how you want them to look you can just put a hash here or the color representation And it just makes it very simple and you can reuse this component uh everywhere in your app. And we also have this update method. So I showed you the model, I showed you view and update here just basically listens for the different keystrokes or the commands the replies uh a user could put. So yes, no, install whatever and then it just uses that to determine what to do to run certain logic through the application. But that's really just the first time use. That's not really that important. You can see after that setup model goes into t new program which we saw in go blueprint and it kind of continues off uh just from there. Now if you're a returning user or after you're done setting up the shim you can see here that you come back and it follows the same suit I have some variables that I'm just determining here throughout the application uh different styles and then here again we have our initial model. So you can see we have a bunch of different things I've determined. So the go version directory which we kind of get from the shim itself. We pass the spinner. We have this array or a slice of utils for the go. version. So this contains the different versions like the file name URL installed if it's active or not which if you go back and type in uh govm this is everything on the installed version here. So that's the structure that holds that there. Okay. And the interesting part is here. The reason how this works with just new program and knowing exactly what to do is because you have to give your model certain methods and the ones that we talked about are view and update but you also need to give it an init method here. So you can see I have this init method and then I have my update logic and you can see here I wrote handles events to update the model. Now that is very true model and the update method here all it does is a lot of case statements. So, I have this giant switch statement here, this first one, which is based on the message type. And it's probably like what uh over 200 lines of code just for this one switch statement. And all I'm doing here is switching between what different key is the user pressing and what to do with it. So, here for installing, right, if someone presses I and they're hovering over a particular version of Go, let's go back and demonstrate this. So here if I'm hovering over this and I want to install it by pressing I, this will fire off this particular method. And the way that works is we have the selected item and then we go to utils download and install. Again, not the best package name that should have been binded to a different model. U definitely not the useless package. But if I go here, this actually holds the business logic which is responsible for going and installing that version of Go that you're currently highlighting. And the same format with the other case. So if our user presses U, so this will switch the version of go later on. So let's go back to this example 123.7. We just installed it. Now I press U. And now you can see at the bottom switch to go 123.7. And this follows the same kind of logic. If you we check if you're on certain tabs or not. And then we have some logic here switching over the different versions. And here we just go into switch version which holds the business logic for switching what active version you currently have in your terminal session. So this basically continues. You can see we have R for firing a refresh uh D for deleting confirming a deletion uh rejecting a deletion if you accidentally clicked uh delete and didn't intend to. We have different things a different case statement. So if that message is actually a resize window or to confirm to the size of the terminal we have a different way of handling that like this. If the case is an error message, we have a way to handle that error message. And if it's a version version message, right? So again, uh what that is, it's just holding a different version of Go or a slice of the Go versions like I showed you earlier. Then we have different ways to describe it as well and what to do and how to update that. We even have ones for our spinner to which you saw when we're installing it, we had that spinner firing off. We have different cases to even handle that. And the third method that you need to have on your model truck is this view method. So this was what renders the model as text output or a TUI. Not necessarily has to be a text output. I got to change that. And yeah, this basically follows that same method where we have the style of our header here. So if you go back, you can see go VM, go version manager. You can st I gave it a very generic style. You can really go crazy with lip gloss and what the other tools from Ch offer. Um, this fires off the first time for users. So if it's not in the path, we fire off the separate UI for that particular case. And then we just kind of go through the logic of what we want to handle and the typical cases. So one that's really cool is like current tab, right? So depending on what tab you're on, we'll get to switch what message we will show you, right? So press I to delete, you to switch, D to delete, U to switch, D to delete, tab to switch. And if you go here, you can see all those message are down here. And if I switch the tab, uh, that message will switch accordingly. Now, if this video made you kind of curious and you want to start building with bubble tea, I highly recommend this basics tutorial, uh, repository link will be in the description down below. If you click basics, it's a single main.go, which goes over the things we just talked about. So you can see here we have the model struck which holds all the data which in this case the cursor choices so whatever the chooser can chooses I guess and then selected we have this initial method and then we have the actual init method we have the update so that updates all the state in the actual model so you can see here depending and again follows that same switch statement uh logic I had earlier if it's control c or q we can quit if you do up or k it moves the cursor up a notch. Um, and then down J, etc., etc. And then view renders everything that we want to see. And then obviously funk main just has the new program with this initial model function which uh returns the instantiated model struck. Okay. And one last thing, if you did enjoy GovM or you want to use it, please uh consider giving it a star. Check it out. I can make a video describing why I think this tool could be necessary for some people. Let me know comment section down below if you want to check that out. Okay, so that's going to do it for this video. Make sure to comment, like, and subscribe for more. I really love using the bubble tea package. I think the whole Charm team are incredible, super talented individuals. They keep shipping awesome stuff to build with Go. Makes my job easier. If you've been interested in using Go, you should definitely check one of these packages out. I mean, if you can buy coffee, if some people or content creators can make a whole company selling coffee through the terminal using bubble tea and lip gloss, then so can you. So, go ahead, go check it out. Give it a start. Tell them Melky sent you, please. And yeah, if you enjoy this video, comment, like, and subscribe. I've been talking so much. This video is so long. I have to go edit it. But yeah, let me know what you guys think. And uh yeah, I'll be back. Look at that flex, man. That's that's that's that go flex. All right. Peace. Peace.

Want to make your CLI apps look beautiful and professional? In this video, I show you how to build stunning terminal UIs using the Bubble Tea framework in Go. 25% FEM Membership with course: https://frontendmasters.com/courses/complete-go/?code=MELKEY25&utm_source=melkey Bubbletea: https://github.com/charmbracelet/bubbletea Govm: https://github.com/Melkeydev/govm Go-blueprint: https://github.com/Melkeydev/go-blueprint Bubbletea Examples: https://github.com/charmbracelet/bubbletea/blob/main/tutorials/basics/main.go ### Twitch I stream live on Twitch every weekend Twitch : https://www.twitch.tv/melkey Join the amazing community on Discord Discord: https://discord.gg/melkeydevhouse I post memes and host Twitter Tech Spaces Twitter: https://twitter.com/MelkeyDev Your Terminal Apps Are Ugly - Let’s Fix That How to Build a Better Terminal UI in Go Make Your Terminal Apps Better and Beautiful - here's how This Go Library Makes Your Terminal Apps Look INSANE SUBSCRIBE OR GET LAID OFF ╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗ ║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣ ╠╗║╚╝║║╠╗║╚╣║║║║║═╣ ╚═╩══╩═╩═╩═╩╝╚╩═╩═╝ #coding #neovim #typescript #programming #vim #softwareengineering #codinglife #webdesign #webdevelopment #webdev #javascript #rustlang #rust #twitch #twitchstreamer #programmerhumor #codinghumor #software #softwareengineer #softwaredeveloper #softwaredevelopment #gymbro #gym #programmerhumor #programming #coding #golang #go #golanguage #php #laravel