WEBVTT 00:00:00.020 --> 00:00:05.580 Building a UI in Python usually means choosing between quick and limited or powerful and painful. 00:00:06.480 --> 00:00:11.700 What if you could write modern, component-based web apps in pure Python and still keep full control? 00:00:12.500 --> 00:00:25.340 Nice GUI, pronounced NiceGUI, sits on FastAPI with a Vue Quasar front end and gives you real components, live updates over WebSockets, and is running in production at Saubersoig, a German robotic company. 00:00:25.600 --> 00:00:34.520 On this episode, I'm talking with NiceGUIs creators, Radja Trappe and Falco Schindler, about how it works, where it shines, and what's coming next. 00:00:35.340 --> 00:00:42.700 With version 3.0 releasing around the same time as this episode drops, we spend time at the end celebrating the 3.0 release. 00:00:43.720 --> 00:00:48.800 This is Talk Python To Me, episode 525, recorded September 25th, 2025. 00:01:03.559 --> 00:01:09.420 Welcome to Talk Python To Me, a weekly podcast on Python. This is your host, Michael Kennedy. 00:01:09.800 --> 00:01:22.680 Follow me on Mastodon, where I'm @mkennedy, and follow the podcast using @talkpython, both accounts over at fosstodon.org, and keep up with the show and listen to over nine years of episodes at talkpython.fm. 00:01:23.260 --> 00:01:27.140 If you want to be part of our live episodes, you can find the live streams over on YouTube. 00:01:27.560 --> 00:01:33.420 Subscribe to our YouTube channel over at talkpython.fm/youtube and get notified about upcoming shows. 00:01:34.020 --> 00:01:37.700 This episode is sponsored by Posit Connect from the makers of Shiny. 00:01:38.180 --> 00:01:42.060 Publish, share, and deploy all of your data projects that you're creating using Python. 00:01:42.740 --> 00:01:48.780 Streamlit, Dash, Shiny, Bokeh, FastAPI, Flask, Quarto, Reports, Dashboards, and APIs. 00:01:49.640 --> 00:01:51.280 Posit Connect supports all of them. 00:01:51.580 --> 00:01:56.900 Try Posit Connect for free by going to talkpython.fm/posit, P-O-S-I-T. 00:01:57.580 --> 00:01:59.540 And it's brought to you by Agency. 00:02:00.100 --> 00:02:01.960 Discover agentic AI with Agency. 00:02:02.460 --> 00:02:06.520 Their layer lets agents find, connect, and work together, any stack, anywhere. 00:02:07.260 --> 00:02:13.240 Start building the Internet of Agents at talkpython.fm/agency, spelled A-G-N-T-C-Y. 00:02:14.260 --> 00:02:17.080 Falco, Raja, welcome to Talk Python To Me. 00:02:17.520 --> 00:02:24.480 I'm so excited to talk about GUIs, maybe even a little hint of a desktop GUI for Python. 00:02:24.700 --> 00:02:25.380 Oh my goodness. 00:02:25.900 --> 00:02:27.120 You all have built something great. 00:02:27.200 --> 00:02:28.460 So welcome to Talk Python To Me. 00:02:28.680 --> 00:02:29.200 Happy to have you here. 00:02:29.340 --> 00:02:30.100 Thank you for having us. 00:02:30.460 --> 00:02:32.060 We're going to talk about NiceGUI. 00:02:33.420 --> 00:02:36.800 Sometimes said nice GUI, but we're going to learn that it's NiceGUI. 00:02:37.240 --> 00:02:47.040 And basically a nice blend of Python plus web plus a possible package in these up as, I don't know what you want to call it. 00:02:47.040 --> 00:02:51.720 I think the name's probably already taken, but I feel like not Electron, but Positron, right? 00:02:51.800 --> 00:02:56.100 Like we got to have something with a P, but that's kind of like Electron for like desktop 00:02:56.360 --> 00:02:56.460 apps. 00:02:57.480 --> 00:03:02.200 Yeah, I believe Posit would already have that taken for their new IDE thing. 00:03:02.500 --> 00:03:03.480 Anyway, welcome. 00:03:03.880 --> 00:03:07.720 Let's get a quick bit of background on both of you all before we dive into the project. 00:03:08.320 --> 00:03:09.020 Falko, you want to go first? 00:03:09.620 --> 00:03:10.120 Tell us about yourself. 00:03:10.420 --> 00:03:11.600 Yeah, I'm Falko Schindler. 00:03:12.400 --> 00:03:18.960 I'm basically addicted to programming since my childhood, but I only discovered Python around 12 years ago. 00:03:19.100 --> 00:03:22.160 It was the time when I finished my PhD at the university. 00:03:22.780 --> 00:03:30.040 And that was also the time I met Rodja and I became one of his first employees of the newly founded company, Zauberzeug. 00:03:30.540 --> 00:03:33.360 Now I'm a full-stack software developer and robotics engineer. 00:03:33.820 --> 00:03:41.700 and have been working on a wide range of projects like mobile apps, web apps, robotics, microcontrollers, basically the full stack. 00:03:42.140 --> 00:03:50.940 And yeah, and since 2021, I'm one of the, or we both are the creators of NiceGUI, a Python-based web framework. 00:03:51.220 --> 00:03:53.740 - Awesome, what languages, what tech were you using before? 00:03:54.020 --> 00:03:55.840 You said 12 years ago you got into Python. 00:03:56.250 --> 00:03:57.100 What was before Python? 00:03:57.440 --> 00:04:02.940 - I basically was introduced to Python as an alternative to MATLAB, which I was using at the university quite a lot. 00:04:03.660 --> 00:04:16.100 But I grew up with Pascal and did other stuff like web development, of course, with HTML, CSS, JavaScript, and some C-based languages, of course. 00:04:16.320 --> 00:04:21.739 Yeah, nice. I did a lot of MATLAB when I was in university and grad school and stuff, and then I escaped. 00:04:22.860 --> 00:04:23.160 Radja. 00:04:23.800 --> 00:04:23.900 Yeah. 00:04:24.240 --> 00:04:24.380 Welcome. 00:04:24.800 --> 00:04:25.420 Welcome. Thank you. 00:04:25.770 --> 00:04:26.680 My name is Rodja Trapper. 00:04:27.060 --> 00:04:31.780 I'm living here in Haviksbeck near Münster, where I founded the company. 00:04:32.260 --> 00:04:34.700 And I've grown up on a horse farm. 00:04:35.140 --> 00:04:40.440 But at 13 years of age or so, there was the first computer in my room. 00:04:40.700 --> 00:04:41.900 And I was really addicted. 00:04:42.380 --> 00:04:43.880 But I started only programming. 00:04:44.260 --> 00:04:48.980 Then in school afterwards, there was a course of study where I needed to program something. 00:04:49.040 --> 00:04:50.440 And I really got into this. 00:04:50.440 --> 00:04:51.500 And I liked it very much. 00:04:51.700 --> 00:04:56.180 I struggled in school normally, but the programming made it all worse, I think. 00:04:56.360 --> 00:05:00.720 And yeah, then after a course of study of computer science, I worked a little bit in Berlin. 00:05:00.800 --> 00:05:05.120 and then moved back to my hometown with my three kids now. 00:05:05.250 --> 00:05:08.500 And yeah, now I founded the company in 2012. 00:05:08.820 --> 00:05:09.740 It's Zauberzeug. 00:05:10.280 --> 00:05:17.860 It's like a company where we do mobile automation, robotics stuff, and also a lot of software development and AI. 00:05:18.500 --> 00:05:19.640 So we bring everything together. 00:05:19.670 --> 00:05:24.340 We have mechanical people and electrical engineers, but a lot of software engineers. 00:05:24.760 --> 00:05:38.160 And yeah, we are doing all the things which are needed to automate stuff, and mainly in the agricultural sector because we are, of course, very close to test grounds there. 00:05:38.690 --> 00:05:39.200 Yeah, it's nice. 00:05:39.500 --> 00:05:40.220 Yeah, very neat. 00:05:40.420 --> 00:05:48.400 A lot of the places that say robotics, they're like kind of toy things or Roomba-like things, but these are serious. 00:05:48.470 --> 00:05:53.580 These go out on farms and are large-scale human assistants. 00:05:53.750 --> 00:05:54.720 Yeah, it's fantastic. 00:05:54.780 --> 00:06:10.880 Yeah, we really, in Soberzeug, we really want to do the hard and the difficult stuff to advance in the field and do the advanced research to find new solutions and automations for the difficult parts where traditionally only human hands can do stuff. 00:06:11.040 --> 00:06:23.660 And we want to be on organic farms and in horse stables and so all the tricky parts where everything needs to be very perfectly suited together to bring a new age into place. 00:06:23.980 --> 00:06:30.360 Yeah, it sounds cool. Did you found Sapozoi right out of school or how did you get to starting this company? 00:06:30.900 --> 00:06:48.560 Yeah, while studying, I was very sure, even in school, I was sure that I wanted to one day found my own company, but I needed to know a little bit about how to run a company. 00:06:48.620 --> 00:06:59.200 And so I moved to Berlin for four years and got into a nice company, Art & Comm, and learned a lot of project work and how things work together. 00:06:59.620 --> 00:07:02.880 And after that, I was very sure I can do that. 00:07:03.140 --> 00:07:06.160 And I did the freelancing and contractual work. 00:07:06.230 --> 00:07:08.680 And then the contracts grew a little bit bigger. 00:07:08.790 --> 00:07:11.180 And then I decided, okay, this is the right time. 00:07:11.480 --> 00:07:22.200 I can hire my first employee and start the company and grow from there just in little steps and basically bootstrap myself. 00:07:22.980 --> 00:07:23.080 Yeah. 00:07:23.330 --> 00:07:23.920 Well, congratulations. 00:07:24.380 --> 00:07:26.920 It's not easy to start or run a business, is it? 00:07:27.130 --> 00:07:27.280 Yeah. 00:07:27.680 --> 00:07:28.400 Yeah, it's true. 00:07:28.580 --> 00:07:33.320 But especially if you really, most things I like is programming. 00:07:33.620 --> 00:07:47.320 So I needed to really think about how to arrange the company and how to do the things that I still can do like 20 to 30 hours a day a week by programming and sitting down and thinking about the cool and nice stuff. 00:07:47.760 --> 00:07:52.200 Yeah, of course. We're going to talk about it. 00:07:53.060 --> 00:08:12.780 Good for you because I think staying grounded in the technology really gives you an edge to, you know, Valco comes to you and says, hey, I'm working on this project and I want to use this tech or should we use FastAPI or whatever? You're like, yeah, of course. I've been working FastAPI or whatever, vice versa, right? Like you're swimming in the waters and it's really good. 00:08:13.320 --> 00:09:05.440 Awesome. All right. Well, you already gave a bit of a shout out to it. Let's talk about NiceGUI and like i like you know we were talking just a little bit before i hit record a lot of the projects it's really i think powerful to talk a bit about how you pronounce things because i don't know i i end up at a lot of conferences or maybe conferences not as much but meet people that are doing programming and they'll they'll tell me that they installed a library from pi pi and it was numpy and i'm like hold on hold on hold on you know the people who make that. They call that PyPI and they call it NumPy. And so just pyx, for example, right? It could have many pronunciations. There's nothing implicit about how you say that one, but Charlie Maher says pyx. And so you guys talk a bit about the naming and the pronunciation. I think it's an interesting 00:09:05.660 --> 00:09:48.800 story. We have been looking for a name for a UI framework where the term nice was not on the table yet, but we had a kind of mindset in our minds. And in the end, we played around with the GUI term and ended up wanting to call it a NiceGUI, a pun on the Nice Guy ethos, a guy which is just who tries to be nice to everyone and tries to do things right. And that's a friendly UI framework, right? Exactly. And that's what we had in mind for our UI framework. But the guy with the Y, because then you would Google a NiceGUI and you would never find our framework. 00:09:48.890 --> 00:09:53.900 And that's why we had to find a term that's unique in the internet and it works quite well. 00:09:54.170 --> 00:10:00.760 There were other examples where I don't understand until today, why did they call it like that? 00:10:01.320 --> 00:10:13.540 You just don't find it. Yeah, that was basically the motivation for the name. And we didn't make that explicit that it should be pronounced NiceGUI but we are fine with NiceGUI as well 00:10:14.000 --> 00:11:07.000 yeah well i think it's i do appreciate that you have something unique in the search in the search both in the search and in these days in the ai like i'm working on a program with NiceGUI like well is he really helpful like no no no i mean there's a framework right you know so it's having something that you can search is super, super important. It's as if Jupyter spelled it the same way as the planet instead of with the Y, right? And you're like, oh no, you're never going to find anything about this. It's like all space. So very cool. I know at some point we're going to talk about version 3.0 and there's already a couple of comments in the chat of excited things about there, but we're going to save that for a little bit later. Let's just start by talking a little bit about you know where did this come from why did you all build this i'm gonna guess robots 00:11:07.200 --> 00:11:35.000 but radia yeah it's um of course it's it's robots uh because a lot of things uh hinge around the robot uh interfaces and interaction with that um basically um i think we did a lot of interface design before and we also invented uh interfaces before and how to write them but um uh one day Falco came into the office and said, OK, I need to control this motor controller and I need to tune it. 00:11:35.240 --> 00:11:38.260 And the robot is driving around. So we only have Wi-Fi. 00:11:38.500 --> 00:11:40.340 We need to have some access to the system. 00:11:40.780 --> 00:11:45.420 And he basically wrote something up where he could write some Python code. 00:11:45.660 --> 00:11:48.440 And there came out some web interface. And it was really nice. 00:11:48.460 --> 00:11:50.820 And I said, well, this is great. Let's do that. 00:11:51.180 --> 00:11:54.040 And maybe, Falco, you can take it from here because, yeah. 00:11:54.700 --> 00:11:58.360 Exactly. We had a kind of a moving target and we had to control it. 00:11:58.600 --> 00:12:06.320 but just the command line interface is sometimes too weak to control sliders because we had to tune some parameters. 00:12:06.480 --> 00:12:11.080 So we wanted some sliders and maybe a joystick and some things like that. 00:12:11.840 --> 00:12:20.840 And I think the manufacturer already came with some user interface for it, or they were in the making of such a framework. 00:12:21.240 --> 00:12:39.100 And it was very limited, but it gave the idea of, okay, the UI framework could consist of some building blocks that you could somehow arrange, but why do it graphically? Why not writing it? You could simply write the building blocks in Python or in other language, but of course, Python was our choice. 00:12:39.780 --> 00:13:25.600 And so in Python, you can quickly create a web server with FastAPI. So this part is basically solved. And then the idea was the building blocks could simply deliver some HTML with corresponding CSS and JavaScript. At that time, I was working in Angular. So the very first commits of NiceGUI was based on FastAPI and Angular. And later we switched to Vue. Yeah. Yeah. And within a few hours, the basic concept was there and was looking promising. Of course, not to the extent that we could imagine it could get that large. It was just meant as an internal tool just for doing some internal things. 00:13:25.900 --> 00:13:32.140 But what we did there is we set a lot on one computer and did wishful programming. 00:13:32.600 --> 00:13:37.940 How did we would like to have written the UI and what should be on the screen there? 00:13:38.230 --> 00:13:42.220 So we wrote it and tested it and then we thought, okay, how to implement this? 00:13:42.460 --> 00:13:48.360 So we have a very, very nice interface for the developer, but how to write it actually the framework behind that? 00:13:48.370 --> 00:13:49.520 And this was the challenge. 00:13:50.020 --> 00:13:55.380 But after we did it a little bit, and then we started the first project with that, and we thought, okay, let's do all the robotic stuff with it. 00:13:55.430 --> 00:13:57.140 And let's do our website with that. 00:13:57.150 --> 00:14:08.280 So the website of sauberzoic.com is also written in NiceGuy, like the full documentation of the NiceGuy webpage and all the things. 00:14:08.410 --> 00:14:14.300 We are doing really a lot of things, big interfaces where we have annotation programs and data pipelines. 00:14:14.660 --> 00:14:24.160 So we really use it now everywhere and it's grown much faster and more robust than only just conductorial motor. 00:14:24.560 --> 00:14:25.440 That's really great. 00:14:26.420 --> 00:14:36.380 You know, even just looking at the UI, it's got this kind of friendly feel to the way the UI looks. 00:14:36.520 --> 00:14:37.020 You know what I mean? 00:14:37.420 --> 00:14:37.540 Yeah. 00:14:37.920 --> 00:14:45.740 We are very happy to have also a professional graphic designer in our team, not only for the robotics, but also for websites. 00:14:46.060 --> 00:14:50.520 And we really are thinking about how to present the things here. 00:14:50.780 --> 00:14:57.840 And you can do basically anything in NiceGUI here because it's just HTML, HTML and JavaScript. 00:14:59.140 --> 00:15:05.620 You can do everything, but most things you can do simply in Python without touching all the underlying infrastructure. 00:15:06.260 --> 00:15:09.380 So you're telling me that those cool robots we saw cruising around, 00:15:10.020 --> 00:15:10.700 They're running NiceGUIs. 00:15:11.459 --> 00:15:13.000 They have a little web. 00:15:13.600 --> 00:15:14.040 Yeah, exactly. 00:15:14.800 --> 00:15:17.340 NiceGUI server cruising on top of them. 00:15:17.580 --> 00:15:17.680 Yeah. 00:15:18.380 --> 00:15:28.000 Sorry, do you give them DNS names, like Marco or whatever, like Marco, HTTP Marco, and start working with them? 00:15:28.020 --> 00:15:28.980 Or how does that work? 00:15:29.200 --> 00:15:34.640 The first few robots, we had some names for it, but right now we are just counting them up. 00:15:34.760 --> 00:15:42.400 So like it's F35 or something, because there are so many and you need to really find the right one, which is running where. 00:15:43.980 --> 00:15:56.280 But we have also in NiceGUI a web interface where we can manage the whole hive of all the robots running around and looking at the battery status and what they have done, the KPIs and so on. 00:15:56.940 --> 00:15:58.580 The F stands for field friend. 00:15:59.540 --> 00:16:01.820 So we call them the field friends. 00:16:02.140 --> 00:16:03.200 Yeah, amazing. 00:16:05.400 --> 00:16:08.200 This portion of Talk Python To Me is brought to you by the folks at Posit. 00:16:08.820 --> 00:16:11.780 Posit has made a huge investment in the Python community lately. 00:16:12.500 --> 00:16:17.820 Known originally for RStudio, they've been building out a suite of tools and services for Team Python. 00:16:19.160 --> 00:16:23.420 Today, I want to focus on hosting your Python-based data science workloads. 00:16:23.770 --> 00:16:30.140 This includes dashboards, reports, plots, interactive web apps, all the way to custom Flask and Django apps. 00:16:30.780 --> 00:16:32.060 Their service is Posit Connect. 00:16:32.920 --> 00:16:37.500 Posit Connect makes it easy for data scientists to share work built with Python code. 00:16:37.960 --> 00:16:51.020 If you have a Streamlit app, Dashboard, Plotly interactive plot, a FastAPI service, or even a Quarto report, just give Posit Connect the code it needs to maintain the asset and Connect automatically does the rest. 00:16:51.480 --> 00:16:55.020 Connect will manage your APIs and serve your interactive apps for you. 00:16:55.560 --> 00:16:59.620 And if you want, you can update your reports and dashboards on a scheduled basis. 00:17:00.100 --> 00:17:05.760 That's right. No need to explain to the stakeholders why that dashboard or plot stopped updating last week. 00:17:06.339 --> 00:17:13.100 You get a focus on your data science and leveraging your skill set while Connect makes you look good, keeping your code running and private. 00:17:14.020 --> 00:17:20.480 With Connect, you get a private URL on your Connect server, ensuring that your asset is continuously available to your shareholders. 00:17:21.380 --> 00:17:24.560 And you can control which users have access to the asset. 00:17:25.140 --> 00:17:29.000 Let Posit Connect handle the delivery and DevOps involved in sharing your work. 00:17:29.440 --> 00:17:30.900 You focus on what you do best. 00:17:31.640 --> 00:17:36.860 So if you work on a data science team, you owe it to you and your org to check out Posit Connect. 00:17:37.460 --> 00:17:43.420 Visit talkpython.fm/connect today and get a three-month free trial to see if it's a good fit. 00:17:43.920 --> 00:17:45.940 That's talkpython.fm/connect. 00:17:46.400 --> 00:17:48.140 The link is in your podcast player's show notes. 00:17:48.840 --> 00:17:51.080 Thank you to Posit for supporting Talk Python To Me. 00:17:52.700 --> 00:17:58.140 Let's talk a little bit about building blocks, I guess, and then we could talk a little bit about the API. 00:17:58.520 --> 00:18:05.440 So you chose FastAPI, and you said you considered Angular, but you went with Vue, but maybe through Quasar. 00:18:05.870 --> 00:18:09.180 So let's, why FastAPI? 00:18:09.180 --> 00:18:11.740 I mean, FastAPI is certainly a good choice. 00:18:12.220 --> 00:18:12.360 Yeah. 00:18:13.060 --> 00:18:13.600 But why? 00:18:14.480 --> 00:18:22.400 FastAPI is great because it's, yeah, you can write very good REST interfaces with that. 00:18:22.590 --> 00:18:27.900 And also what you get is this whole async support. 00:18:28.300 --> 00:18:31.480 So you have an ASGI server running there. 00:18:32.150 --> 00:18:43.140 So it's, from our point of view, much better suited for this super large scaling and a single CPU running all the tasks than, for example, Flask or so. 00:18:43.760 --> 00:18:50.880 And so FastAPI was quite natural for us because we switched from Flask to FastAPI a few years before. 00:18:51.300 --> 00:18:54.560 We were very sure that we can work with that. 00:18:54.820 --> 00:19:00.000 this is supporting all the web traffic and server stuff we need. 00:19:00.160 --> 00:19:03.020 And we did also a few big applications with that. 00:19:03.160 --> 00:19:06.220 So this was quite a no-brainer farce. 00:19:07.460 --> 00:19:07.600 Okay. 00:19:08.040 --> 00:19:09.820 And then, Falco, you talked about Angular. 00:19:10.140 --> 00:19:15.500 I don't know if this is Angular 1 or 2, but I know the transition from 1 to 2 was a little rocky. 00:19:17.640 --> 00:19:18.860 It was after 1. 00:19:19.100 --> 00:19:20.400 It was 2 or 3. 00:19:20.580 --> 00:19:21.000 I'm not sure. 00:19:21.400 --> 00:19:21.540 Okay. 00:19:21.660 --> 00:19:23.920 So you didn't have to write out that roller coaster. 00:19:24.500 --> 00:19:29.120 But then you chose Vue, and if I got that right, it's actually Quasar. 00:19:29.520 --> 00:19:30.840 That's not Quasar, that's Quasar. 00:19:32.300 --> 00:19:33.800 Tell us a bit about this. 00:19:34.580 --> 00:19:36.660 I know Vue pretty well, but I don't know Quasar. 00:19:36.880 --> 00:19:38.000 We didn't know it either. 00:19:38.920 --> 00:19:49.140 Though I have to mention one important step in the development of the NiceGUIs was when we were thinking about a good name, we brainstormed. 00:19:49.280 --> 00:19:54.460 And we thought, yeah, at one point we thought it's basically we are writing everything in Python. 00:19:54.730 --> 00:19:57.640 So it's just Python, just Python, just Py. 00:19:58.180 --> 00:20:00.700 So we ended up and wanted to use the name just Py. 00:20:01.190 --> 00:20:05.420 And we looked up if there's something else called just Py already. 00:20:05.760 --> 00:20:11.540 And as it turns out, there was a UI framework, exactly what we were about to do with NiceGUI. 00:20:12.560 --> 00:20:13.740 And what was your thought? 00:20:13.840 --> 00:20:16.840 Were you like, oh no, it's, why am I even doing this? 00:20:17.560 --> 00:20:18.120 Kind of. 00:20:18.620 --> 00:20:18.980 Oh, look. 00:20:20.180 --> 00:20:23.800 They've been ahead of us pretty much. 00:20:24.160 --> 00:20:26.800 They already had a full-fledged UI framework, basically. 00:20:28.100 --> 00:20:31.200 But it was a bit low-level for us. 00:20:32.060 --> 00:20:35.080 They basically mimicked HTML elements. 00:20:35.740 --> 00:20:38.520 Yeah, I think I've seen this before and talked about it, yeah. 00:20:38.860 --> 00:20:40.120 Yeah, maybe. 00:20:40.960 --> 00:20:44.040 But they also used Quasar already. 00:20:44.520 --> 00:21:11.420 And so we still wanted to build our own framework with our own components and some nicer API in our point of views. But we decided to use JustPy as a foundation. And that's where Vue and Quasar came into NiceGuy as part of the JustPy foundation. And just maybe a year later, we had some issues, some unsolved bugs with just by a bit poor performance. 00:21:12.080 --> 00:21:17.640 And there was an effort to save just by and to push it forward. 00:21:18.740 --> 00:21:30.620 And though that we can stay relying on it, but in the end we decided to stop it, to remove it from the code base, to reimplement the whole transportation layer and do it ourselves. 00:21:30.940 --> 00:21:32.820 And it turned out pretty successful. 00:21:34.000 --> 00:21:38.840 I think we turned out, yeah, with less bugs, with a better performance. 00:21:39.520 --> 00:21:46.760 And maybe a year later, TrustPy was basically put on hold and isn't developed any longer. 00:21:47.200 --> 00:21:52.560 But it was a very important tool for us, a very important foundation. 00:21:52.960 --> 00:22:06.620 It's a great stepping stone to give us some fundament which we could use to show what we want to do with the user interface, how to develop the user interface and what abstraction is the right one. 00:22:07.020 --> 00:22:11.220 And then we could easily swap out the engine after the first release. 00:22:11.660 --> 00:22:12.040 Yeah. 00:22:12.900 --> 00:22:24.980 One thing when I see, this is not a judgment on just Py, people see me this kind of stuff all the time, not all the time, but often enough, like, oh, here's a really cool thing that lets you not use HTML or JavaScript. 00:22:25.130 --> 00:22:26.380 You just do everything in Python. 00:22:26.940 --> 00:22:33.100 And sometimes the examples are just so close to HTML, but the frameworks are so close to HTML. 00:22:33.380 --> 00:22:35.660 It's like, well, why would I not just use HTML? 00:22:36.800 --> 00:22:42.280 If it's like I have to create divs and I've got to create spans. 00:22:42.570 --> 00:22:57.980 And like I've literally, the framework is just the same as HTML, but in Python, like that's interesting and it's a cool framework, but also there's so much tooling for working with styling, et cetera, deploying HTML like that. 00:22:58.070 --> 00:23:01.580 I don't know, I feel like it's maybe too low level, kind of like you were saying. 00:23:02.500 --> 00:23:02.600 Yeah. 00:23:03.040 --> 00:23:13.840 And so, yeah, a little bit higher abstraction where you have a button and you can put a click handler on there and if the button is clicked, then of course the click handler is called. 00:23:14.440 --> 00:23:17.660 That was really the main goal of NiceGUI. 00:23:18.520 --> 00:23:21.520 And I think that works pretty well and it scaled very far. 00:23:21.880 --> 00:23:28.740 So we could also have other UI elements like e-charts or so where we have really diagrams and things like that. 00:23:29.240 --> 00:23:29.680 Yeah. 00:23:29.700 --> 00:23:33.400 Yeah, I think, Ido, you were talking about Vue and Quasar. 00:23:34.080 --> 00:23:40.920 One of the concepts in that world is kind of like components and bigger building blocks than just raw HTML elements. 00:23:41.120 --> 00:23:44.740 You know, here's a card or here's a turnstile 00:23:44.900 --> 00:23:47.260 or here's a panel or whatever, right? 00:23:47.500 --> 00:23:56.000 And I think that that's a much better programming level to talk about these UI building block elements rather than HTML elements. 00:23:56.160 --> 00:24:01.020 It relieves the developer from the plumbing a lot. 00:24:01.540 --> 00:24:07.200 We can think about, okay, what do we want to show at what time and how does it all connect together? 00:24:07.620 --> 00:24:17.060 If it's too fine granular, then it's really this fine-grained stuff is really taking up all your mental energy to think about what you really want to achieve there. 00:24:17.920 --> 00:24:18.500 100% agree. 00:24:18.780 --> 00:24:22.240 Okay, so that brings us back to Quasar a bit. 00:24:22.840 --> 00:24:25.280 So Quasar is kind of these building blocks. 00:24:25.360 --> 00:24:25.860 Is that right? 00:24:26.220 --> 00:24:42.760 Yeah, right. Exactly. It turned out to be the main UI framework in NiceGuy. Most or many elements are based on Quasar or existing Quasar components. We call them elements in NiceGuy, but there are components in Quasar. It's just a choice. 00:24:43.140 --> 00:24:51.320 And other components or elements like eCharts or Acrid or something, they are independent of Quasar. 00:24:52.419 --> 00:25:03.840 So you're not tied to using Quasar when using NiceGUI, but it delivers a nice foundation, a basic set of elements you can use. 00:25:04.160 --> 00:25:04.700 Cool. 00:25:05.020 --> 00:25:06.440 So another one. 00:25:07.900 --> 00:25:08.700 Let's go with this. 00:25:09.960 --> 00:25:16.840 The AG grid looks like a super cool way to put grids of data, editable grids, sortable grids. 00:25:17.400 --> 00:25:18.220 And tell us about like this. 00:25:18.880 --> 00:25:22.620 It's probably something you do a lot with the analytics coming off the robots and stuff. 00:25:22.780 --> 00:25:25.860 But I know other people do other interesting things. 00:25:25.980 --> 00:25:29.560 An example on their website is like kind of a stock chart that updates live. 00:25:30.000 --> 00:25:34.760 Yeah, we learned AG grid also through JustPy. 00:25:34.800 --> 00:25:37.540 It was the way to present a table in JustPy. 00:25:37.860 --> 00:25:39.760 So we basically adopted it. 00:25:40.880 --> 00:25:48.860 Meanwhile, we are also offering a UI table, which is a quasar table. 00:25:49.340 --> 00:26:02.160 So you can choose if you want to use UI ag grid or ag grid for an ag grid, or you can use the quasar table, which is a bit different in look and feel and the interface. 00:26:03.440 --> 00:26:11.580 Yeah, but generally what we discovered when NiceGuy grew bigger and bigger that people really are into these tables. 00:26:11.880 --> 00:26:13.540 They really need that a lot. 00:26:13.940 --> 00:26:14.920 And all the features. 00:26:15.200 --> 00:26:17.720 And AG Grid, for example, is really, really powerful. 00:26:18.260 --> 00:26:32.360 And the abstraction we chose at NiceGuy is really great to bring all this into the Python world, where you can simply write something in and you can use it in the web like it would be in the web, but you use it simply in Python. 00:26:32.980 --> 00:26:38.860 And so the interaction with that when you're writing, when you're developing, what do we want to do? 00:26:39.120 --> 00:26:42.360 And so it's quite a good fit together. 00:26:42.790 --> 00:26:47.160 And we could map all the features basically into Python. 00:26:47.940 --> 00:26:54.160 And this is true for all the other elements also, that they are simply just a JavaScript component somewhere. 00:26:54.470 --> 00:26:58.660 And we can write a small layer around that to bring it into the Python world. 00:26:58.780 --> 00:27:00.820 And then you can really instantiate the object. 00:27:00.990 --> 00:27:08.820 And then it automatically connects to, we have a web server and sends the messages over the secure channel to the website. 00:27:09.050 --> 00:27:12.260 And so we have this great user interface at the browser. 00:27:12.680 --> 00:27:17.480 And in Python, it's simply just a Python program running everything you want to run. 00:27:18.060 --> 00:27:18.180 Yeah. 00:27:18.310 --> 00:27:23.500 And I definitely want to dive into the server front-end data exchange. 00:27:23.780 --> 00:27:24.480 This is going to be fun. 00:27:25.320 --> 00:27:28.560 But rounding things out, I guess we also have some really nice charts. 00:27:28.620 --> 00:27:43.780 with eCharts. I guess there's a pretty strong data science story here as well with what you all can build and the tools you got integrated, right? Yeah, of course. There are a lot of data scientists 00:27:43.950 --> 00:28:03.420 out there which really like to use a simple framework to simply show a chart. And there are other kinds of frameworks which can deliver on that, like Streamlit or so. But Streamlit is quite difficult when you come to state management, how to do the database or how to integrate another third-party library. 00:28:03.970 --> 00:28:28.500 You get really stuck into that. This was also one of the motivations behind NiceGuy when we invented it because of course we knew Streamlit and we know how to use it. This also has a lot of charts. NiceGuy is really meant to be very friendly for the programmer to not break the intentions you have and also be very powerful. 00:28:28.720 --> 00:28:34.400 And of course, with eCharts and also other charting libraries, we can very easily integrate. 00:28:34.700 --> 00:28:37.500 We have some powerful tools here for data scientists. 00:28:37.860 --> 00:28:38.960 Yeah, it looks beautiful. 00:28:39.740 --> 00:28:42.440 Now, the final building block that I want to talk about. 00:28:42.720 --> 00:28:53.580 One, and I kind of said this earlier with this looking towards this in mind, is if you do everything in Python and you're just doing HTML, then it gets really hard to style those sorts of things. 00:28:53.680 --> 00:28:57.940 But you all chose Tailwind for your styling, right? 00:28:58.419 --> 00:29:03.640 If you need to, you can actually almost drop into the HTML level and do Tailwind type of stuff. 00:29:03.700 --> 00:29:08.040 But there's also a fluent API in Python to apply Tailwind classes. 00:29:08.700 --> 00:29:11.540 Give people, I don't know how much I've talked about Tailwind. 00:29:11.540 --> 00:29:13.640 I'm sure there's a lot of people that are like, what is Tailwind? 00:29:14.460 --> 00:29:16.900 And then why is it special? 00:29:17.040 --> 00:29:23.480 Why is it especially good for this type of programming where you're interacting with the widgets? 00:29:23.500 --> 00:29:24.880 or the components themselves. 00:29:27.220 --> 00:29:33.640 Yeah, Tailwind or Tailwind CSS is basically an abstraction layer for CSS. 00:29:34.040 --> 00:29:39.440 CSS is the way you are styling things in the web in HTML. 00:29:40.100 --> 00:29:46.000 Plain HTML is pretty dry and has no styling, and you're usually using CSS to style it. 00:29:46.300 --> 00:29:59.500 And Tailwind CSS makes it a bit easier, for example, well, they have a good example, It provides many shortcuts by adding classes to your HTML elements. 00:30:00.360 --> 00:30:05.260 You're achieving more complicated things or you just can write it shorter. 00:30:06.140 --> 00:30:11.740 And so like a P4 is four units padding for an element. 00:30:12.020 --> 00:30:13.360 Right, right, right. All the way around. 00:30:13.510 --> 00:30:19.060 Yeah, usually then the fun starts when you can add prefixes like hover. 00:30:19.280 --> 00:31:03.680 then this styling only applies when hovering and for certain screen sizes or in dark mode and not in light mode and same things. So it's pretty powerful. And by adding it to NiceGuy, you have an easy way to style your elements. You have been written in Python without having to write plain CSS. It's a bit shorter. In the beginning, we didn't think that it would take off so much, but when you start using it, you do not want to stop. And then you want to write all your styling in Tailwind. Easy and simple. But to address your thought about, well, then you can, I'm assuming that you are thinking then you can just use plain HTML and Tailwind. 00:31:05.060 --> 00:31:23.900 We thought about introducing a NiceGUI abstraction, some kind of styling language in NiceGUI, which is on top of Tailwind CSS. But this proves to be very hard. And then you don't win that much that it's worth the effort. And if you are introducing a new abstraction layer, 00:31:24.260 --> 00:31:29.120 then you have to document it, you have to test it, you have to find the right level of abstraction. 00:31:29.620 --> 00:31:35.500 And using Tailwind CSS as it is, we just can refer to the documentation, which is great. 00:31:35.940 --> 00:31:38.060 and everybody can just look it up. 00:31:38.880 --> 00:31:45.600 And while doing, though, learning CSS and styling and tailwind, and that's useful as well. 00:31:46.400 --> 00:31:58.700 I think we had a pull request like four years ago or multiple attempts to create an own layout engine where you can define, okay, how the width and how the height and stuff like that. 00:31:59.100 --> 00:32:04.360 But then you need to think about, okay, this is always the web, what you're talking about, and it's super, super powerful. 00:32:04.420 --> 00:32:07.540 And the language for the web for styling is CSS. 00:32:08.040 --> 00:32:09.300 There's no way around it. 00:32:09.430 --> 00:32:18.640 If you find some other abstraction, it will definitely break at some points and also not allow every mutation and every kind of variance or so. 00:32:19.000 --> 00:32:26.200 And maybe we will introduce something later on or sometime. 00:32:26.640 --> 00:32:34.060 But what we really try to do with NiceGUI is that you can do the simple things very easily and you can do it very quickly. 00:32:34.380 --> 00:32:37.280 But the difficult things should also be doable. 00:32:37.740 --> 00:32:42.920 And so if we have an abstraction, then like in Streamlit, you cannot do it. 00:32:43.200 --> 00:32:44.660 It's just you are locked in. 00:32:45.000 --> 00:32:48.280 And this is not something we would like to have in NiceGUI. 00:32:49.940 --> 00:32:52.820 This portion of Talk Python To Me is brought to you by Agency. 00:32:53.350 --> 00:32:58.480 Build the future of multi-agent software with Agency, spelled A-G-N-T-C-Y. 00:32:59.180 --> 00:33:03.560 Now an open source Linux foundation project, Agency is building the Internet of Agents. 00:33:04.200 --> 00:33:10.340 Think of it as a collaboration layer where AI agents can discover, connect, and work across any framework. 00:33:11.200 --> 00:33:12.500 Here's what that means for developers. 00:33:13.120 --> 00:33:18.800 The core pieces engineers need to deploy multi-agent systems now belong to everyone who builds on agency. 00:33:19.150 --> 00:33:25.240 You get robust identity and access management, so every agent is authenticated and trusted before it interacts. 00:33:25.880 --> 00:33:38.300 You get open, standardized tools for agent discovery, clean protocols for agent-to-agent communication, and modular components that let you compose scalable workflows instead of wiring up brittle glue code. 00:33:38.740 --> 00:33:40.180 Agency is not a walled garden. 00:33:40.660 --> 00:33:49.280 You'll be contributing alongside developers from Cisco, Dell Technologies, Google Cloud, Oracle, Red Hat, and more than 75 supporting companies. 00:33:49.840 --> 00:33:50.720 The goal is simple. 00:33:51.160 --> 00:33:58.380 Build the next generation of AI infrastructure together in the open so agents can cooperate across tools, vendors, and runtimes. 00:33:59.060 --> 00:34:02.900 Agencies dropping code, specs, and services with no strings attached. 00:34:03.560 --> 00:34:04.000 Sound awesome? 00:34:04.540 --> 00:34:08.120 Well, visit talkpython.fm/agency to contribute. 00:34:08.659 --> 00:35:03.620 that's talkpython.fm/agntcy the link is in your podcast player show notes and on the episode page thank you as always to agency for supporting talk python to me i think one of the interesting things on tailwind is that you know it's kind of grouped in the utility css frameworks and i don't know that that makes any more sense to people that already know tailwind but it lets you put the css classes right onto the elements and that directly affects them because a lot of CSS frameworks have a kind of a very separated, here's your CSS and style. And then here's your, the effect it has, like if it's in a row, if it's in a container, which is in a row, which then has this property, then it has some effect. And there's a very big separation of ideas. And this is more of a, let's leverage the locality, like right on the element, you can see that it says font dash medium text-2xl. 00:35:03.760 --> 00:35:05.460 Oh, okay, well, that's what the property... 00:35:05.460 --> 00:35:07.480 You don't have to look anywhere else than right there, right? 00:35:08.300 --> 00:35:23.720 And so it still works pretty well, I think, with NiceGUI, because as you're working in Python writing code, when you apply the style, you apply it to the thing in a real similar way to Tailwind, unlike, say, Bootstrap or something more separated. 00:35:24.120 --> 00:35:24.180 Yeah. 00:35:24.540 --> 00:35:31.320 Also, when you look at C# and Samuel also, they wanted to separate the layout from the content, and we decided that it's not good to do this. 00:35:31.840 --> 00:35:52.380 Because when you're writing UI, this is a good example for the with statement, where you open a context to do an intent like, okay, now we have a new row, and inside the row there's another row, but we have always an intent invention so that you can look at it and you see in the code, okay, there's something new going on in Clojure. 00:35:52.660 --> 00:35:59.680 And when you can then put the styling right to it, then you really know, okay, this is the point, there it's going on, and you can simply do it. 00:35:59.940 --> 00:36:02.360 And of course, you can do all the abstractions you can do with Python. 00:36:02.540 --> 00:36:06.980 You can make a class from that and use the component somewhere more abstract. 00:36:07.130 --> 00:36:13.700 You don't need to write like 100 lines of code in UI code right from one step to the other. 00:36:13.840 --> 00:36:18.760 But when you have UI code, you can really look at it and understand very good the structure of it. 00:36:19.100 --> 00:36:20.000 Yeah, 100%. 00:36:20.070 --> 00:36:25.220 Yeah, I'm actually, I don't know if people know, I'm a pretty big fan of C# and.NET and so on. 00:36:25.460 --> 00:36:26.900 Not as much as Python, but for sure. 00:36:27.030 --> 00:36:28.020 But I hate SAML. 00:36:28.300 --> 00:36:29.640 I hate the way they build that. 00:36:29.780 --> 00:36:31.640 It's such a frustrating framework to work in. 00:36:31.900 --> 00:36:32.260 I never. 00:36:33.320 --> 00:36:33.700 Interesting. 00:36:33.940 --> 00:36:36.360 Astro Strongbox out there says, Love NiceGUI. 00:36:36.580 --> 00:36:39.940 Building a battery pack simulation GUI plot. 00:36:40.160 --> 00:36:42.380 UI.plotly.figure.classes. 00:36:42.800 --> 00:36:43.600 W-full. 00:36:44.040 --> 00:36:44.740 H-100. 00:36:45.080 --> 00:36:45.180 Boom. 00:36:45.380 --> 00:36:46.080 Just like that. 00:36:46.300 --> 00:36:46.540 Great. 00:36:46.880 --> 00:36:47.320 Yeah. 00:36:47.380 --> 00:36:48.720 And that is the NiceGUI code. 00:36:48.840 --> 00:36:55.700 So maybe it's a good time to start talking about, you know, how do we maybe, how do we get started working with this? 00:36:55.780 --> 00:36:56.580 Let me zoom out a little. 00:36:56.960 --> 00:36:58.420 So find some examples. 00:36:59.420 --> 00:37:01.880 Right on the start page of our website, exactly. 00:37:02.550 --> 00:37:06.040 There we have basically the most minimal NiceGUI app. 00:37:06.420 --> 00:37:10.760 And it was always important to us that this is easy and short. 00:37:11.220 --> 00:37:15.520 And the minimal NiceGUI app is basically three lines of code. 00:37:15.530 --> 00:37:19.240 You import NiceGUI or you import UI from NiceGUI. 00:37:19.960 --> 00:37:22.800 You add some label, maybe UI label, hello. 00:37:23.180 --> 00:37:24.640 And then you write UI run. 00:37:24.850 --> 00:37:27.360 And this will run the UI for you, start the server. 00:37:28.080 --> 00:37:31.020 As a default, it auto-reloads when you change the code. 00:37:31.230 --> 00:37:33.300 It automatically opens the browser for you. 00:37:33.640 --> 00:37:35.120 So you're right on the right URL. 00:37:35.740 --> 00:37:36.320 And that's it. 00:37:36.560 --> 00:37:37.280 And your app is running. 00:37:38.340 --> 00:37:38.680 All right. 00:37:39.200 --> 00:37:42.060 Let's talk through what actually happens when this code runs. 00:37:42.220 --> 00:37:43.440 So you run this. 00:37:43.940 --> 00:37:50.560 And then this basically starts a server running uvicorn on the default port for FastAPI, which is 8,000. 00:37:50.740 --> 00:37:52.180 So localhost 8,000. 00:37:52.180 --> 00:37:53.400 You click that, it opens in a browser. 00:37:53.900 --> 00:37:56.260 And you've got a UI element that is a label. 00:37:56.460 --> 00:37:56.700 Excuse me. 00:37:56.760 --> 00:37:57.180 That's a label. 00:37:57.420 --> 00:37:58.400 It says, hello, NiceGUI. 00:37:59.840 --> 00:38:05.940 That's unimpressive, of course, because it's just sending some HTML to the web browser and the web browser is rendering it. 00:38:06.260 --> 00:38:15.140 But in the background, the web page is connecting back to the server with an ID of a client which is created on the server and says, okay, I'm connecting back. 00:38:15.150 --> 00:38:17.120 I now establish a WebSocket connection. 00:38:17.460 --> 00:38:20.020 And from there on, the web browser is connected to the web server. 00:38:20.840 --> 00:38:27.660 And all the events which happen, like when you have a button or so, when you press it, the command is sent through the web socket to the server. 00:38:28.000 --> 00:38:30.380 And then the server can decide, OK, what to do about this? 00:38:30.520 --> 00:38:31.280