#469: PuePy: Reactive frontend framework in Python Transcript

00:00 Python is one of the most popular languages of the current era.

00:03 It dominates data science.

00:05 It's an incredible choice for web development, and it's many people's first language.

00:10 But it's not super great for front-end programming, is it?

00:14 Frameworks like React, Vue, and other JavaScript frameworks rule the browsers,

00:19 and few other languages even get a chance to play there.

00:22 But with PyScript, which I've covered a couple times on this show, we have the possibility of Python on the front-end.

00:30 Yet PyScript is not really a front-end framework.

00:32 It's just a runtime in the browser.

00:34 That's why I'm excited to have Ken Kinder on the podcast to talk about his project, PewPy, a reactive front-end framework in Python.

00:43 This is Talk Python to Me, episode 469, recorded June 20th, 2024.

00:50 Are you ready for your host, please?

00:53 You're listening to Michael Kennedy on Talk Python to Me.

00:56 Live from Portland, Oregon, and this segment was made with Python.

01:00 Welcome to Talk Python to Me, a weekly podcast on Python.

01:07 This is your host, Michael Kennedy.

01:08 Follow me on Mastodon, where I'm @mkennedy, and follow the podcast using @talkpython,

01:13 both on fosstodon.org.

01:16 Keep up with the show and listen to over seven years of past episodes at talkpython.fm.

01:21 We've started streaming most of our episodes live on YouTube.

01:25 Subscribe to our YouTube channel over at talkpython.fm/youtube to get notified about upcoming shows and be part of that episode.

01:33 This episode is brought to you by Sentry.

01:35 Don't let those errors go unnoticed.

01:37 Use Sentry like we do here at Talk Python.

01:38 Sign up at talkpython.fm/sentry.

01:42 And it's brought to you by Code Comments, an original podcast from Red Hat.

01:46 This podcast covers stories from technologists who've been through tough tech transitions

01:51 and share how their teams survived the journey.

01:54 Episodes are available everywhere you listen to your podcasts and at talkpython.fm/code dash comments.

02:01 Hey, before we talk about PewPy, I have an announcement.

02:04 I'm sure that you know I have many online courses that you could take at Talk Python.

02:09 But before I went down this online courses path, I did years of in-person courses for software developers.

02:16 So it's back to these routes for my next event, but with a truly adventurous twist.

02:21 I'll be doing a six half day course on all sorts of modern Python topics

02:26 like FastAPI for building web apps and APIs.

02:30 And the amazing part is that the course will be held in a castle in Tuscany, Italy.

02:35 That's right.

02:36 It's code in a castle.

02:37 One half developer course and one half dream vacation.

02:41 We'll spend the mornings learning Python and the afternoon on excursions to amazing venues

02:46 and vineyards.

02:47 Places are super limited and I'd love to have you join me.

02:50 So check out talkpython.fm/castle and see what it's all about.

02:54 I hope you can join me for an adventure in Italy this fall.

02:58 Ken, welcome to Talk Python to me.

03:00 Right.

03:01 Good to be here.

03:01 Excellent to have you here.

03:03 It's a topic that's near and dear to my heart.

03:06 And I know for many people as well, building cool websites, but more Python, less JavaScript.

03:12 Not hating on JavaScript, but why do we need to learn a sixth language to work on websites?

03:16 There's already so many HTML, CSS, et cetera, et cetera.

03:19 In the world, we should be able to pick the language we like and build websites with it.

03:23 But somehow it's gotten itself into a place where you pick part of the language you like

03:27 and then the rest you do in JavaScript.

03:29 But we'll see how long that lasts.

03:30 Yeah.

03:31 Running Python in the browser has always kind of been a little dream of mine ever since

03:35 I first, well, ever since I first started programming in JavaScript.

03:38 But yeah, that's awesome.

03:39 We had traditionally things like mscripten and some of those transpilers, right?

03:45 Like Sculpt and others.

03:47 Sculpt, transcript, Brython.

03:49 Not Brython.

03:51 Not transpiler, but transpiler.

03:53 Brython.

03:54 And it does the same thing as PyScript.

03:56 It just runs the whole CPython in JavaScript, which is wild.

04:01 Yeah, it's super wild.

04:03 And I guess there's a requisite shout out to the birth and death of JavaScript talk, which

04:08 gives you a really good insight.

04:10 It seems like you've seen that talk as well.

04:12 No, but I have heard about it.

04:14 It's worth the 15 minutes.

04:15 It's both funny, but also very insightful.

04:17 All right.

04:18 So we're going to talk about a front-end framework that you've built that is Vue.js-like, but

04:26 runs on top of Python in the browser, which is awesome.

04:28 On the client side.

04:29 On the client side.

04:30 Which is awesome.

04:30 On the client side.

04:31 Very important.

04:32 Very, that's the big thing.

04:34 Before we get to that, though, you know, just tell people a bit about yourself.

04:36 Who's Ken?

04:38 Yeah, my name's Ken Kender.

04:39 I've been developing Python software for 24, 2025 years, something like that.

04:45 Ever since Red Hat's installer crashed and I saw the stack trace and opened up a file and

04:51 I could just read the code.

04:52 That was my introduction to Python and I never looked back.

04:55 Mostly I've been writing kind of line of business, software as a service kind of code, and I've

05:01 always wanted to kind of short circuit and bring it to the browser.

05:05 Yeah.

05:05 What are you using now for the line of business stuff?

05:08 Is that like Flask on the back end or is it Node on the back end or what are we talking

05:13 here?

05:13 At RealJob, it's all Python on the back end and then our front end is actually a Vue.js app

05:19 that I wrote originally and then some professional front end developers kind of took it over and

05:25 we wrote it.

05:27 Yeah.

05:27 Yeah, cool.

05:28 Now it has eight compilation steps.

05:29 Yes.

05:30 To prepare itself.

05:32 But I mean, it compiles into like semi-native apps for mobile and there's like a Chrome

05:39 extension involved.

05:40 So.

05:40 Okay.

05:41 You're doing a good job with it.

05:42 Yeah, that's awesome.

05:43 Look, there's a ton of websites built primarily with JavaScript and many of them are good,

05:48 some are more bad, but there's also plenty of bad websites written in Python.

05:52 But like I said, not hating on JavaScript so much as just saying, why does every programmer

05:57 in language have to reduce to JavaScript?

06:00 That seems like a weird situation.

06:01 There's other frameworks that are making progress here.

06:04 For example, Blazor in the .NET C# space is actually, I haven't done anything with it,

06:09 but it's a super interesting idea and it's not that different.

06:12 Yeah.

06:12 Not the only crazy person.

06:13 Blazor uses WebAssembly just like PyScript, which is what I built my stuff on top of.

06:19 And WebAssembly is about what it sounds like.

06:22 It's mature enough now that it's supported by all major modern browsers.

06:27 And since there is no JavaScript layer, really, I mean, there's some kind of JavaScript shims

06:34 involved.

06:34 You want to think of it that way.

06:36 But it's not like your Python code is being transpiled to JavaScript.

06:39 It's actual Python.

06:41 Right, right, right.

06:42 And we're going to talk about that.

06:43 It's super interesting.

06:43 There's interop in the sense that there's kind of like there's C interop in Python now back

06:50 into the JavaScript layer that you can have.

06:52 But that's not the same as this other language is interpreting.

06:55 It's running the interpreter, right?

06:57 So it's kind of natively as much as you get in the front end, natively there.

07:00 I kind of want to walk people through some of the technologies to get us started here.

07:05 So you've already given a shout out to PyScript.

07:08 We talked about Vue.

07:09 I think PyScript is the foundation.

07:11 Vue is maybe the motivation.

07:13 Let's start with PyScript.

07:14 Got their website pull up here.

07:16 And what I'm learning is that I can have a REPL on my homepage.

07:20 Actually, I know I can do more than that.

07:22 But that's sort of what they're demonstrating right now.

07:24 Yeah, you can do a lot more than that.

07:25 You have kind of two choices with PyScript.

07:27 You can run Pyodide, which is lower level, if you want to think of it that way, Python in the browser project.

07:35 And that is basically full CPython with some minor changes necessary.

07:42 But you get basically the whole standard library.

07:45 You can install packages from PyPy or PyPI, however you pronounce it.

07:51 And those download just as you download the website.

07:54 That's probably your best bet if you just want it through Python experience.

08:00 PyScript, though, also includes a MicroPython version.

08:04 And the MicroPython, if you're not familiar with it, it's mostly designed for microcontrollers or Raspberry Pi kind of environments where you have very limited resources.

08:15 Because it is so truncated relative to real Python, it downloads very nicely in the browser.

08:22 It's actually it plus PyScript ends up being smaller than a lot of JavaScript front-end frameworks.

08:29 Yeah, which is incredible.

08:30 And this is a huge thing that is unlocked, honestly, kind of the stuff that you're pursuing a much bigger scale, I think.

08:38 MicroPython is the name suggests.

08:40 And I've had Damien and others on to talk about MicroPython.

08:43 It's real micro.

08:45 Like this, I'll hold up a little device here, like this thing in my hand.

08:48 This little chip that is probably about the size of my thumb costs like 20 bucks.

08:53 And this runs full MicroPython, manages the DNS of my network and stuff like that,

08:59 like ad blockers and that little tiny thing.

09:02 But the restriction is, you know, how much storage does it have?

09:05 A couple of megs.

09:06 How much RAM does it have?

09:08 Probably similar.

09:09 I don't know.

09:09 The goal was to be a very small kernel of Python with MicroPython, not let you do Tkinter, pandas, etc., etc., etc.

09:20 And so PyScript choosing to support both of these means you can kind of take Pyodide and get full Python, in a sense, as much as you can.

09:28 Or you can do MicroPython and restrict yourself to a smaller set, but you get a much lighter weight experience, right?

09:35 Yeah.

09:35 If you've ever used transpiling, MicroPython is still a real big upgrade over that because you are getting almost all the Python syntax and most of the libraries that you're likely to use just rendering a website.

09:49 Right.

09:50 Okay.

09:50 So a lot of the standard library is still there, but maybe things like networking or whatever that don't make sense.

09:56 I wouldn't say a lot of it is.

09:57 Like, a good example is the regular expression module is there.

10:01 But when I first wrote the router for PewPy, the regular expressions that I was using weren't supported in the MicroPython version of that module.

10:09 And there's a limited, a limited regular expression.

10:12 You went too big on your regular expressions.

10:14 I did, yeah.

10:14 I see.

10:15 Okay.

10:15 Interesting.

10:16 Yeah, we'll talk about routing.

10:17 That'll be fun.

10:18 Okay.

10:18 So if somebody were to, which is why we're on the topic of these two, like if someone were to think about building a website, maybe internally for their company, would you suggest that they use Pyodide as the foundation or MicroPython?

10:31 Because you can pick when you run PyScript.

10:33 If it's for your company and it's an internal tool, probably most users downloading it are going to have plenty of bandwidth and normal machines.

10:42 So there's really no reason not to use Pyodide.

10:45 Yeah, sure.

10:45 You get better errors with it.

10:48 There's little things that'll just, you're used to coding, like data classes are missing from MicroPython, but you could use either.

10:54 Okay.

10:55 Yeah.

10:55 Let's see if it, if it'll show us how big is this thing.

10:58 It doesn't want to, I could just get this.

11:00 It's a jQuery terminal.

11:02 How about that?

11:02 If I click on the link in Pyodide, very cool.

11:05 But yeah, how big is maybe 10 megs?

11:08 Is that, would you say that's right?

11:09 Like I made a little example app for our purposes and I used Pyodide.

11:14 Now I am pulling in SQLite, which is part of it.

11:18 That adds some space.

11:19 One of the benefits though of using Pyodide is you can just grab a lot of the libraries and they'll work, right?

11:25 Yeah.

11:26 I don't know if it's PyScript doing it or Pyodide upstream, but they do make you say that you need certain libraries.

11:33 Sure.

11:34 And then they're available for import after you kind of declare them.

11:37 Right.

11:37 And when you initially set up the PyScript environment, there's a way where you kind of set the environment as it loads, right?

11:43 Yeah.

11:44 Yeah.

11:44 Okay.

11:44 You can do it at runtime too.

11:45 All right, cool.

11:46 So we've got PyScript, which lets us do Python in the browser, which is awesome.

11:52 And we've got these two foundations.

11:54 We've got Pyodide, which is great for its compatibility, I guess.

11:59 But PyScript, which if I was going to build a SaaS product where lots and lots of people were visiting kind of interactive bits, maybe you consider writing that in MicroPython because it's just less overhead for the world.

12:12 I don't know.

12:12 Depends.

12:13 I would especially consider MicroPython for a page that loads as a normal web page.

12:18 Yeah.

12:19 If it loads.

12:20 Yeah.

12:20 If it's a landing page sort of thing.

12:22 Yeah, absolutely.

12:23 Or even just if it's like one of the CRUD pages, like let's say that you have a traditional sort of Django app or whatever, where you've done server side routing and you only want interactivity on the edit page.

12:36 And for the view and the list, you're fine with normal templates.

12:39 You could just use MicroPython where you need it then.

12:42 But if you're building a single page app and you want everything downloaded up front, maybe that 10 megs is worth it.

12:49 Yeah.

12:50 Yeah.

12:50 Perhaps because you can put aggressive caching on it, put it over a CDN.

12:54 A lot of times when you pull it up, it'll say, you know, loaded from cache, things like that.

12:59 Right.

12:59 Yeah.

12:59 Let's see if I can, on PyScript, let's see what happens here.

13:03 If we go to the network and pull this in.

13:05 Oh, look at that.

13:05 They're using MicroPython there.

13:07 But yeah, all this stuff is coming out of disk cache.

13:09 Disk cache.

13:11 Seven milliseconds to pull that up.

13:13 Right.

13:13 So another thing I just saw looking at the PyScript source there is that it had a service worker.

13:17 And service workers kind of indicate maybe progressive web app, right?

13:21 See if I click on this.

13:23 But partially a progressive web app on PyScript.net.

13:26 I know you're a fan of these and it might be an interesting way to deploy.

13:29 You know, you talked about the internal apps, right?

13:32 Instead of just putting links, maybe you install it as a progressive web app, right?

13:35 Yeah.

13:35 I haven't made a progressive web app in PyScript yet, but there's others who have done it.

13:41 Yeah, I've done it.

13:42 And I have an example up where I don't think it runs anymore because PyScript's changed so much.

13:47 But I even got it to install as an app on the home screen of my iPad.

13:52 You click it, it launches.

13:54 It looks like a full-blown app.

13:56 Nobody would know the difference, but it's PyScript based.

13:59 Yeah.

14:00 I'll try to link the video about that in the show notes.

14:03 Yeah.

14:03 If you're running a SaaS, that's a really compelling option because then you also skip out on the

14:08 App Store review process.

14:10 Oh my gosh.

14:11 Forking over some of your brain.

14:12 If people see, you got to carve off a piece of your soul to get through App Store review.

14:16 It's not a fun, it's not a fun experience.

14:19 Let me tell you, I've been through the ringer four or five times, mostly in the Apple App Store,

14:24 but also in the Google App Store with our courses app and not fun.

14:28 So progressive web app, letting you skip that, 100% behind that idea.

14:33 This portion of Talk Python To Me is brought to you by Sentry.

14:37 Code breaks.

14:38 It's a fact of life.

14:39 With Sentry, you can fix it faster.

14:41 As I've told you all before, we use Sentry on many of our apps and APIs here at Talk Python.

14:47 I recently used Sentry to help me track down one of the weirdest bugs I've run into in a long

14:52 time.

14:53 Here's what happened.

14:54 When signing up for our mailing list, it would crash under a non-common execution pass, like

15:00 situations where someone was already subscribed or entered an invalid email address or something

15:05 like this.

15:05 The bizarre part was that our logging of that unusual condition itself was crashing.

15:11 How is it possible for our log to crash?

15:15 It's basically a glorified print statement.

15:17 Well, Sentry to the rescue.

15:19 I'm looking at the crash report right now, and I see way more information than you'd expect

15:24 to find in any log statement.

15:25 And because it's production, debuggers are out of the question.

15:29 I see the traceback, of course, but also the browser version, client OS, server OS, server

15:35 OS version, whether it's production or Q&A, the email and name of the person signing up.

15:40 That's the person who actually experienced the crash.

15:42 Dictionaries of data on the call stack and so much more.

15:45 What was the problem?

15:46 I initialized the logger with the string info for the level rather than the enumeration dot

15:53 info, which was an integer-based enum.

15:56 So the logging statement would crash, saying that I could not use less than or equal to

16:01 between strings and ints.

16:02 Crazy town.

16:04 But with Sentry, I captured it, fixed it, and I even helped the user who experienced that

16:10 crash.

16:10 Don't fly blind.

16:11 Fix code faster with Sentry.

16:13 Create your Sentry account now at talkpython.fm/sentry.

16:17 And if you sign up with the code TALKPYTHON, all capital, no spaces, it's good for two free

16:24 months of Sentry's business plan, which will give you up to 20 times as many monthly events

16:28 as well as other features.

16:29 That's PyScript, which is super awesome.

16:33 But let me just make a comment here to get your thoughts about this.

16:36 When I go to PyScript.net, I'm a big fan of this project, the people behind it.

16:40 But when I get here, what it shows me and what it encourages, what it basically communicates

16:46 to me, at least, is you, dear visitor, can have Python in your browser.

16:52 And so, for example, here's your REPL.

16:55 You know, you just type Python in the terminal, that thing that comes up, that redeveloped print

17:00 loop.

17:00 You just get the REPL.

17:01 And now I can type, like I could do X equals seven, Y equals two, X plus Y is nine.

17:07 Right?

17:08 That's interesting.

17:09 And it shows the power.

17:10 But as a web developer, I don't want to develop a REPL.

17:14 I want to develop web applications like input boxes and images and grids.

17:19 And if I interact with this, it changes that.

17:21 And so on.

17:22 Right?

17:22 Like I want a front-end UI experience with my Python in the browser, not just the equivalent

17:29 of the console in JavaScript, you know?

17:31 That's my desire, too.

17:33 Something I really like about Vue, React does this, but I don't have as much React experience,

17:38 is reactivity, where if the state of your page or your component changes, it redraws the UI

17:48 and patches the DOM, the elements in the browser, in real time, where you don't need to think

17:55 about, oh, let's say one state changed and that affects five widgets, so I need to go

18:01 redraw those five widgets.

18:02 It all just kind of happens automatically.

18:04 And there's nothing like that built into PyScript itself.

18:07 So PewPy kind of lives on top of PyScript and adds that layer and just other conveniences

18:14 that I would want.

18:15 Yeah, absolutely.

18:16 And event handlers, right?

18:18 As well.

18:19 Yeah.

18:19 So really a lot of neat stuff.

18:22 And that is very nice about Vue.

18:23 I like that as well.

18:24 The data binding and the reactivity, where you can just say, here's a dictionary.

18:28 I make changes to the values of that dictionary, that JSON object, and other parts of my UI

18:33 are using it.

18:34 Just also make those change.

18:36 Or if I bound it to an input and somebody starts typing, propagate that back to the rest

18:40 of the app, right?

18:41 Right.

18:41 And you've got reusable components.

18:43 So if you make the perfect foreign key lookup widget, you can just reuse it all over your

18:50 application.

18:50 And reusing it is really easy.

18:52 It just becomes a little HTML tag in view.

18:55 Kind of like web components, if you've used those.

18:57 But I think...

18:59 Those didn't really catch on that well, did they?

19:00 Compared to how...

19:01 I think they should have caught on better, maybe.

19:02 Oh, I think there's kind of a little movement behind them now.

19:05 Okay.

19:06 Maybe because people are so...

19:08 I mean, not to come down on any projects, but I think there's a desire to have more stable

19:15 development tools.

19:16 And all the JavaScript stuff changes one day to the next.

19:20 Like you go get a cup of coffee and then you need to upgrade all your node dependencies.

19:25 So with web components, like you really only need to upgrade the components you use.

19:31 And web components are how I see you using PewPy too.

19:35 Okay.

19:35 Very interesting.

19:36 So that brings us to PewPy.

19:39 The name is like Vue, but for Python, so Pew and then Py, right?

19:44 Is that where the origin is?

19:45 Am I getting this right?

19:46 That is the origin.

19:47 Awesome.

19:47 Okay.

19:48 So here I land on PewPy.dev and I see a red button with a minus and a green button with

19:53 a plus.

19:54 And I can just click on these and it does the reactivity and it does the changing.

19:57 There's no navigation, but there's not really directly much JavaScript, is there?

20:02 What is happening here?

20:03 Tell us about this project.

20:04 On your screen, if you have it pulled up, you'll see code directly below the counter.

20:09 And that is the code that is running the site you're seeing with just a little bit of

20:14 boilerplate that's missing.

20:15 And it sounds very, yeah, just a tiny, tiny bit.

20:17 It looks very familiar to a Vue.js app startup, right?

20:21 How you would get that?

20:22 Yeah.

20:23 Especially Vue 2.

20:24 I never upgraded to Vue 3 while I was working on Vue stuff before handing off my current

20:31 project.

20:31 You'll see that initial function defines state when the page loads.

20:36 Populate defines the layout and DOM elements.

20:41 And then there's two event handlers that update the state.

20:44 And as the state updates, the DOM is updated.

20:46 Yeah, awesome.

20:47 And it looks, yeah, you combined functions, Python functions as the event handler.

20:52 And you just say, go to the button and say onclick equals your Python function.

20:58 And then in that function, you say state bracket current value from the dictionary.

21:04 You can increment it like plus or minus it in this case.

21:06 And that reactivity propagates back to the text box or the span in there that shows that

21:12 information, right?

21:13 That's kind of the full lifecycle in a pretty simple little bit of code.

21:16 That's the snippet.

21:17 That's the basic video.

21:19 Yeah.

21:19 Let's see about the old network here.

21:22 What do we get?

21:23 If I pull this up, a couple of things that I think are interesting.

21:26 I pull up the network tools and I just pull up pewpie.dev.

21:29 The whole page, I don't know how far away this is.

21:32 Do you know where this is hosted?

21:32 It's on GitHub pages, so I can't tell you.

21:35 It's on the internet.

21:36 Okay, awesome.

21:36 All right.

21:37 So it loads in, because I was thinking about, well, it's the ping time and stuff.

21:40 So it loaded in 155 milliseconds and then it processed the DOM content in 144 milliseconds,

21:47 which is, that's good.

21:49 Like that's in a realm that people don't really perceive, right?

21:52 Not really.

21:52 And it looks like you're doing MicroPython here, which is, how big is our MicroPython?

21:59 It is 1.6 megs.

22:01 No, no, that's the age.

22:02 Sorry.

22:02 Where's the content length?

22:04 There it is.

22:04 188k.

22:05 189k.

22:07 That's pretty good.

22:08 There's some stuff that was downloaded that you'll also see over there, like, you know,

22:12 the PewPy wheel.

22:13 Yeah, sure.

22:14 The entering the file.

22:15 I mean, hold on to what you just said there.

22:17 The PewPy wheel was downloaded, okay?

22:20 So talk about that.

22:22 Like, this is not even the source, right?

22:24 This is the distribution.

22:26 I mean, I'm probably in there, it has the source, but.

22:28 Yeah.

22:29 I mean, a wheel file is just a zip file of the source.

22:32 Yeah.

22:32 It could have binary goodies in there as well, I suppose.

22:36 But this one's platform neutral.

22:37 So it's not likely.

22:38 But this is basically like taking something off PyPI and pip installing it.

22:43 But for your website, for your front end, you basically pip install it for it, right?

22:47 Yeah.

22:47 I would like to have it work that way.

22:50 But for MicroPython, you don't get the full pip.

22:53 Right, right, right.

22:54 MicroPython has a funky way of working with its dependencies.

22:57 I don't remember exactly how I got it working with this little thing, but it has three or

23:01 four dependencies, my little, my 32-bit little chip thing.

23:05 But I do remember that it was like, my intuition around pip wasn't quite working.

23:09 If you said, if you went to somebody, so we have an interactive web page and it's 189k,

23:14 plus a little bit, that's fine.

23:16 Right?

23:17 On a CDN, no one's going to have a problem with that amount of data.

23:20 Yeah.

23:21 I mean that.

23:21 Oh, and the other thing.

23:22 Absolutely competes with what a typical JavaScript framework would require.

23:26 Yeah.

23:27 And the other thing worth noting here is PewPy, its wheel comes from disk cache as well as

23:35 MicroPython WebAssembly.

23:37 So once I hit this, like for example, now looking at the processing times, it's 62 milliseconds

23:43 and 50 milliseconds.

23:44 All right.

23:45 That's ridiculous.

23:45 That's awesome.

23:46 So yeah, really good.

23:48 I don't know how fast your computer is, but I haven't been bothered by any of the performance

23:52 I've seen from PyScript.

23:54 Yeah, no, it's super fast.

23:55 So it's down to a point where, you know, there had been, there had been statements like, well,

23:59 it'd be cool if you could use something like Pyodide, but it's, it's just so slow.

24:04 It takes five seconds for the page to come up or whatever on the early days.

24:08 And you can't really assume that that's acceptable to people.

24:11 150 milliseconds, 60 milliseconds here and there.

24:15 Like that's blink of an eye type stuff.

24:17 You're, you're good to go with that, right?

24:18 Yeah.

24:18 I probably wouldn't use it for like a WebGL kind of stuff or anything that needs to be super

24:25 performant, but most business software is just fine with these.

24:28 And even, you know, like that is a runtime performance versus a app initialization performance

24:34 conversation, isn't it?

24:36 Yeah.

24:36 So let's talk a bit about that.

24:38 What is this good for?

24:39 And what is it bad for?

24:40 It's most good for, especially with, with MicroPython, those kinds of use cases where you have

24:46 business logic that is presentation relevant, like, like you have a form and what is shown

24:53 on the form depends on what's already entered.

24:55 You know, that's, that's the kind of stuff you would have done with jQuery back in the

24:59 day.

24:59 And you could do it very easily with PewPy.

25:01 You could do kind of basic CRUD work.

25:04 You could do data visualization.

25:05 And also just anytime that you want a full Python environment in the browser, obviously it's a

25:11 good choice.

25:12 It's probably not a great choice if you don't already know and love Python, because if you're

25:19 a JavaScript developer, why would you lose all the tooling?

25:22 If for that matter, if you like a lot of tooling, you know, there's no Chrome debugger for PyScript.

25:28 You just get your trace back.

25:30 You're not going to do it wrong.

25:31 Can you print?

25:32 Can you print a console?

25:33 You can print.

25:34 And normal Python statements go to console.

25:36 That's what you get.

25:37 You're good.

25:39 You know, you honestly, though, you probably could bring in some of these libraries.

25:42 Gosh, I can't remember.

25:43 There's a couple that are really nice that you can bring in and change the print statement,

25:48 or they'll do much richer output of like the state of an object.

25:52 They'll traverse the graph or they'll give better information about it.

25:55 So you might be able to get those print statements a little bit supercharged, but they're still

25:59 print statements, right?

25:59 Yeah.

26:00 I mean, hopefully one day you can run like a remote debugger into PyCharm or something too.

26:06 But yeah.

26:07 That would be cool.

26:08 We'll get the PyCharm folks on that and just connect to the front.

26:11 Look, they do a JavaScript.

26:12 Yeah.

26:12 Right.

26:13 So.

26:13 And also, you know, PyCharm supports remote debugging.

26:17 So.

26:18 Let's put them together.

26:19 Yeah.

26:20 All right.

26:21 So one of the things that does jump out at me when I see this here is the populate method.

26:27 So the way you create this interactive app that has the plus or minus increment or decrement

26:31 or things is you create a class called counter page, derives from page.

26:36 When it initializes itself, it has, it sets sort of the variables to their default values

26:42 and creates them.

26:42 You know, increment can change them, decrement can change them.

26:45 But then there's this populate method that says with some kind of DOM mill, like with div

26:51 with this class, with e.button as this text and its event hooks this.

26:56 So you're expressing the UI of that little section, not the whole page, but that little section

27:03 in Python code.

27:04 Want to tell us about how that goes?

27:05 Yeah.

27:06 So the kind of two approaches that you can have toward building a DOM, building not even

27:11 a DOM, but just any UI is like a templated language, which is usually real popular on the web.

27:17 And I have experimented with embedding Genja to templates and it works sort of iodide.

27:24 What I decided on is my preferred method is using context managers to specify nesting.

27:33 So in the example you're looking at, there's a div tag and then there's two buttons and

27:39 a span and they're nested in the div tag.

27:41 And the context manager tells the UI.

27:50 So every time you want to nest more elements, you use another with statement.

27:55 And that way you can use if statements, for loops, just normal Python code.

28:02 And the deeper you're into your context managers, the more nested you are.

28:07 So in this case, you say with div and then you create a button, a span and a button.

28:11 Basically, anything that gets created while within that context manager just goes to the children

28:16 of the thing that was put into the context, right?

28:19 Right.

28:19 Exactly.

28:19 And for that matter, you could also nest more PuePy components using that same.

28:25 Oh, interesting.

28:26 Okay.

28:27 And what does a PuePy component look like?

28:29 Is it just a class or is there like, how do we make one of the, or is it just a function

28:34 that also does context manager stuff?

28:36 What's the deal?

28:37 I do have some examples of them, but yeah, a component, a page is a component.

28:41 A component is any reusable chunk of code with that state and population that you can use and

28:49 reuse throughout your application.

28:51 This portion of Talk Python To Me is brought to you by Code Comments, an original podcast

28:56 from Red Hat.

28:57 You know, when you're working on a project and you leave behind a small comment in the

29:01 code, maybe you're hoping to help others learn what isn't clear at first.

29:05 Sometimes that Code Comment tells a story of a challenging journey to the current state of

29:11 the project.

29:11 Code Comments, the podcast, features technologists who've been through tough tech transitions and

29:18 they share how their teams survived that journey.

29:20 The host, Jamie Parker, is a Red Hatter and an experienced engineer.

29:24 In each episode, Jamie recounts the stories of technologists from across the industry who've

29:30 been on a journey implementing new technologies.

29:33 I recently listened to an episode about DevOps from the folks at Worldwide Technology.

29:37 The hardest challenge turned out to be getting buy-in on the new tech stack rather than using

29:43 that tech stack directly.

29:44 It's a message that we can all relate to, and I'm sure you can take some hard-won lessons

29:49 back to your own team.

29:50 Give Code Comments a listen.

29:52 Search for Code Comments in your podcast player or just use our link, talkpython.fm/code

29:58 dash comments.

29:59 The link is in your podcast player's show notes.

30:02 Thank you to Code Comments and Red Hat for supporting Talk Python to me.

30:07 See if I can find some examples.

30:09 You also can run those examples on PyScript.com, right in your browser.

30:14 Oh, that's right.

30:15 Yeah.

30:16 So, yeah, maybe tell people just about that capability.

30:19 I'll link to the tutorials there.

30:21 Yeah, I mean, PyScript.com is a really cool project, also from Anaconda, I believe, where it's kind

30:28 of like all those million JavaScript IDEs in your browser.

30:32 IDEs may be a strong word, but you can edit the code and then run it right in your browser.

30:37 And just like you can see, there's the list of files.

30:40 You can edit the files.

30:41 You can fork other people's work and edit them.

30:45 It's very convenient.

30:46 Nice.

30:46 Yeah.

30:47 So here you have a component defined with the decorator, called it a card.

30:51 And you've got three little UI cards on there.

30:53 And they have their populate thing that I guess you would expect.

30:56 Yeah.

30:56 Yeah.

30:57 And then you can just now create the cards as if you'd create any other DOM element, right?

31:01 Right.

31:01 Exactly.

31:01 And you're also seeing slots where there's a card header in the card body.

31:06 And so if you have a component where there's multiple, in Genja, these would be like template

31:13 inheritance.

31:14 If you have a component where you want to insert code from wherever you're using the component

31:20 into where the component renders, that's what slots do.

31:23 Again, a lot like Vue or Web Component.

31:26 So it sounds to me like if I had lots of Vue experience, but at one point I created some apps

31:31 with Vue, but it's been a while.

31:32 I'm sure the Vue doesn't look much like that anymore.

31:34 Yeah.

31:35 It changed a lot.

31:36 Yeah.

31:37 But if you had that experience, it would carry over to Pupy pretty well, right?

31:40 Yeah.

31:40 I would hope you wouldn't need that experience either, but yeah.

31:43 Sure.

31:43 Yeah.

31:43 You could just learn it from the Pupy perspective, but if you already knew it, like, hey, that's

31:48 kind of nice, right?

31:48 Yeah.

31:49 If you know React or Web Components, that also would probably carry over.

31:53 Sure.

31:54 Sure.

31:54 Sure.

31:54 Okay.

31:55 So one of the things that you talked about was a single page app, and I'm sure there's plenty

32:01 of people out there who know what a single page app is or a spa, but there's

32:05 probably a lot of people who are, I mean, from not a web developer areas that are like,

32:09 what is that again?

32:10 I want to talk about the router, but I think we need to talk about a single page app before

32:14 we can talk routers.

32:15 All right.

32:15 What is this?

32:16 You need a router to do it.

32:17 But a single page app is instead of having that request response cycle where the server

32:23 renders HTML, and then you go to a new page and the server renders the new HTML, and then

32:28 you go to another page and the server renders that.

32:31 A single page app works where it loads the page, and then when you click on a button or click on a link, the software in the client in your browser re-renders the page based on the link you clicked without ever talking to the server.

32:46 Or if it does talk to the server, it's just kind of an API call to figure out what data it wants to render on the page.

32:53 But the page itself and the structure is not done through server calls.

32:56 It's not done through redrawing the page or navigating.

32:59 Even though sometimes you'll see the URL change, it might not actually go anywhere, right?

33:05 That might just be something so you kind of know where it is, so you can bookmark and deep link into it, but it doesn't actually make the browser go, right?

33:12 Yeah, that's the gist.

33:13 I mean, one telltale sign of kind of an older SPA is if all the URLs, like if it's index.html or something, but then the meat of the URL is after the hash.

33:24 So it's, you know, example.com slash and then a hash, and then the hash tells you everything about the URL.

33:31 Right.

33:31 That's a telltale sign that it's an SPA, an older one that used for that.

33:36 Okay.

33:36 Because then the client is looking at what's after the hash and deciding what it wants to render.

33:41 And by client, I mean the website.

33:43 View or PuePy or whatever the front-end framework is, is figuring that out.

33:48 So in order to do that, in order to make these faux URLs or whatever you call them, actually kind of take you from place to place and navigate and redraw the page, you need something like the URL structure that would be built in Django or Flask or other things.

34:02 And that's called a router, right?

34:04 Right.

34:04 And you guys have a router, right?

34:06 So that's pretty awesome.

34:07 There is a router.

34:08 It's not as powerful as one in Flask or Django, but it gets the job done.

34:12 Mm-hmm.

34:13 Okay.

34:13 Let's see.

34:14 Here we go.

34:15 Router.

34:15 There's a bunch of really nice tutorial walkthrough.

34:18 I went through most of these up to basically here, more or less, earlier today.

34:24 And yeah, tell us about how you set up this router and how this works.

34:28 You have a link component.

34:29 That's probably not real interesting.

34:31 But if you scroll down, when you define pages, there it is.

34:35 App.page is a decorator.

34:37 That's how you're telling PuePy that you've made a page.

34:40 And the default page is the one that renders if there is no route.

34:44 But you'll also see above it, pet page, where just like with Flask, the URL is in the decorator.

34:50 So it's saying if you go to pet and then there's a pet ID, use that class to render the page.

34:55 And I can put that whole URL without the hash in there and it'll find it.

35:00 So I could just say my server slash pet slash dog or whatever the thing's ID is, then it'll invoke the router instead of the browser?

35:08 Well, there's two routing options.

35:10 One is that hash I mentioned.

35:11 And that's easiest to set up because you don't then require any changes on the server.

35:18 If you have a server you want, like if you have a Django project, let's say, and you want a single page app,

35:24 how that has to work is whenever the browser opens a URL, Django, if it's a URL for the single page app,

35:32 needs to return the single page app and not try to process the URL on server side.

35:37 So there's some tricks to doing that.

35:39 I think there's actually a couple Django packages now that do that.

35:43 But you're essentially just putting a wild card up.

35:45 So maybe example.com slash app and then anything after that URL renders the exact same page as if it were indexed on HTML.

35:54 I see.

35:54 Which would you recommend, the hash or the server hack?

35:58 Well, the hash doesn't require any server hack, so that's convenient.

36:01 But yeah, it probably doesn't require any server communications either, right?

36:05 No, it doesn't require you.

36:07 Not directly.

36:07 I mean, you can just have a static HTML website that works fine doing that.

36:12 If you want cleaner URLs, you want to use what's called HTML5 history mode.

36:18 And that's where there's an API you can hook into on the browser and navigate around.

36:24 And it'll look exactly like a normal website where you're changing the URL, but the page isn't actually reloading.

36:32 Then when you reload, you need that server hack to make sure it always serves the same page.

36:38 Got it.

36:38 So in effect, that would be what's sometimes called deep linking, right?

36:43 Where it doesn't just load up the front page of the spa and you click around and get back.

36:47 But if you were on this page with these details and that's contained in the URL, you could bookmark it and come back and it should come back to that setup, right?

36:55 Yeah.

36:55 I mean, you have to test that to make sure you did it right.

36:58 Yeah, of course.

37:00 You browse around the site and it all seems fine.

37:03 And then you come back and reload later and you get a 404 because you haven't configured your server to always go to the spa.

37:09 Okay.

37:10 Interesting.

37:11 What about working with external data and from the front end, that usually means APIs, something like that, right?

37:19 Can I use some of our standard code that we would for HTTPX or requests or things along those lines to call out?

37:28 Or how do I call out from this?

37:30 Networking is where it gets a little messy because the browser doesn't let you just have untrammeled access to open whatever sockets you want.

37:38 You have to work within either web sockets or requests.

37:42 And the best way to do that is using PyScript's fetch function.

37:46 That wraps the browser fetch, which is the new XML HTTP request.

37:53 Guys, so basically you kind of do an AJAX thing in the browser and then pick it back up from there.

38:00 Maybe you get some JSON back, but then you could maybe use the JSON module to process it or...

38:05 AJAX or web sockets are basically your choices.

38:08 Okay.

38:09 In the PyPI library example, you have beautiful soup 4 for parsing data.

38:14 The example that you run, you can run it and it'll show you...

38:18 Actually, that's a pretty interesting example.

38:20 Maybe it's worth giving a shout out to is...

38:22 I think it's this one perhaps is to go and refresh your thing.

38:29 It will actually go and you can give it some part of HTML, some HTML.

38:34 Like, I don't know.

38:35 I'll just make up some...

38:36 See how forgiving this is.

38:38 So you give it any HTML, some basic page data that you have.

38:41 And in here, when you run this, it'll use beautiful soup to parse it.

38:45 And then the output at the bottom is that populate thing.

38:51 So it'll basically recreate that DOM structure, take an HTML file or HTML content and convert it to the component style of PewPy, right?

39:01 Yeah.

39:01 I kind of made that as a utility because I might go have some HTML that I really want to render that is going to be part of my web app.

39:10 And rather than going line by line and trying to figure out how to generate that programmatically in Python, you can paste it into here and get your Python back.

39:19 Does it even do classes?

39:21 Yeah.

39:21 So it knows all about the attributes.

39:24 Yeah, it sure does.

39:24 That's pretty awesome.

39:25 So maybe you could do something like write out an important chunk of HTML with all the tooling of PyCharm or VS Code or whatever.

39:33 Copy, paste.

39:35 And then get it here, right?

39:36 Is that like an accelerated way to generate the first bit of structure and then just tweak it from here?

39:40 Maybe you don't like writing HTML or don't know how to and you ask ChatGPT to write some for you and then you copy and paste it into here and see how it works.

39:50 Yeah, that's a totally reasonable thing.

39:52 ChatGPT is pretty good at writing HTML.

39:54 It does make up stuff.

39:56 If you say use this framework or that framework like Bootstrap or Tailwind or something, but it'll still get you pretty close.

40:01 Yeah, it's decent.

40:02 I've used it before.

40:03 It was pretty excellent.

40:04 Let's see.

40:05 What?

40:06 Let me rerun this whole thing here.

40:08 What other things you want to give a shout out to?

40:11 I guess maybe the refs concept here is worth talking about because this is an interesting challenge that people could run into.

40:19 Yeah, this is a problem that would happen in Vue as well.

40:24 As that state changes, as your application state changes, that populate function that defines your DOM runs on every single state change.

40:34 Unless you can override that.

40:36 Maybe there's a state that isn't important and you can turn that off.

40:40 But that's the default.

40:41 And so what that means is every time that you have a state change, the DOM could be different.

40:47 And if the DOM is different and it patches the DOM, that means that the browser might have, let's say you're typing in an input element and the input element moves.

40:58 You would lose focus on that element.

41:01 And that's the example that you see in this demo.

41:04 So if you give it a ref, that does two things.

41:08 One, it identifies within that component.

41:11 It's kind of like an ID, but it's local to the component.

41:14 It's not a document-wide ID.

41:16 It identifies it so that when it comes time to patch, it will reuse that HTML tag, that element in the DOM, and only update the attributes on it and the elements around it.

41:30 So you get ultimately a smoother browser experience because it's being a little more intelligent about how it wants to patch the DOM.

41:39 Right. So in your example, there's an input, and as you start typing into it with the naive, straightforward way, the thing reruns, but it regenerates the DOM in a way that completely blasts away that text input.

41:52 Right.

41:52 It puts it back, but as you type, now all of a sudden it goes click, click, click, or beep, beep, beep, because it's no longer focused on there because that's not actually the same text box.

42:01 It's a new one with the same value, right?

42:03 Right.

42:03 And so in order to say, no, this thing is permanent, leave it here, don't recreate it for whatever reason, maybe you could use that for performance, right?

42:10 If you had like a big grid that didn't change or something.

42:12 Yeah, it would probably help with performance.

42:14 You also can use it to just reference those components elsewhere in your code.

42:20 Like if you have an event handler and you want to get at a DOM element that's rendered, you can reference self.refs, use the reference as a dictionary key, and that gets you the component.

42:31 Yeah, sure.

42:32 All right, so I really recommend that people come check out this tutorial.

42:35 It's got a bunch of neat pieces and not just necessarily jumping in here into the iScript runner, but on the documentation, which is somewhere.

42:45 I found it somewhere.

42:46 There you go.

42:47 There's actually like a really nice walkthrough.

42:50 Like you start here, you click, take me to the next one, see that example run, right?

42:54 At docs.pupy.dev, walk through the tutorial.

42:57 That's really quite nice there.

42:58 Thanks.

42:59 I hope it's nice.

43:00 I mean, send me any feedback because it's hard to write a tutorial for something you made yourself and understand pretty well.

43:07 Yeah, that's a good point, right?

43:08 Because you know how it's supposed to look.

43:11 Yeah, it's hard to evacuate that assumed knowledge from your context.

43:17 Yeah, yeah, yeah, exactly.

43:18 Okay, so this looks like a pretty well-polished framework.

43:23 It's still at its super, super early stages.

43:26 So I guess a couple questions.

43:29 One, contributors, PRs welcome.

43:32 What's the thoughts there?

43:33 Yeah, absolutely.

43:34 That's why it's on GitHub.

43:35 Yeah, yeah.

43:36 And if people want to try to build with it, you know, they can give it a try and maybe they'll discover an issue and put it on the GitHub repo or something like that.

43:43 Yeah, it'd be cool.

43:43 And then sort of towards that end, what is its readiness for use?

43:49 If somebody said, I want to be all in on Python, I think PyScript's awesome.

43:53 What's the stability look like?

43:54 Where would you classify it?

43:56 Is it an experimental stage?

43:58 Is it a beta?

43:58 What is it?

43:59 If you're someone who is comfortable using a relatively new project that has one contributor of GitHub, I think you know who you are.

44:07 If you took this and you try to bring it to like a review board of a Fortune 500 company, I don't think they would go for it.

44:14 But then again, a lot of things kind of get smuggled in.

44:18 They might, they can always fork it.

44:19 Exactly.

44:20 That's what I was going to say.

44:21 That's why they might, because while there's not a huge team behind it, they could fork it and say, look, this is important enough for us that we'll like take it over effectively if we have to.

44:30 It's also just not that much code.

44:33 Yeah.

44:33 I mean, I've been kind of working on it on and off in my free time for like six months, but the volume of code, I mean, I don't know how many lines there are off the top of my head, but there's like four main files.

44:45 They're relatively straightforward.

44:47 Most of the heavy lifting is with PyScript.

44:49 Yeah.

44:50 In terms of stability and breaking, like it promised that I won't break anything, but I think it's pretty deliberately laid out.

44:58 And like I said, one complaint I have about the node JS world is how aggressively everything gets broken every six months.

45:06 So I have some PTSD from that and I'm not looking to recreate it myself.

45:11 Yeah.

45:11 No more left pad.

45:12 That's not even the problem.

45:14 The problem is just that it's the constant change.

45:16 This version changes.

45:18 And it also happens in CSS frameworks like, oh, we've got bootstrap six.

45:22 And I know five was awesome.

45:24 You wrote a bunch of stuff in it, but we're completely redoing it because it's better now.

45:27 It's like it would be even better if it's if I didn't have to start over or get pinned in the past or whatever, you know?

45:33 And yeah, if you're living in that world, like it's fine because you get up every day and you eat, breathe and sleep.

45:42 Everything in your world is this node front end framework and it's your full time job.

45:47 You can keep up with it.

45:49 But if you're like me and it's just something you did and then six months later you need to revisit it, it's too much.

45:55 Yeah.

45:56 Yeah.

45:56 Well said.

45:56 Okay.

45:57 Last QPy question.

45:59 Where are you going from here?

46:02 Like what do you got next in mind?

46:04 The testing is basically just Python unit tests.

46:07 I'm not really, I don't have any automated testing for how it behaves in different browsers.

46:13 It's fine.

46:14 It's code runs the same in all browsers.

46:15 Don't worry about it.

46:16 Well, I mean, it might with PyStream.

46:19 But I know it's getting better.

46:20 It used to be really bad, but like I'm just now dealing with an issue like this video will play back on every single browser except this particular one on this particular OS.

46:29 Like, great.

46:30 Right.

46:30 Okay.

46:30 You know, it's that kind of stuff, right?

46:32 Can't solve that kind of stuff for you.

46:34 The actual Python language is going to be the same.

46:37 Maybe not the JavaScript APIs you import.

46:40 Yeah.

46:40 Well, to a large degree, you're basically built upon the stability or lack thereof of MicroPython, which has been pretty stable.

46:48 Yeah.

46:48 MicroPython's great.

46:49 Pyodide's great.

46:50 Yeah.

46:51 I would like to get some playwright tests to actually do proper end-to-end testing instead of just unit tests.

46:57 I think probably some direct support for progressive web apps would be helpful.

47:03 Helpful for everyone.

47:05 I would like to have some kind of example on how to hook it up to like a Django or Flask backend.

47:11 No, that's not usually in scope for a fun-end framework, but I kind of like the batteries included approach to development.

47:18 Sure.

47:19 You know, you talked about the progressive web apps, and I think they're great.

47:22 I think it'd be like I've already said, I think it's completely possible to do with PyScript because I've done it on iOS.

47:29 But it is great.

47:30 The challenge with progressive web apps is the how do I get it in my dock?

47:35 How do I install this thing like for real in a discoverable way?

47:38 You know, I can come over on some of these things.

47:41 I can like right-click on it and say, for example, if I right-click on a GitHub page, I can install GitHub, which means it will install as a progressive web app.

47:51 But if I go to PyScript and right-click, it'll say create shortcut, which if I say open as a window kind of looks like it, but it's not.

47:57 And just like that's not an end user experience, right?

48:02 That's a dev user experience, I think.

48:04 Yeah.

48:05 That's not for you to solve.

48:06 I mean, that's a problem with progressive web apps globally.

48:09 That's nothing to do with your project.

48:11 But it would be nice if there was like a really nice way to click this.

48:14 Here's how it goes in your dock or your taskbar.

48:16 And like.

48:16 Yeah.

48:16 I think the problem that they're butting up against is that the people who make browsers are keenly aware of how spammy websites get.

48:25 So they don't want to have it be where you visit like a, you know, a newspaper and the newspaper prompts you to install the newspaper.

48:33 So having that easily self-documenting install process is not there for the desktop.

48:40 You have to actually go click add shortcut and then it works.

48:42 Right.

48:43 Right.

48:43 The Safari folks.

48:45 I've been, I talked Apple down a little bit from their really horrible app store review experiences they put on people.

48:52 But the Safari browser, which I don't generally use, but they've got a really nice install this, you know, go to file, add to dock.

49:01 And then that experience, the lifecycle of using that app once you've done it is real nice.

49:05 So, I mean, add to dock is I want this app as an applicant thing where my other apps are.

49:11 That's pretty good.

49:12 Yeah.

49:12 I've like I've installed Google's old chat app, which I still use as a progressive web app using Safari on my desktop.

49:20 And it's great.

49:21 It's it's just like another application that I've downloaded and installed in it.

49:25 It's Safari, which is fine.

49:27 Yeah.

49:27 As long as it stays in its little container and doesn't infect my Vivaldi experience.

49:32 I have Proton Drive, Gmail, Google Contacts, Google Calendar, some of the e-commerce stuff that I have to do.

49:40 I've got the analytics, my email newsletter app.

49:44 I've got YouTube, YouTube Music.

49:46 All those things are all installed that way these days for me.

49:49 And it's really, really nice.

49:50 It beats having all those Electron apps running.

49:52 It does.

49:52 However, I don't see any reason why this stuff wouldn't work for Electron as well.

49:57 Right.

49:58 You can ship your Electron app with a HTML page and then you can just put this PyScript and PewPy as part of your HTML.

50:05 And it should it's on the client side.

50:07 It should just run in Chrome just fine.

50:09 It should.

50:10 You know, I don't know what the process for that would be.

50:12 The developer in me says make it a PWA.

50:14 But I'm I'm sure there's some business cases for making it a .app file.

50:19 It feels more real.

50:21 Maybe data storage, maybe access to OS features.

50:25 I know it's that's getting better, but it's running natively on the machine.

50:28 You can do whatever you need to do.

50:30 So possibly.

50:31 That's true.

50:32 That might get a little messy in terms of importing those features once in JavaScript and then from JavaScript into PewPy.

50:41 Yeah, you might have to have a multi-layer interop type thing that's a little bit funky, but.

50:46 Yeah.

50:47 My suspicion is that most people making Electron apps have a team that does front end work.

50:54 And probably that front end work is going to be in JavaScript.

50:57 Right.

50:58 Yeah, probably some framework there.

51:00 All right.

51:00 Awesome.

51:02 So I think PewPy has got a lot of potential.

51:04 That's why I invited you on the show to talk about it because it's it's very interesting.

51:08 And honestly, it's this kind of stuff I would love to see when I visit PyScript and not a REPL because, right, that's not what most people do.

51:15 I know it's PyScript's a little more data science focused, but even for them, they more have a notebook experience generally.

51:21 All right.

51:22 I do have a question, though.

51:23 So I noticed when I was going through the documentation here for your PewPy docs that it says powered by JetBrains right side, writer side.

51:32 Tell me about that.

51:32 I have not used this, but it's like a new IDE for recruiting documentation and testing and stuff.

51:38 Like, what do you think about this?

51:39 Now you've got to play with it a little.

51:40 Well, you're basically just calling out laziness on my behalf because all the real Python projects are using something awesome like Sphinx.

51:49 And I have the JetBrains all products license.

51:52 So I just saw that and tried downloading it.

51:56 It works well.

51:57 There's zero setup.

51:58 You just open it up and start typing in Markdown.

52:01 It's clean and polished.

52:03 If you have a JetBrains license, you might as well try it out.

52:07 But I expect that if people start contributing to the documentation, I'll need to switch to something more community oriented.

52:15 Potentially.

52:15 I can't remember.

52:16 I feel like writer side might integrate with some of those frameworks like Sphinx.

52:20 But I'm asking about all this because I've not used it at all.

52:23 So I don't really know.

52:24 It's kind of its own framework.

52:26 It supports Markdown, but it has its own little kind of HTML-ish thing for making tabs and glossaries and all that.

52:34 Yeah, excellent.

52:35 Excellent.

52:35 Okay.

52:36 And then I guess anything else you want to give a shout out to or talk about on the PuePy side of things when we wrap up our show?

52:44 I would kind of like to give a shout out just to the PyScript people.

52:47 I've gotten stuck a few times and headed over to their Discord server and they're always really friendly.

52:54 They run little meetups kind of on Zoom with the community.

52:58 And they've been great.

53:00 I wouldn't have been able to do this without their help.

53:02 Yeah, awesome.

53:03 They have been helpful for me as well.

53:05 All right.

53:05 And then notable IPI project library?

53:09 Completely unrelated.

53:11 But there is a project called PGQer.

53:16 There you have it pulled up on GitHub.

53:18 And if you want something kind of like Celery, but you don't want to have to install Celery and install a broker and figure out your Celery installation and make maybe even another Docker container for your workers, this is great.

53:33 It uses some Postgres.

53:38 You don't want to have a simple task queue.

53:42 I've tried it.

53:43 It works great.

53:44 You can probably Celery is still, you know, quote unquote, better for complex needs.

53:50 But if you just want something simple, this is great.

53:52 Yeah, it's cool.

53:52 I mean, the truth is most of us have not complex needs, simple needs.

53:56 And then bringing that kind of stuff in just makes it way more complicated from a DevOps perspective, right?

54:02 Like, I'm already talking to a database.

54:03 I'm already talking to Postgres.

54:04 What if I could just use it?

54:06 There's a lot to learn with Celery.

54:08 Like, it's a whole project unto itself.

54:10 Sure.

54:11 Yeah, over at Talk Python, I've got a MongoQer equivalent.

54:15 That is, you know, because you scale out the worker processes, right?

54:19 So it's not enough to just have them running.

54:21 You want a little more durability in case for some reason, like the server restarts, but there's still work to be done.

54:26 You just come back and look.

54:28 Oh, look, there's some unprocessed work in the database.

54:30 Let's do that.

54:31 It's nice.

54:32 It's not quite as nice as this, I think.

54:34 But, I mean, suppose if it said send an email and it, like, had sent the email, but it hadn't acknowledged it sent the email yet, and you restart the server at that very moment, the person's probably getting a second email.

54:45 You know what I mean?

54:45 But there's a really, really small chance of these types of things.

54:49 It's much more common to, like, you know, re-index these things or whatever.

54:53 I think, actually, with PGQer, because it's Postgres, you would get strong consistency.

55:00 So the chance of that duplicate email would be low.

55:03 Well, but imagine this, like, if you do a transaction and you go to, like, start, let's say, like, I'm going to move the work into running.

55:10 And then if you shut it down, that transaction's going to roll back and it'll probably go back to ready to run.

55:15 I mean, I don't know how you deal with it.

55:17 I mean, it almost comes back to the poison message thing of, like, celery and message queues, which is really very tricky.

55:23 Like, sending an email, the thing is, you can't put that in your transaction.

55:27 Yeah, exactly.

55:28 You can't unset.

55:29 Well, a few things have tried to recall email, but as in general, email doesn't support rollback.

55:34 No, it might be a good feature for, like, SendGrid to consider.

55:37 Yeah, it would be very cool.

55:38 One thing you can kind of do in those situations, if you happen to have, like, Redis or something available, is if you, the content of the email is going to be exactly the same.

55:48 So if you just hash the email to, identify it somehow, a combination of the email content and who it's for, and then you get a hash of that, then you can have a little Redis key.

56:00 And if that Redis key is set, email has been sent and you can discard the task.

56:04 Yeah, yeah.

56:05 You just put that right next to where you've actually sent the email.

56:08 And the chance that it's going to crash in between those two is pretty low.

56:11 It's extremely low.

56:12 Yeah, exactly.

56:13 So things like this, things like that solution you talked about, while not bank-level bulletproof, most of us don't want to suffer through that level of durability, right?

56:22 So very cool project.

56:23 Yeah, I like it.

56:24 Awesome.

56:25 All right, Ken, final call to action.

56:26 People are like, oh my gosh, front-end Python, what do they do?

56:31 Well, I don't want to oversell it as solving all your problems, but if you want to check it out, PewPy might need spelling out.

56:37 It's P-U-E-P-Y.dev.

56:41 Excellent.

56:43 And love the initiative.

56:44 Happy to shine a light on the project.

56:46 Would like to see it grow.

56:47 Awesome.

56:47 Thanks for having me on.

56:49 Yeah, thanks for being on the show.

56:50 Bye.

56:50 Bye.

56:51 This has been another episode of Talk Python to Me.

56:55 Thank you to our sponsors.

56:57 Be sure to check out what they're offering.

56:58 It really helps support the show.

57:00 Take some stress out of your life.

57:02 Get notified immediately about errors and performance issues in your web or mobile applications with Sentry.

57:08 Just visit talkpython.fm/sentry and get started for free.

57:13 And be sure to use the promo code Talk Python, all one word.

57:17 Code Comments, an original podcast from Red Hat.

57:20 This podcast covers stories from technologists who've been through tough tech transitions and share how their teams survived the journey.

57:29 Episodes are available everywhere you listen to your podcasts and at talkpython.fm/code dash comments.

57:35 Want to level up your Python?

57:37 We have one of the largest catalogs of Python video courses over at Talk Python.

57:41 Our content ranges from true beginners to deeply advanced topics like memory and async.

57:46 And best of all, there's not a subscription in sight.

57:48 Check it out for yourself at training.talkpython.fm.

57:51 Be sure to subscribe to the show.

57:53 Open your favorite podcast app and search for Python.

57:56 We should be right at the top.

57:57 You can also find the iTunes feed at /itunes, the Google Play feed at /play, and the direct RSS feed at /rss on talkpython.fm.

58:07 We're live streaming most of our recordings these days.

58:10 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.fm/youtube.

58:18 This is your host, Michael Kennedy.

58:20 Thanks so much for listening.

58:21 I really appreciate it.

58:22 Now get out there and write some Python code.

58:24 I'll see you next time.