#386: Realtime Web Apps and Dashboards with H2O Wave Transcript

00:00 Python's data science and visualization capabilities are certainly one of the reasons for its meteoric rise over the past ten years. But often those visuals have been corralled into notebooks used by data scientists themselves, or into static web pages. Recently, a host of excellent dashboard building and hosting frameworks have come along to turn these visuals into interactive apps for everyone. On this episode, we'll talk about H2O wave, one of these excellent dashboard frameworks. We have Martin Taroshi from H2O.AI here to tell us about Wave. This is talk Python to me. Episode 386 recorded October 2022. Welcome to Talk Python to Me. A weekly podcast on Python. This is your host, Michael Kennedy. Follow me on Twitter, where I'm @mkennedy and keep up with the show and listen to past episodes at Talkpython FM and follow the show on Twitter via @talkpython. We've started streaming most of our episodes live on YouTube. Subscribe to our YouTube channel over at Talkpython.FM/YouTube to get notified about upcoming shows and be part of that episode.

01:18 This episode is sponsored by Microsoft for startups foundershub. Check them out at Talkpython.FM/foundershub to get early support for your startup. And it's brought to you by Sentry. Don't let those errors go unnoticed. Use Sentry. Get started at Talkpython.FM/sentry. Transcripts for this and all of our episodes are brought to you by AssemblyAI. Do you need a great automatic speech to text API? Get human level accuracy in just a few lines of code? Visit Talkpython.FM/AssemblyAI. Martin welcome to Talk Python to me.

01:50 Thanks, Michael. Thanks for having me.

01:52 Oh, it's really great to have you here. I'm super excited to learn about H2O Wave. It looks like a really cool project. That one of these enabling empowering projects for people who don't feel like, oh, I could take my whatever I'm building my ML model or whatever, or my data analysis and turn it into a website or an app or any of those sorts of things. And they'll see that they can with Wave, right?

02:16 Yeah, that's right.

02:17 Yeah. Should be tons of fun. I think it's going to be a relevant topic for a lot of people. Before we get to any of it, though, tell me about your background. How do you get in programming in.

02:26 Python, like most of people do, I went to college, study programming, computer science. I started working originally as a Java developer, actually, then switched to web developer because there was a lack of front end engineers. And once I joined H2O, I mostly work on front end here as well. But I somehow got in charge of this Python framework. So I need to write a lot of Python on day to day basis as well.

02:55 I think one of the big ironies of these data science tools and these nice Python visualization tools is they're there to let people write Python so they don't have to write a ton of front end code or those kinds of things, or write their own web frameworks or use Vue or React. And yet people like you who actually make them spend so much time in the JavaScript side of things, right? I mean, same thing for Jupyter.

03:22 Someone's got to do it and you're kind of doing it for everyone else who uses it and gets to avoid it, right?

03:28 Yeah, that's right. I mean, if you have a look at it, then function engineering is quite complex topic these days compared to what it has been, let's say, ten years ago.

03:40 You mean it's more than just linking to Jquery on a CDN?

03:45 Definitely.

03:46 It used to be so straightforward and it really is. If you don't do a day to day, it's like, how do I even get started to get this app up and going? It's crazy.

03:54 Yeah, exactly. And that's why we are here today, to talk about how to make everyone's life easier.

04:00 That's right. Well, everyone but yours. You take the pain for the rest of us.

04:03 Yeah, but I kind of enjoy it, so there's not a problem.

04:07 Yeah, of course. If you love it, then it's all good. Before we get into Wave, you said you switched over to front end stuff. What are your front end technology favorites? Like front end frameworks and stuff?

04:19 To be honest, I don't like Frameworks at all. I like Web as a platform because it also has become very powerful. We have a lot of stuff that we didn't have before. But you know, if you want to build something enterprise or something that doesn't need longer maintenance, then you need to reach out for frameworks. So currently I work in React, which is, I would say industry standard, but also have experience with Vue or Angular. So at the end of the day, it's just a tool in our toolbox.

04:55 Pick one and go with it. And other friendly question. Straight JavaScript or TypeScript.

04:59 Definitely TypeScript all the way. Yeah, I mean, once you try type script, then there's no way back.

05:05 Okay, I've done a little bit of TypeScript, but not enough to really pick it up. I don't think. My JavaScript front end experience is pretty limited. I try to stick with the Python side of things, the server side type of things as much as possible. Speaking of which, sticking with Python, I guess maybe could get to the other question. What do you do day to day? Kind of edge our way into this project. Did your day work on this H2O, right?

05:30 Exactly. So basically I work on H2O way, which is a framework for not only data scientists and people making AI models to make their life easier, as you have already said, and to allow them to build web applications without regular knowledge like HTML, CSS and JavaScript. And my day to day concepts of basically helping people out on community device answering questions, getting new feature requests in. Then I have also two people, two developers that I help with bringing their issues up, unlocking them, and I also need to code bigger features and basically speaking a podcast if I have time.

06:19 Yeah, it sounds a little bit like a blend between sort of a program manager, software developer on one half and then dev evangelist almost on the other.

06:29 Yeah, in country where I come from, we call it a girl for everything. So basically you need to jump on a lot of heads.

06:38 Yeah, perfect. All right, well, give us the quick elevator pitch of H2O Wave. It's four people.

06:47 The headline, I guess the H1 of your website, if you will, is Make AI apps.

06:53 Yeah, that's right. So basically what I've already said, H2O wave is a framework that allows you to build web applications and dashboards with nothing but Python. No CSS, no HTML, no JavaScript required. However, if you wish to sprinkle a little bit of JavaScript or CSS, then you definitely can. That's not a problem. And basically we try to build a rich library of widgets or components that are ready to use, and that should cover a wide range of scenarios that people might encounter. So at the end of the day, you end up with very little bit of Python code that does very much.

07:36 Yeah, let's set the stage a little, maybe thinking about what options do people have today? They've got an ML model that makes predictions. Or maybe they've got something that will slice and dice the data and turn it into a graph. But you want to let them maybe pick the country by which you do you pull the data from or the time range or some other aspect and make it a little bit interactive. Or even not if you don't have that option. Just make it static. I guess. What are the different things people are doing now that might relate to this?

08:08 Yeah, that's a great question. So the simplest thing that people can do is the regular tool of their interest is the Jupyter notebook, which is very user friendly. You have just a single font which you type into and behaves as a REPL. And basically what they get in response are just static images of graphs or whatever. And these then can be then copy pasted as screenshots to either PowerPoint presentations or whatnot. However, this approach is, as you have said, somewhat static and can be not so engaging, let's say. So that where web application come into play, which can sprinkle a little bit of interactivity. So let's say you have a sidebar that has various controls like filters or maybe some sliders that adjust model values. And on the right side you get your visualization interactively in real time. So this is something that has more struggling power. Let's say H2O Wave was initially built with this in mind as well.

09:24 Right? And Jupyter is fantastic so many people work in Jupyter and do amazing things, but it's not necessarily what you deliver to an end user. Right. If the CEO of your company says, hey, I want you to give me a dashboard that helps me understand, say, sales and cost this month, you probably aren't going to just point them at your Jupyter notebook on GitHub. You probably still are not even going to point them at a version running on your server. What if they want that updated every minute?

10:00 Exactly.

10:01 Highlights are important stuff and they want to access it on their phone in a way that is like, you have more control over how it lays out. It's just Jupyter is great, but it's not an end user technology, it's an enabling technology. Right. It's like saying, well, I'm going to give power a PyCharm to a user to run my app. It's like, well no, it's cool if you could run your code, but that's not the tool that you give them to do it with. Right. You package it up into a dot app or whatever you're after.

10:31 Yeah, exactly.

10:32 That's kind of the gap you're trying to close, right?

10:35 That's right.

10:36 Well, cool. Okay, now when I hear that, I think of a couple of other projects. STREAMLIT, I interviewed Adrian Back, I think it was 2019, who founded STREAMLIT. And STREAMLIT is about building these really simple dashboards, sort of interactive places where on the left you've got a few things you can change and on the right you might have some kind of graph or you might get a four or four if you're clicking through the gallery right now. But this is in that realm. And then also Plotly dash as well. Give us a sense of how those compare because there's probably people listening who are like, well, I'm really interested in this, but I've already considered working with STREAMLIT. Should I choose H2O wave? Or should I stick with streamlit or whatever?

11:25 Yeah, definitely. So basically one of the main reasons that Wave was built because it's very similar to the project that you mentioned, is that we were not very satisfied with either of performance. And the second reason was that, for example, streamlit apps used to be very resource heavy. That means a lot of money in production costs. So the reason was that Streamlit used to run a separate process for every single browser tab, which of course demanded a lot of memory. However, I've checked before this podcast to be 100% sure and it seems like they migrated to single threaded asyncio approach since then, which is the same approach that, let's say, Dash or H2O Wave also follow. So this is not a differentiator anymore. The biggest differentiator is that H2O Wave has most features, let's say most widgets to use and we also haven't seen any, let's say, regular web application beyond these filters and sliders that change your model outputs. H2O wave we've seen like web applications that you would guess maybe only software engineers could build data scientists.

12:50 Right. So, for example, with Streamlit, what I often get, like here, I pulled up an example that they have some real time texting and what you get is kind of this interactive. This one doesn't even have a sidebar. It's pretty nice. So you can get a little drop down and a button to start working with it, but you don't have like a footer and a NAV bar and multiple things on there with responsive layout and like a lot of the stuff you would expect. Right. It's still pretty close to what you might see on a notebook. As nice as it is. I do really like streamlit.

13:21 Yeah, exactly. We call this concept toy apps. Let's say these are more like PLCs, the stuff that we have talked to a while ago. Base is originally built with this in mind, but then somehow grew much larger that we can talk about it.

13:41 Yeah, it definitely seems like it's grown a bit more. I haven't checked up on Streamlit enough to be able to follow along with exactly how many widgets they have and so on. But yeah, maybe compared to plotly dash as well.

13:56 Yes. So I'm not very experienced with plotly.

13:59 Neither am I, to be honest.

14:00 But assuming the same story there. So they have a few form widgets, like text boxes, dropdowns, etc, that let you control the visualization, but also if you have a look, this visualization that you present. And these are like 3D models for our listeners who can see our screen. Most likely it's just third party JavaScript library, which means that it's not necessarily a part of locally Plotly dash. So no Python API.

14:32 Right. If we look over here at H2O Wave, the headline is Make AI apps. But it sounds to me like a broad range of apps could really land here. If you're interested, almost any kind of reporting dashboard, visualization, give us some ideas of the types of apps that people are building here.

14:50 The most common applications are deploy apps, as we have already discussed. But once people truly discovered the power of Wave, then they started to amaze us as developers because they started to build production grade applications that could be deployed and hooked to production and work just fine. For example, H2O organized public, let's say hackathon that's aimed to save or to predict wildfires in California, I believe in California, maybe the whole world. And one kind of software engineer built truly a wonderful web app that allowed them to submit their model, to preview them, to make scoreboard and everything within the application. And it took him like two weeks, which is like incredible.

15:49 And that's amazing.

15:50 Yeah. But maybe some success story from a data scientist context. Let's say we have a team at H2O that was very happy with one of our data science products, so they decided, let's build one ourselves. The result was that they built it called Hydrogen Torch and the Framework for Deep Learning. And the result is a wave application that was built within a week or two as an initial concept. And it has features like Pydantic models. You can see how it predicts, let's say, computer vision models with image annotations. It has support for audio, if I remember correctly. And it yes, exactly. Simply just everything that you can expect from a regular web application. And that blew my mind because the guys behind Hydrogen Torch are not for engineers, they are purely data scientists. They are even Keggle grandmasters for those who are aware of Keggle platform. And they were able to build it.

16:56 Themselves, which is Hydrogen Torch. Okay, yeah, I haven't heard of that. Looks pretty cool. It has experiment flow and data set connectors and even pre processed data sets.

17:09 Yes, and remember that these features were built by data scientists, which is something that you would typically require hold a software engineering team.

17:18 Right, right. And they probably didn't even use any TypeScript or react.

17:22 No, that's cool.

17:26 This portion of talk Python to me is brought to you by Microsoft for startups Founders hub. Starting a business is hard. By some estimates, over 90% of startups will go out of business in just their first year. With that in mind, Microsoft for Startups set out to understand what startups need to be successful and to create a digital platform to help them overcome those challenges. Microsoft for startups founders. Hub was born. Founders Hub provides all founders at any stage with free resources to solve their startup challenges. The platform provides technology benefits, access to expert guidance in skilled resources, mentorship and networking connections, and much more. Unlike others in the industry, Microsoft for Startups Founders Hub doesn't require startups to be investor backed or third party validated to participate. Founders Hub is truly open to all. So what do you get if you join them? You speed up your development with free access to GitHub and Microsoft cloud computing resources and the ability to unlock more credits over time. To help your startup innovate, Founders Hub is partnering with innovative companies like OpenAI, a global leader in AI research and development to provide exclusive benefits and discounts through Microsoft for Startups Founders Hub, becoming a founder is no longer about who you know. You'll have access to their mentorship network, giving you a pool of hundreds of mentors across a range of disciplines and areas like idea validation, fundraising, management and coaching, sales and marketing, as well as specific technical stress points. You'll be able to book a one on one meeting with the mentors, many of whom are former founders themselves. Make your idea a reality today with the critical support you'll get from Founder Hub. To join the program, just visit Talk Python FM/Foundeshub all one word the links in your show Notes thank you to Microsoft for supporting the show.

19:17 I think maybe to give to make this a little bit concrete, to help people get a sense of how you work with this and what it has to offer. I want to maybe talk through two areas. I want to talk through kind of getting started, what it looks like to write some code here. Also maybe talk through some of the widgets. Because as you pointed out, if you look through the widgets section, it's like a multilevel hierarchy of things. But there are several hundred widgets that you can use that's a lot to just be able to write a few one line of Python and bring in some amazing UI element, right?

19:54 Yes.

19:54 But let's start with going through the tutorial so we can talk to maybe a couple of these because I think they're a little bit interesting. They're all quite short and I'll keep it simple because I know code on the Internet is hard. But just to kind of give you a sense of like some of the moving parts. So in order to do any of this stuff, maybe we should also think a little bit about the architecture is you have a wave server and you have wave applications, right? You write these wave applications in Python, but the server itself is like a go centralized host, like micro wsgi or g unicorn or something for wave, right?

20:32 Yeah, exactly. So basically you have said that there are two parts, the server and Wave application. Web server is written in Golang and it provides one of the highlight features, let's say, and that is seamless integration with Open ID Connect, which is authentication authentication protocol, because most of the your enterprise applications need to be secured somehow. And as a data scientist, you just don't want to do that yourself because it's security wise. Check.

21:07 Yeah, sure. And even if you did, a lot of the OAuth flow requires you setting up certain endpoints and it's tricky.

21:14 Yeah, exactly. It's tricky for regular, for engineers. So that's why we provide this feature out of the box and it's provided by Wave Server, which our Wave app, which is a Python server connects to and talks to browser through as a proxy, let's say. So all the data goes from Python application to Wave Server. And then Wave Server keeps an open WebSocket connection with browser to perform real time.

21:46 Okay, so to get started, start the Wave server through the virtual environment, pip install H 20 Wave and then that's it. You just have that one dependency. I guess you might have to pip install h2o wave before you can start the server if you haven't got it globally available. But then you just have to write a little bit of code. Now there's interesting paradigms that you've chosen here. A lot of the web frameworks are stateless, right? Here's an end point. And the only thing this endpoint knows about anything is that here's the request coming in, maybe a cookie is passed, maybe a query string is passed or a form, but other than that it's separate, unknown, unrelated, no history. And with these apps, it's a little bit more like a single running script that has a bit of a memory, right?

22:34 Yes. So basically a Wave has two concepts. Let's say one is Wave Script, the other one is Wave App. And the difference is that Wave Script, as the name suggests a script. So you write a Python code, you involve it like, let's say Python Hello World.py, not like you would do with the normal regular Python script. And what that does is it converts your Wave data into a JSON, sends it to Wave server and keeps it there. So that means that your Python process is finished and you only serve your data from Waveserver to users, which is much more performance than if you had to rerun the script for every single user, as you would normally do.

23:26 Yeah. Okay.

23:27 And another concept is a wave app, which is something that most our users use. And Wave app lets you add interactivity because wave scripts are more suited for dashboards, which are just static read only web apps, let's say. And you can even update it as you wish. But with wave application, you probably want to handle your button clicks or drop down changes. And all this needs to be recorded back on Python server, right? Yeah.

24:01 You're going to trigger elements of the page changing and things of that sort. So one thing that's interesting here is you create a site by giving it an end point like /hello. And you can have multiple ones of these running on the Wave server, these multiple scripts for multiple apps. And then you start working with these widgets. And these widgets can be composable and hierarchical and they feel a little bit like almost like working with Flutter. You have these UI elements and you might have like a layout which has a grid. And into the grid you might put a table, and into the table you might put cards. You kind of build this up in code. Mostly you can use HTML and other templating languages, but mostly you write it in code by first, this example you have here, you just say, I'm going to create a UI markdown card, right?

24:50 Yes. So basically the basic building of local script or apps is something called card. So if you want, in the example in front of us, you have specified UI markdown card, which is, as the name suggests, a card that lets you display, markdown and interpret it. And that's about it. You put your card into the layout and that's it. Yeah.

25:14 You also have the idea of basically a grid layout where you can position these cards to be in a certain offset in a certain size. Right. So in your Hello World example, you have the position as box 1 1 2 2, which means the top left and then too wide, too tall.

25:31 Yeah, exactly. So the box 1122 means col one, row one, and width two, and heights two. We also support another type of layout, and responsive layouts for more advanced users. This grid layout is more like the simplest layout that we could write, but it's fixed. It means that it may not work well on every single screen. But if you want more responsiveness, then definitely go for responsive layout, which is based on Flexbox.

26:02 Right. So maybe it's five wide if you got a big screen, but if it's on the phone, they just all go vertical.

26:08 Exactly.

26:08 Okay. And let's see. What else do I want to call here? All right, I think that one's pretty good. You also have this idea of editing your page from the REPL, so after you've done that, you can then just fire up Python and start working with it again. How does that work?

26:24 It's mostly just for playing ground.

26:27 Maybe debugging.

26:28 Yeah, maybe debugging, but I don't think that people develop that way. It's just to show people it's really nothing but Python. No hidden concept, nothing like that. You can basically hit up your REPL and work from there as well, if you want.

26:43 Yeah, but what surprises me is you can exit your Python script, and then you can open the REPL, import the code, and then make some calls to it. And it actually changes the running code that I see. Right, yeah.

26:56 Basically the magic behind that is, if you notice, we have that page save function, which basically what it does is make the diff of what has changed from your previous save and send it over to the wave server. And wave server that deals with that and displays whatever changes you need.

27:16 So since it's a static file, effectively it's just there's a singleton copy on the server that everybody's requesting.

27:24 Exactly. That's why it's suitable for dashboard.

27:27 Sure. So another thing that jumps out is you make this change, and then people will have the browser open to that page. It just changes. They don't have to reload.

27:40 It has built in smart, hot reload. Tell us about that.

27:45 Exactly. So this is one of the things that I think that may be appealing even to, let's say, regular software engineers, because the problem with software engineers is, like, if you present them with framework like this, they want to have more control. Right. We are software developers. We need to have control over everything.

28:07 That's why we don't like what's WordPress.

28:10 That's a great undoing a shiny thing and we have to create it ourselves.

28:14 Yeah, exactly. But the problem with, let's say, the typical approach to building a web application today, which is a single page application, is that all the initial triggers need to be done from client side, from the browser. But if you want to reflect changes that happened on the backend side, then this can be a bit problematic. You don't need to introduce polling, which means calling your web server your back end regularly. But that may not be ideal because you can flood your server unnecessarily.

28:48 I don't know why we can only support 20 users at a time. It doesn't make any sense.

28:54 Or you can use WebSocket, which is not so easy to implement, let's say. And what Wave uses is exactly this WebSocket. So it allows you to push changes from server to UI seamlessly. And that's also one of the wonderful features.

29:12 Right. So basically, the takeaway for most people is as you develop your code, as you develop your project, your app, you have it maybe open on the side, and your browser, you make some changes. If you just hit save, then it should automatically maybe you have to re run your script, but you won't have to go and refresh your browser as well, right?

29:31 Yes, exactly. Even with the applications, we use Uvcorn as underlying Python server, which has built in hot reload. And that means that you can just save your file and everything automatically cool.

29:47 So UV Corn is watching your Python files for changes. So when you save it automatically restarts it.

29:52 You don't even have to yeah, exactly. It restarts it. And also the browser is refreshed.

30:00 Okay, fantastic. So that's a pretty cool little hello, world. The next one is to get the browser to sing 99 Bottles of Beer on the Wall, which is a fun little demo. But this one takes us from this one is still a script so far, right? And then the next one will convert it to an app. Okay. So for this one, the core takeaway here is basically a way to introduce pushing updates from the server to the client. So, for example, people don't know there's 99 bottles of beer in the world. 99 bottles of beer. Tick one down, pass around. Now there's 98 and 97. The 96. Right. So you wanted to have it keep doing that over and over and over. So if this was a console app, how would I do it? I would probably say for I and range. And just for 99. And then I would just print. Just print, print, print, print. What you can do with Wave is you can have that exact same super straightforward for loop. And then you just go to your card that you put in the page, and you just say content equals some F string. Right. That verse for that number. And then you just call page. And then you don't want it to happen as fast as possible. He was sleep.

31:12 Right?

31:12 Make it come out a little bit slower. But that does the multicast broadcast to all the clients watching, just straight away. Right? Just loop over the code, make some changes, and that will automatically push it. I guess you got to call it, but then it will push it. That's pretty impressive.

31:28 Yeah.

31:29 By the way, just not to forget the original. Author of this framework is not me, but it's my boss, Priti Prabhu, which I would like to give a shout out to because he's the mastermind behind all this framework cool.

31:41 It's definitely a cool framework. So this opens up a lot of possibilities for people coming to your site and getting some form of interactivity. Now, one thing he said is I could build, say, like a chat app or some kind of bot. And what I've seen so far, it feels like what is happening on the server is shared with everyone rather than dedicated to a particular user or group of users. How do I combine this to say I want them to sing the song, but I want everyone maybe who logs in to have their own copyright. Like Sarah came 30 seconds later. She shouldn't join the song halfway through or a third of the way through. She should get it from 99 going down.

32:26 Yeah, that definitely possible. The reason that you see for every single tab the same output is because we are only looking at the scripts, which in case of dashboard, that's totally understandable, right? Everybody should see the same dashboard because data is always the same. But with web apps you get basically the common behavior, as you would suggest. So every tab can have its own page. I see.

32:54 So let's say it's own session basically.

32:57 Exactly. So if you have what counter app that has a single button and once you click it, then it increments counter. You can basically have a single button instance for every single tap if you want to. But we also have something called multicast and broadcast mode. And that means that the value could be synced across every single tab if you wanted to. But the default mode is called unicast and that means that the change is only propagated to the current client, which is okay.

33:31 Yeah, that makes a lot of sense.

33:35 This portion of Talk Python to Me is brought to you by Sentry. How would you like to remove a little stress from your life? Do you worry that users may be encountering errors, slowdowns or crashes with your app right now? Would you even know it until they sent you that support email? How much better would it be to have the error or performance details immediately sent to you, including the call stack and values of local variables and the active user recorded in the report? With Sentry, this is not only possible, it's simple. In fact, we use Sentry on all the Talk Python web properties. We've actually fixed a bug triggered by a user and had the upgrade ready to roll out as we got the support email. And that was a great email to write back. Hey, we already saw your error and have already rolled out the fix. Imagine their surprise, surprise and delight your users. Create your Sentry account at Talkpython.FM/sentry. And if you sign up with the code talkpython all one word. It's good for two free months of sentry's business plan which will give you up to 20 times as many monthly events as well as other features, create better software, delight your users and support the podcast. Visit talkpython.fm /sentry and use the coupon code talkpython.

34:51 Maybe this is a good time to pause going through some of these code examples and some of these capabilities. Bhavani has a good question.

35:00 What databases are supported? Not necessarily even just databases, but where does this code run? Is this pyscript and Piodide. Is this on the server? What capabilities do I have? Can I pip install whatever I want? Or am I basically there are the.

35:17 Limits because all the code is running in server. So that means that you can basically connect to any database of your choice the same way as you would do, let's say, in Django or Flask app. Basically you can install pip anything you want on your server.

35:34 I see. So if it's supported with Python, or in some crazy indirect way that you might write some C, you could call from Python, you can call it it's full Python. So it does whatever you want it to do.

35:48 Exactly. Whatever you can make Python to do, then it's possible in Wave as well.

35:53 Sure, that's really good to know. All right, so I guess maybe the third thing that really is let's talk about two things real quick before I get to the third one here. One thing that's interesting is what you're setting here in this example is in the for loop, you're saying the content is this F string and you regenerate the entire F string. And for this example, it's like a tiny little it's a verse in a song and who cares? But if this was a much more interesting, like a full on JInja style template and you want to just change one little small piece, re round tripping, that full HTML every time is not the most efficient. So what you have, because you're doing WebSockets, is you have this idea of an expression to send some values over. So you pass a dictionary of the values and then you set the content to be an expression. A little handlebar thing like JavaScript print and binding or a Jinja value, something along those lines. Right. Tell us about this and how that works.

36:53 Yeah, so basically it works. Basically what? You always send just the difference in all the diffs, or let's say deltas both has changed to the UI and once these changes are arrived to the browser, then react, takes over it and renders whatever changes have come. Right. So in this particular case, the first change would be the whole string because there is nothing else there. It will be rendered, but all the subsequent updates will only contain changes in the form of dictionary values, which is much less to care about on the network. And weight side and once these values arrive, then react again, takes over and does it magic and update the UI correctly.

37:42 Yeah, that's really neat. So really great way to be super efficient just by setting some values like on your card, data, whatever you want to call it, and then call save and those correspond over to your expression. Right. That makes up your template. Yeah.

37:58 And that's even more important in our domain because data scientists usually have a lot of data, extremely a lot of data. And that means that they would like to push it all into browser and render their plots. But if they did on every single update, then it might not be the best way. Right.

38:22 You got a big page and a tiny little plot that you want to change. It would be better to just say just change that plot but leave all the other stuff there alone.

38:30 Yeah, exactly.

38:32 Cool. Let's talk the last little thing here about how this looks. If we make it an actual app. I think if you need to go to the list the list, okay.

38:41 Or maybe bean counter that will be seen.

38:44 I think the bean counter one. Yeah, the Bean counter one will do.

38:47 Yeah.

38:47 This is a really simple one. So the bean counter one is like a button. You press it, it just goes 1234. Right. It shows things like state, though and whatnot. But tell us, how does it look different to create something like in the script, I didn't do anything heartily about URLs or functions to call or returning, I just did some stuff and then it somehow magically changed. But this looks a little bit more like flask, right?

39:13 Yeah. So the difference in syntax is that you need to have a single function that asynchronous because we use Asynch not to block your UI. And that function needs to be annotated within app annotation, that takes a single required parameter which is a URL path that you want your app to be listened on.

39:41 And within this function, can I listen to forward slash? Like all these examples are like slash counter and hello and so on.

39:47 Yeah, you can use also a route which will be just forward slash and that's it.

39:54 Okay.

39:55 And just to get back. So the annotate function will give you one parameter which is Q and that stands for query and that allows you to control your wave app. So it has methods like Q.save or q.pagesave, I would say. Yeah, q.pagesave, which is an equivalent of page save in our previous script example. You also, instead of page dictionary that you put your cards in, you need to just prefix it with queue. So you end up with queue page and then you specify your card.

40:31 And this is how you get the per user type of thing because that queue is probably tied to them, right?

40:36 Not necessarily. The per user thing is by default. But if you go to the app annotation, you can specify mode there. So by default, and that's how it distributes the changes. The queue is more like you can think of it as a source of what has changed and how to update your UI. So when we go through the example order, you will see that it can also store some local state or advice state, etc.

41:08 Okay.

41:09 One of the things that really jumped out to me was here was seeing the Async and await stuff everywhere. So you have an Async method you call await page save, Q page save. And presumably if you want to work with Beanie and MongoDB, you could use it to async API. If you want to call it API endpoint with httpx, you could await those calls. Right. So it really allows you to create really scalable code, right?

41:36 Yeah, definitely. And especially the reason why async is because if you have the case like you have, which has two users, and the first user would create some blocking action, then it would block also the second user because server is busy. Right. It cannot respond. So that's why we need to make everything as synchronous.

42:01 You said you're using UV Acorn behind the scenes, so that's super a great server for this kind of code.

42:08 Yes, exactly.

42:09 Yeah.

42:09 And that's what I looked at things for us.

42:12 Yes, absolutely. It's really good to build on it. Is it running some kind of Python framework that we don't see, like a Flask or FastAPI or something? Or is it just all custom?

42:21 It uses Starlet, although I'm not sure if it's the actual server because I'm not very familiar with it.

42:29 Yeah, so Starlit is the same foundation as FastAPI and other things as well. So it's cool. All right, well, there's a cool getting started. People can walk through and check it out. It's pretty interesting because it is a different programming model compared to how many people would be familiar with Flask and those types of things that are very stateless. And you've got to somehow figure out how to get their session and store that in a database or a redis queue and then get that back and then regenerate it. Right. You have this information more round tripped. I think it'll resonate with a lot of people. It's definitely easier. So I want to talk about the widgets, but actually, before we talk about the widgets, let's touch on one thing over in the examples here, templates. So when I write traditional web applications, let's call them, I'll create an HTML file and I'll probably use some template language like Chameleon or Jinja Two or Django templates and pass the dictionary over there. But I mostly think about what's on the page by structuring an HTML file that has CSS and JavaScript and placeholders for my things to go into and loops and that sort of thing. Is there a way in H2O wave some kind of template like that?

43:48 Definitely. Although we do not encourage it very much because we usually tend to think about using your custom HTML as escape page.

44:00 Hmm.

44:01 And instead we try to provide you with Python APIs whenever possible. But if you really really want, there is also HTML templating if you make it. And that also works the same way as we described the script data update. So it takes one dictionary with the values and then HTML with the template language.

44:27 Right. Does it do the partial updates based on that as well or does it round trip the template, the whole thing?

44:34 I'm not sure about that one, but I would say it also is capable of personal updates.

44:40 Okay, so basically the examples that you have here are you have a little tiny fragment, like a fragment of HTML that will go into the page and then that's the template sounds a little bit like vue components and that style. Yeah, the markdown a little bit together.

44:59 Yeah, exactly. And maybe one more interesting thing to note because the app that we are currently looking at is called H2O Tool and that also live app in itself. So you can see it looks nice even though you have a small screen. And it's a perfect example of what wave is capable because all the code that we see in front of us is rendered in Vs code Editor which is called Monac Editor and that implemented by incorporating custom JavaScript into Wave. So that means if you really need to include some third party libraries in JavaScript, you got to cover it as well.

45:45 That's really awesome.

45:47 Yeah.

45:47 So this H2O Wave tour lets you run the code locally and explore it and search through the different examples, which is really fantastic. So if you go to the website there's a get started that shows you how to get this up and running. What we get is a NAV bar across the top and then like a drop down combo box and a next previous button. On the right side of the page we have the rendered output that's live and then on the left side we have the code that makes it happen. So what you're telling me is that little square on the left pane of my two pane window that's basically VS Code.

46:21 Yes. You can edit it, you have optimum. So if you can try to type into it, hit W and let's say button. Or maybe not. Maybe I remember it wrongly, maybe my.

46:35 Ad blockers make it angry as well. You never know.

46:38 Okay, perfect.

46:40 But yeah, that's cool. You get like highlighting and indentations and.

46:45 Yeah, you can edit it and your changes should be reflected on the right side as well. Yeah, kind of instructive.

46:52 Yeah, you can just sit there and edit them. That's a really cool way to play with it. Right. You have stuff that will say take you to repl or whatever. There's all these pains like OK, what do I click to actually make this show up and where is it supposed to go? This is a really cool way to explore, I think.

47:08 Yeah.

47:08 Okay, so the thing I wanted to talk about was these templates. So there is some way to do little bits but it sounds to me more like it's a little bit this component model, like this little section, this card that we're going to put somewhere on the screen here's a little fragment of HTML. That is an expression that goes with it.

47:25 Yeah, that's right.

47:26 Yeah, very neat. The other one that's pretty nice is Markdown. You have nice support for just Markdown out of the box. So I think that's great.

47:37 There's hundreds of examples. Some people can go play with it but there's a couple of further different how Markdown gets applied and used. Let's see another thing you talked about, you told me to type like W button and hit and tab. So that's part of one of the code extensions or plugins depending on the editor you're using. So you have Vs code and you have PyCharm plugins that allow us to create things like if I got a form or something right, I could type like W form tab and it would go potentially create some kind of UI element instead of me having to do that right? Or if you want to get a scaffold up a starter application.

48:21 Yes, that's right. So we have VS Code Extension and PyCharm plugin which have the same features. And the features are one is called Snippet snippets or templates that allows you to streamline your typing a little bit so you don't need to think about how what are the possible attributes in the bottom. For example, you can just yes, there is a nice little demo so you can just type W underscore and your card name and it will basically give you all the code that is needed. And the second five is Autocomplete because most of the stuff in Wave is based on dictionaries which are dynamic in their nature. So there is not much that type system can infer. So we help with that a little bit as well.

49:17 Yeah, it's amazing how much those sort of focus templates are like. I'm here to create UI widgets. I'm telling you, this reminds me a lot of Flutter. I don't know if you've done anything with Flutter just a little bit but the sort of style of the way you create these sort of nested UI widgets and then the editor tools to build them it's really nice. I like it. Certainly if people are going to build real apps with this, they should be considering these extensions or plugins, right? Yeah, definitely, Phil B in the audience has an idea. It says less intelligent, more basic. This might provide an easy way to build a personal media streaming service on my Raspberry Pi and a remote control interface to control and view from my phone. What do you think? Can you build?

50:00 Go for it.

50:02 Cool. I'd say it sounds pretty possible.

50:05 Just a quick note that we are very interested in everything that our community does. So if you have some calls up, don't hesitate and bring it up.

50:15 You can go to our GitHub discussions and there we have a discussion dedicated to our community showcase.

50:24 Yeah, definitely. Good idea. A lot of things I want to ask you about, but we're going to run out of time. So let's talk about deployment.

50:33 So is this a thing I have to buy in order to use H2Owave? So suppose I have a virtual Linux server at Linode.

50:43 I want to run this there. Could I do it?

50:45 Definitely. Wave is 100% free of charge, so you can use it even for commercial projects. Our license permitted and you can deploy whatever you want. We even had some blog posts about deploying Wave apps on Heroku. And we plan to also add for, let's say AWS EC2 to Linode or whatever.

51:09 Yeah.

51:10 However, if you are enterprise, then part of our business model is that we basically provide a call solution for up deployment for you. So that's okay.

51:24 So if I have a team of data scientists and I don't want a dedicated H2O Wave DevOps person, I can just pay you all some sort of money and you'll set up some number of apps. How's the pricing work there?

51:38 I'm not sure because I'm not working on the club side of things. But just to give you maybe more, just to shed more light on our initial intentions. With Wave, we wanted to solve basically three problems. One was building nicely ice. Second was authentication out of the box because this is painful. And the third one was deployment because if you are a data scientist, you probably don't know much about it. Right?

52:06 Right.

52:06 So that's where our cloud platform comes to play, which allows you to easily deploy your vehicles using CLI. It's basically like Heroku simple.

52:17 So your business model is basically H2O wave is free, open source. People can deploy it what they want, but if they don't want to manage the running and upgrading and backups and all that, they can buy that as a service from you.

52:31 Exactly.

52:32 Yeah, that sounds fair. Is it hard to set up if I want to host it myself?

52:36 Not really. Basically the simplest thing that you need to do is just run, hit Wave run, and then your app.py that should basically run your application. You expose your correct ports and that's it.

52:52 I suppose I could put it behind NGINX successfully.

52:56 Got to do something special for the WebSocket aspect of it. I don't think so because I don't think so either.

53:02 Because you just need to expose the Wave server part. The Wave application part doesn't need to be exposed at all. And since Wave server is the one that handles that sockets, then it should work, right?

53:14 I think it just tells the browser, hey, we're upgrading the WebSockets, let's keep going. And it should go through NGINX, I would guess.

53:20 Okay.

53:20 That way, like, I could do, say, could do let's encrypt over and all that management stuff at the NGINX level.

53:27 Yes, exactly.

53:28 Yeah, this sounds good. The reason I ask is I know there's a bunch of data scientists who don't want to do that, but there's also people like me who are mostly programmers, but have a business with a bunch of dashboards that might be cool to build.

53:42 And I've already got eight servers and a bunch of stuff. I could easily host it on one of them. So for me, I could set it up and use it. I'm asking in an indirect but more broad sense. This is useful for people beyond just the traditional I want slightly more than Jupyter crowd, right?

53:58 Yes, exactly.

54:00 Even think that it might be useful for maybe people like you who are more of a software engineer. My boss likes to say that we would like to compete Django, although it's not really direct competition, let's say I would say because Django requires you to know HTML and CSS and JavaScript, whereas we don't. But at the people's side, we want to target also Python developers.

54:30 Sure. If you're doing pure HTML Django serves up, you can start bringing in designers and front end people.

54:39 There's a different kind of app that often gets built, but it can be built. But especially if you're talking about businesses, 80% of the apps that they actually build are just like forms over data. I need to see what's in the database, select a thing, filter thing, click, do something to it, and that's the entire app. Right. And it sounds like these wave apps might be a good fit for it doesn't have to look like Airbnb landing page. What it needs to do is show me this stuff and let people get to it quick and select them and make some actions real quickly. Right. Without spending weeks to do it.

55:16 Exactly.

55:17 Will it be good for them?

55:18 Definitely. We also have success stories related to that because we had some, let's say, product people with some engineering skills and data science skills. They needed some, let's say, small internal app that would allow them, for example, to bring people to give trial access to people to our platform. And this needed to be done by backend developers before because there was no infrastructure supporting it. So one of our product managers went ahead and build a web app that did exactly that listed all the pending trial users and allows you to basically give them access. That's it. Right. It's very small application, but it was built in no time, with tremendous value. Yeah.

56:10 And you have all the widgets you need. You've got buttons you can type in various things you sort of build up this interaction. Right. You've got dropdowns and search and make it happen type of buttons. Do you have a grid?

56:23 Yes, it's called Table, if you will search for it.

56:27 I'll do the table search. There you go.

56:30 Yeah. And basically this is one of the fundamental components for data scientists, right? Because you want to showcase your data set. This is like the perfect component for it.

56:41 Yeah. You can have little cool circular progress bars, which is those are really nice looking widgets. Yeah, very good. And then I guess you even have no, it wasn't paid, it was filtering. But yeah, very cool.

56:53 Yes. We support search, filter, sort even Pagination if you want, and have really a lot of data.

56:59 Yeah, we didn't even really get a chance to go through all the widgets. But you've got most things I can imagine you want to use to build an app. You've got a color picker, you've got choice groups, like a radio button. I'm assuming you've got images, you've got file upload. Do you have a video player?

57:20 Not yet. But it should land soon because we are working on video annotator component, which should basically be also usable as a video player.

57:31 OK. So you have a text annotator and this would be kind of the same thing and also an image annotator that's on the ML site where you say, here's the thing, I'm going to feed my model. Tell it that this is a person, that is a cat. Don't let it think the cat is a person or whatever. Right?

57:48 Yes, exactly.

57:49 Okay. Yeah. Cool. So you'll probably have a video player as a building block there, right? Yes, that sounds fun. Okay. Any other widgets you want to give a quick shout out to? I said that I mean, there's a whole host of plotting, I guess. Also you can integrate with things like altar and plotly and matplot lib. You don't have to stick with just your widgets.

58:07 Yes. And you can even go to overlay sections. And we have things like dialog sidebars, etc, notification bars, whatever you can think of. And if there is something that you'll need and is not there, you can always file a feature request.

58:23 Yes. And that will land on your desk or on your you'll think about it. Perfect. Well, it certainly looks like a capable platform and ability to take it and just go run with it and deploy it. Pretty excellent. And if people out there and they don't want to deploy it, then you have a business for them. Business offering.

58:41 Yes, that's right.

58:42 Yeah. Very cool. All right, really quickly because like I said, we're getting short on time. Two things. Let me pull up the actual app here. So you have themes right?

58:53 There's like five or six different ways in which your site can look and you can just apply a theme or you can create custom themes or if you want to go crazy, you can actually include custom CSS, right?

59:04 Yes. But you probably most likely don't want to do that. But if you want to, you are free to go.

59:12 Okay. Yeah. There's a way to create a UI widget that is a metahead element where you can say, include this JavaScript either off your server or off a CDN or CSS.

59:23 And also other questions. The other thing I want to touch on is JavaScript support.

59:27 Yes. So basically we support an arbitrary JavaScript as well. You just include your script as if you did in, let's say, Django or whatever, all these other server sites, frameworks, you are good to go. The example should be called inline script or script, whatever you wish.

59:48 There we go.

59:49 Yeah.

59:49 So what's interesting is there's a way to set up in JavaScript to push back into the Wave app and trigger that function to run with new arguments, right?

59:59 Yeah, exactly.

01:00:01 How you can basically reach the gap between JavaScript and Python.

01:00:05 You can send your data back to Python.

01:00:07 Yes. So you just say in JavaScript, you just say wave.emit and the event and then arguments basically, right?

01:00:15 Exactly.

01:00:15 Okay. It's always nice to have these escape hatches.

01:00:19 It's 85% of what I need. I just need a little bit something different here. And if I could just put two lines of JavaScript, I know I could get there. Or I need to style this just a little bit differently.

01:00:30 Exactly.

01:00:31 Cool. Alright, Martin, well, very cool project that you're working on here. Congrats on getting it out there. It looks like it's pretty popular. People are definitely digging it. And also I love the command k stuff that you have here on your home page where you can just instantly jump in and search around. That's pretty cool. But 3000 GitHub stars looks like a cool framework. Not exactly a direct head to head competitor. Django and Flask, but not that far off either, right?

01:01:02 Not yet, but let's hope that one.

01:01:04 Day give it a year or two. Okay, cool. I love it.

01:01:07 Yeah.

01:01:07 All right, now before we get out of here, I got the final two questions for you. If we're going to write some code, what editor do you use?

01:01:12 I prefer VS Code with the wonderful Vim extension. I cannot leave without it anymore. However, I do think that PyCharm has much better language support. I prefer a vehicle because I need to jump between multiple languages.

01:01:28 Cool, got it. And I'm sure that you run the Wave extension or plug in there as well, right?

01:01:35 Yes, of course.

01:01:36 And the notable PyPI package, something you find interesting or you want to recommend?

01:01:41 There are many, of course, but maybe one that I would like to give a shout out to is Playwright and basically End To End testing framework, something like Cypress. I found that it can be used for much more than just end to end testing. We use. It for visual regression testing. We use it for generating our imagery into documentation, and I have even done test using that as well. So it's pretty versatile, too.

01:02:15 It's like the new Selenium, sort of.

01:02:17 Exactly.

01:02:18 Yeah. I did interview Andy Knight three, four months ago about this playwright is really neat. If I had to do visual testing or testing where I kind of interact with the UI, definitely what I would pick these days.

01:02:30 Yes.

01:02:30 Excellent. All right, final call to action. People want to get started with Wave. What do they do?

01:02:36 Either go to our docs, which is a wave that h2o.ai, or they can turn the file on our GitHub repository and they will find their way there, I believe. And maybe just a quick note, we are participating in October 1. So if you feel like you would like to contribute to Open Source, then you are more than welcome.

01:02:58 Nice. Okay. I'm sure a lot of people are familiar with Hacktober Fest, but maybe some aren't. What's the story there?

01:03:05 So, basically, Hacktoberfest is a month long celebration of open Source, and it encourages people to contribute to Open Source. And if they do, for valid pull requests, then they might be eligible for swag or T shirts.

01:03:22 Cool. And it is October. Recording on October3. So awesome. Get out there and be part of it. That sounds fun. Well, Wave sounds like a really cool framework. We have so many choices, and I love that it takes advantage of some of these modern Python ideas, like async and await and whatever else you want to bring into it. So very cool work. Thanks for being on the show to share with us.

01:03:43 Thanks for having me, Michael.

01:03:44 Yeah, you bet. Bye.

01:03:45 Bye.

01:03:46 This has been another episode of Talk Python to me. Thank you to our sponsors. Be sure to check out what they're offering. It really helps support the show. Starting a business is hard. Microsoft for Startups Founders Hub provides all founders at any stage with free resources and connections to solve startup challenges. Apply for free today at Talkpython.FM/foundershub take some stress out of your life. Get notified immediately about errors and performance issues in your web or mobile applications with Sentry. Just visit Talk Python.FM/sentry and get started for free. And be sure to use the promo code 'Talkpythontome' all one word. Want you level up your Python. We have one of the largest catalogs of Python video courses over at Talk Python. Our content ranges from true beginners to deeply advanced topics like memory and Async. And best of all, there's not a subscription in sight. Check it out for yourself at training.talkpython.fm. Be sure to subscribe to the show, open your favorite podcast app and search for Python. We should be right at the top. You can also find the itunes feed at /itunes, the GooglePlay feed at /Play, and the Direct rss feed at /Rss on talkpython.FM.

01:04:58 We're livestreaming most of our recordings these days. If you want to be part of the show and have your comments featured on the air, be sure to subscribe to our YouTube channel at talkpython.com/YouTube. This is your host, Michael Kennedy. Thanks so much for listening. I really appreciate it. Now get out there and write some Python code.