#483: Reflex Framework: Frontend, Backend, Pure Python Transcript

00:00 Let's say you want to create a web app and you know Python really well. Your first thought might

00:03 be Flask or Django or even FastAPI. All good choices, but there's a lot to get a full web

00:09 app into production. The framework we'll talk about today, Reflex, allows you to write just

00:14 Python code and it turns it into a full web app running FastAPI, Next.js, React, and more,

00:19 plus it handles the deployment for you. It's a cool idea. Let's talk to Elvis Kahoro and

00:25 Nikhil Rao from Reflex.dev. This is Talk Python to Me, episode 483, recorded October 24th, 2024.

00:33 Are you ready for your host, please? You're listening to Michael Kennedy on Talk Python to Me.

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

00:43 Welcome to Talk Python to Me, a weekly podcast on Python. This is your host, Michael Kennedy.

00:51 Follow me on Mastodon, where I'm @mkennedy, and follow the podcast using at Talk Python,

00:56 both accounts over at fosstodon.org, and keep up with the show and listen to over nine years of

01:02 episodes at talkpython.fm. If you want to be part of our live episodes, you can find the live streams

01:08 over on YouTube. Subscribe to our YouTube channel over at talkpython.fm/youtube and get notified

01:14 about upcoming shows. This episode is sponsored by Posit Connect from the makers of Shiny. Publish,

01:20 share, and deploy all of your data projects that you're creating using Python. Streamlit, Dash,

01:25 Shiny, Bokeh, FastAPI, Flask, Quarto, Reports, Dashboards, and APIs. Posit Connect supports all of

01:33 them. Try Posit Connect for free by going to talkpython.fm/Posit, P-O-S-I-T.

01:38 And this episode is brought to you by Bluehost. Do you need a website fast? Get Bluehost. Their AI

01:45 builds your WordPress site in minutes, and their built-in tools optimize your growth. Don't wait.

01:50 Visit talkpython.fm/Bluehost to get started. Nikhil, Elvis, welcome to Talk Python.

01:57 Hey, it's great to be here.

01:58 Yeah, it's awesome to have you here. You're building some cool products, and Nikhil, you're back on the

02:04 show. We spoke to you back in Salt Lake City at Startup Row, and now your startup is more started,

02:13 and I'm really excited to hear about it, and that's what we're mostly going to focus on this episode,

02:18 talking about building Python web apps. You know, normally when you say something like that,

02:22 a person who is not a web developer would go, oh, you're building apps with Python, web apps with

02:28 Python. That's cool. A web developer would be like, okay, what is that? That's Python, CSS,

02:32 HTML, JavaScript, React, et cetera, SQL. There's a lot going on normally, but we can winnow it down

02:40 a little bit and have a little more focus. When we say Python web apps, it's a little more like that,

02:45 right?

02:45 Yeah, definitely. And I think a lot of people, when they hear Python web apps, they think of,

02:50 you know, Django, Flask. Like these are, they call themselves Python web frameworks,

02:53 and they're really great frameworks. But like you mentioned, there's a lot of things that go into

02:57 web development. There's front-end, back-end, hosting, et cetera. And when you think of frameworks

03:01 like Django, Flask, they do a great job of handling the back-end, the database, the kind of connection

03:06 layer. But like you mentioned, when you have to write the front-end, you end up having to kind of go back

03:11 to HTML, React, JavaScript, and the traditional tools. And generally in web development, you'll set

03:16 up your back-end as kind of one service, your front-end as one service, hook them up through some sort of

03:21 API and develop through that. And it works great, but one part, like you mentioned, is there's a lack of

03:27 unification. So when it comes to building an app, you have to piece together a front-end, a back-end,

03:31 then figure out how to host it. So a really big part of why we started Reflex was to kind of simplify

03:37 all these different layers of web development into one batteries-included framework. And one of like

03:43 the biggest challenges along with the batteries included is having everything built in, but also

03:47 keeping it flexible enough, right? Because people want to do all sorts of stuff with their web apps.

03:52 So that's really one of the main challenges that we faced going through all this was how

03:56 can we make a framework that, you know, people can just get started, but it doesn't box them

04:00 in. They can still make all the stuff they were going to make, you know, using their JavaScript

04:03 apps.

04:03 Right. That is the big challenge. And we're going to dive into that. You guys got some awesome

04:07 stuff. But before we do, maybe, you know, it's been two years or so since you've been on

04:10 the show. Give a quick introduction, just who you are.

04:13 Yeah, definitely. So yeah, I'm Nikhil. I'm co-founder here at Reflex. Last time we chatted was about

04:18 a year and a half ago. At that time, our company name was Pynecone with a Y. That was at Startup

04:23 Row. And our mission when we started, and even now, is to just simplify the whole process of

04:28 web development from front-end, back-end, hosting, all these parts, and make a framework that simplifies

04:34 all these parts so a newcomer can easily share their ideas without getting all caught up in

04:39 learning new tools, learning new languages, boilerplate, and all this.

04:43 So that's been our goal from the start. And maybe just some background on why we even came

04:48 to this idea. So prior to working on this, I was working at a self-driving car startup, and then I

04:54 was working at Apple. And at both these roles, I was working on AI teams with really talented engineers,

04:59 but we were all Python engineers. So we could do, you know, anything with database, backend,

05:04 all this stuff. But when it came to something as simple as make a UI for this app, make a dashboard

05:09 to showcase this data, you know, make a little form to submit it. You know, there's sometimes

05:14 these senior engineers would be like, okay, that's not my domain. I can't do that in Python. You know,

05:18 someone else go handle this.

05:20 I have a PhD in machine learning, but I can't build a website. So now what?

05:23 Exactly. And that's kind of where we are. And a big reason of that is if you think about,

05:28 you know, different languages and their use cases, Python is used in so many, it's one of the most

05:32 broad languages. If you think about all the areas it's used, backend databases, AI, ML, all these areas,

05:38 but there's really one place that it's not used traditionally. And that, and that's kind of

05:42 front end development. And for there, like JavaScript is king. And if you take the inverse of that and

05:47 think about JavaScript, it's one of the most popular languages in the world, right? Like it's,

05:50 it's one, two or three up there. And if you think about the use case for it, it's all web,

05:54 it's mostly all around web applications. So what we see, what we kind of notice is, you know,

05:59 people love Python. They want to do all their work in Python when it's accessible and people love web

06:04 development and they use JavaScript because they love web development, but there's not much usage

06:08 of JavaScript outside that domain. So really our big focus was, well, can we fill in this gap in the

06:13 Python ecosystem where people are doing everything in Python? And then suddenly this one domain of

06:18 websites, front ends, that, that can't be handled and they need to, you know, use a different tool,

06:22 use a different language, outsource that. And that was a big thing we wanted to solve. The same people

06:27 with the ideas, building the backend, building the AI, building the, whatever it is, should be the,

06:31 also the people presenting it, building the UI layer and kind of sharing their ideas.

06:35 Yeah, absolutely. I, many people I talked to would rather build everything in Python, but they,

06:39 they end up piecing it together as they have to. Elvis, good to see you.

06:44 Yeah, same.

06:44 Yeah. Quick introduction about you.

06:47 Yeah. So I guess we met at PyBay.

06:49 Yeah, we did.

06:50 Yeah. So that was very, very fun. And yeah, so I'm Elvis, he and his, I'm working at Reflex as a

06:56 developer advocate. And prior to this, I was working at Warp. So I was there like three years

07:01 doing like developer experience, developer relations.

07:03 Yeah. Shout out to Warp.dev, man. That is an awesome terminal. I really enjoy that. I use that

07:09 pretty much universally now. And yeah, I'm, thank you for that recommendation. It's still going strong.

07:14 Very good team. Really good product. Yeah.

07:17 Yeah. Awesome. So now you're working at Reflex, formerly Pinecone, same company, new name.

07:21 Yeah. Awesome. Yeah. Even doing more, you know, this Warp is more Rust, right? So now you're more

07:26 in the Python side of things. Yeah.

07:28 Yeah. But even there, I was like, everything that I was building was like internal tooling to like

07:32 optimize developer experience. And so everything was in Python. And so that's how I actually came

07:38 across Reflex. And then I was like, oh, this is a dream, like being able to like work in open source

07:42 and build Python apps and like serve the community. And so when I saw that job posting, I was like,

07:49 whoa, I would love to join. And they were in SF. So that was great. So I could just walk over to the

07:52 office and things. So yeah, that is kind of the magic of San Francisco, right? Like it's not you and

07:57 potentially a whole family move thousands of miles away. It's just you take a different bus or a

08:02 different BART train or something. Yeah. Very cool. All right. Well, Nigel, let's talk really quickly

08:08 just about startup lane. You know, like I was just looking back on this as I knew you were coming on the

08:13 show and I was like, well, you know, what happened to all those companies? And I don't have a great,

08:18 totally good sense. I know that some of these have pivoted. You know, we had Ponder, we have

08:24 Generally Intelligent, we had Webots, Neptyne, Nixtla, Pretty Base, and Pynecone, which is now Reflex.

08:32 And this was, well, what is this startup row really quick while we're on this topic?

08:37 Yeah. So this was back when we first started. I think our company was maybe one or two months old. And

08:42 we were, we had just got into, we were part of the Y Combinator winner 23 batch.

08:46 So while going through that, we launched on, I think, Hacker News early January. And that's when

08:52 we first started, you know, publicizing our open source, getting users on it. And we got, we got

08:56 quite good traction when we started. And part of one of the events that was happening was PyCon,

09:01 which was, I believe in April of that year. And it was a great opportunity for us as a Python,

09:07 you know, a Python company, like to kind of meet our audience. And yeah, so part of that was the

09:12 startup row where there was a lot of, you know, I think seed or like very early stage startups

09:17 coming to present. So at that time, we were maybe only two months old. So very early, but it was still

09:23 a great, really great experience. You know, I think it was probably the first event, you know, that we've

09:27 done as a company. So that is a really good experience to meet different Python developers and to meet all

09:33 like the other developers that, you know, the companies you mentioned, like, even ones that

09:38 were not, that aren't listed here, there's a bunch of awesome Python people that came there. So

09:41 yeah, it's not just the companies that are in startup row. That's its own special thing. But the

09:46 whole expo floor hall is a pretty awesome place to just walk and mingle and learn what people are up to.

09:52 Yeah, definitely.

09:52 Yeah, yeah, that's cool. I know that Ponder, Ponder got acquired. So congrats to them.

09:57 Oh, nice.

09:58 I got acquired by Snowflake, which is, you know, that makes a lot of sense. Yeah.

10:03 Yeah, I know, generally intelligent, their founders are some of our friends,

10:07 they're an investor in our company, they rebranded now to imbue. So I think they're doing well as well.

10:13 Yeah, I think whoever put together that, that group, whoever selected the companies that go there,

10:17 did pretty good. Because, you know, startups don't have a typically a huge likelihood of succeeding.

10:22 But I think most of these are still around. So that's awesome.

10:24 Yep.

10:24 Yeah, cool. All right. Well, let's talk. We've introduced it a little bit. But reflex, let me just read,

10:32 I'll read the little, the H1, H2 for you. And then we'll go from there as that front end,

10:36 back end, pure Python, and then the open source framework to build and deploy web apps,

10:41 no JavaScript required. There's a lot to unpack there. So tell people what reflexes,

10:46 and then we'll dig into the use cases and some of the open source stuff and so on.

10:51 So I think we kind of talked about earlier, reflexes of Python framework to build web apps in Python. And it's an open source framework. So you don't have to sign up for a SaaS or do anything. You just do pip install reflex kind of like what's shown at the bottom. And you can start using it like any other Python library. And like I mentioned, the key distinction that we're trying to do is kind of unify the whole web stack. So all the parts that normally go into web development, building a front end, building a back end, connecting them, maybe including a database, and then deploying it.

11:19 Usually these involve using several different tools, technologies, even often multiple languages. And the overhead for that could be really high. So if you think about before, like a full fledged web app, usually you're not going to do that unless you have, you know, you have like a mission to do like you have something you're trying to make, you have it kind of specked out and you're going to kind of invest that effort into it. It's very hard, or most people aren't going to, you know, prototype a web app or kind of build out like that, because the overhead needed is way too high to kind of mess around.

11:49 So what generally happens, especially for Python developers is they'll use Python scripts, they'll use Jupyter notebooks. And in the Python community, also, there's other pretty good frameworks, things like Streamlit, Gradio, which are also in the Python environment.

12:03 And I think try to target a very similar problem that we're doing where, you know, people have their data, people know Python, and they want to showcase it. So these are kind of the existing tools that were there before we started. And I think they all have their place to get started with, but they're very limiting and what you can build with them, right? Like, it's good for the most basic prototype, you can have a script, you can have a Jupyter notebook.

12:23 But this is not something necessarily you'd want to share within your team to build out to a larger app. Like usually, once it becomes a bit more complex, you hand it off to another team, or if you're brave, you go learn JavaScript or something. But usually there's a point where it's like, all right, I've done my job, like someone else, like go make this production ready. And a big part of what we're trying to do different at Reflex is compared to other Python, and I'd even say other like non JavaScript frameworks,

12:49 is to keep everything in, you know, Python in one language, but without having any of these trade offs that usually come with a low code or no code platform. So usually low code and no code, they sac they exchange things like performance features, things like that for usability, customization, customization. So you can build a certain subset of apps. But you need to kind of, you know, keep your aspirations confined to what that framework is going to give you like you want some random component, you want a mapping component, you have to hope that framework has it.

13:19 You want to integrate with a certain database, you have to, you know, hope that they're going to give you that integration. So one of the very nice things about Python is for especially the back end integrations, right?

13:28 Actually, before that, let me just back up one second. So compared to a lot of these low code, our goal was to have the same framework, you use, you can easily build a prototype your app, you know, in a few hours, build a quick prototype of your app.

13:40 And you can use that same framework to then grow your app all the way to a production grade app. So if you're like, look at our main website, reflex.dev, this entire website was built in reflex. So you can kind of see that badge at the bottom.

13:51 I think this is kind of distinguishing thing from others, like, usually to build a website like this, you would need to use JavaScript, but there's, this was entirely built in Python and reflex. And it just goes to show like the kind of, you know, along what we're chatting about, of, you can build, you know, a basic chat app, a little prototype app, as kind of is shown in the demo section right below on the landing page, where we have a bunch of, you know, different use cases.

14:13 So you can build that prototype, but you can also extend that all the way to a production app that's, you know, serving either internal users, or even in, in our case, for some startups that are serving external public users using reflex.

14:24 Yeah, a lot of times when I talk to people about these kinds of apps, often, it's, we've got an internal app, and there's 20 people using it. And it doesn't really matter if it takes a little while for the app to load up. And, you know, we're not worried about SEO or any of those things, right? But to make your, your product a landing page, and that's a pretty big deal.

14:44 Yeah. And I'm not saying that's the typical or intended use case.

14:48 Sure, of course.

14:49 There's other things if you just want a static landing page, but it was more to show the extent to which it could be used. But like you mentioned, a lot of our there's kind of like two domains of people that want to use us. The main audience is really developers, engineers that are not web devs are not JavaScript devs. So obviously, that includes, you know, hardcore Python people who are, you know, senior Python developers. But a lot there, it's also just like anyone who knows a bit of coding, because Python tends to be, you know, people have taken one CS class, it tends to be a Python class, they've learned a bit of Python.

15:19 So we actually see use cases outside of even software engineering. So people in finance, manufacturing, biology, where they, you know, before had an Excel spreadsheet, but they knew a little Python, and they're now able to develop, you know, these internal apps for their companies.

15:32 So that's kind of the developer profile we're looking at. And in terms of the companies and use cases, it's a lot of, you know, small teams that they want to do more with the team they have, like they like for on one hand, it's kind of startups, you have a one two person startup, and you need to get your, you know, app demoed, you're building some AI thing, and you want to get a demo, you don't want to go hire a contractor or front end developer to build that you want to iterate quickly, and kind of work through that, especially during that iteration phase, right?

16:00 Like when you want to iterate, you don't even know fully what you want to build. So it's really empowering to, or what we're trying to do is empower people by giving them a tool where they can iterate on their ideas, and not have to depend on someone else.

16:12 This portion of Talk Python to me is brought to you by Posit, the makers of Shiny, formerly RStudio, and especially Shiny for Python. Let me ask you a question. Are you building awesome things? Of course you are. You're a developer or data scientist. That's what we do. And you should check out Posit Connect.

16:30 Posit Connect is a way for you to publish, share and deploy all the data products that you're building using Python. People ask me the same question all the time. Michael, I have some cool data science project or notebook that I built. How do I share it with my users, stakeholders, teammates? Do I need to learn FastAPI or Flask or maybe Vue or React.js? Hold on now. Those are cool technologies, and I'm sure you'd benefit from them. But maybe stay focused on the data project.

16:57 Let Posit Connect handle that side of things. With Posit Connect, you can rapidly and securely deploy the things you build in Python. Streamlit, Dash, Shiny, Bokeh, FastAPI, Flask, Quarto, Ports, Dashboards, and APIs. Posit Connect supports all of them. And Posit Connect comes with all the bells and whistles to satisfy IT and other enterprise requirements. Make deployment the easiest step in your workflow with Posit Connect.

17:23 For a limited time, you can try Posit Connect for free for three months by going to talkpython.fm/posit. That's talkpython.fm/P-O-S-I-T. The link is in your podcast player show notes. Thank you to the team at Posit for supporting Talk Python.

17:39 Yeah, I think one of the problems with the low-code, no-code stuff for people in our orbit is they know code. They're good developers. They just might not be front-end developers or designers or whatever. So I think it's probably a little frustrating to work with really low-code, no-code type of stuff.

17:58 Because you're like, ah, if I could just program it, just a little bit of code would totally make this work. But it's in JavaScript or it's in something else. Like, Elvis, when you're talking to people about this, you know, like, how do you present this versus something like Retool or Gradio or something like that?

18:13 I was using Retool at the last company. And one of my frustrations was the fact that I didn't have control.

18:19 I think they do make pretty cool stuff, but it's different, right?

18:22 Yeah, it is different. I think Retool is very powerful. They have a lot of plug and play.

18:26 I think for someone who's, if you're coming from a developer background, I think you're so used to having full control that, like, giving some of that control away can be a difficult adjustment.

18:36 And I think one of the nice things about Reflex is that all of these UI components get transpiled into React, right?

18:43 And so one of the key value props is that you're bringing an entire ecosystem closer to back-end people.

18:50 And so, like, there's a couple of companies that will have someone doing front-end and making components just for their internal tools team.

18:58 And it's like, you can just wrap those in Reflex. And now all of your components still adhere to, like, your style guide or to your theme.

19:05 And so you're not really, like, limiting people in terms of, like, the components that they have available to them because it is React under the hood.

19:11 Oh, that's pretty interesting. Yeah.

19:13 Yeah. So it's, like, very elegant because it turns into FastAPI and React.

19:17 So it's like, you're not really limited when it comes to, like, producing apps that can get bigger or, like, scale or have, like, routes and things.

19:24 It's basically some developer tooling on top of React.

19:29 And then, so what you end up programming is probably mostly generates React.

19:33 And then it's also FastAPI on the back-end. That's really neat.

19:37 Well, basically, going back to, as we were developing this, the most important thing we kept in mind was, okay,

19:42 we want to make it really easy. You know, a newcomer should be able to build this.

19:45 But not have, pretty much have ways to do anything, right?

19:49 Like, never make people hit that graduation point where they're like, okay, I've hit the limits of Reflex.

19:54 Let's go use a serious framework like React.

19:56 So it's very intentional that people never hit that goal.

19:59 And, like, one way that we achieve that is you code everything in Python, but the end output that it compiles to is a production-grade web app.

20:07 So for the front-end, though you're coding it in Python, the front-end will compile out to a Next.js app.

20:11 The back-end will compile out to a FastAPI back-end that hookup together.

20:15 So it's pretty much the same architecture you would write as if you were writing it by hand.

20:19 So there's no, there's, like, we're not taking a shortcut as in, like, if you were to write it by hand, it would actually compile.

20:24 You would probably write a Next.js front-end, FastAPI back-end, and connect it.

20:28 And we're kind of giving a layer on top of that.

20:30 And by developing on top of React, it goes back to this.

20:33 We don't want to reinvent the wheel.

20:35 WebDev is a really mature ecosystem.

20:37 We're not going to be able to remake React and all the components out there.

20:41 So when we started, our big approach was let's wrap React.

20:44 And not only, like, do our components wrap React, but we make it very easy for developers to wrap their own components.

20:52 So kind of like what Elvis said, we have companies, like, Fortune 100 companies, that internally they have their own React, you know, component library that they must use for every app that they're building.

21:02 And they were able to wrap those in Reflex, and now they can use, you know, their private custom React components.

21:08 One person wrapped it once, and now any Python developer is able to access it and develop with it.

21:13 So our really big point is, like, you're not going to be locked in.

21:16 We have, you know, 60-plus components built in.

21:18 But anything that's possible in React and JavaScript, you can easily bring that to Reflex without waiting for us.

21:22 Okay, so there's a bit of an escape hatch to just go down straight to React.

21:26 The nice part is you don't have to write the React directly.

21:29 I mean, you can write it once.

21:30 But after that, we have a third-party component ecosystem.

21:33 So I can show you on our website later as well, but many people have published their own third-party components.

21:38 Oh, interesting.

21:39 For example, like, we don't have a map component built in.

21:41 So last week, someone published a Reflex map component.

21:44 So if you want to, like, hook up a map into your thing, it's now possible.

21:47 And there's a lot of these...

21:48 AG Grid.

21:48 Yeah, AG Grid, you know, audio recording, and all these, like, niche cases, right, where we're not going to be able to support it all.

21:54 But the nice part about having an open source and open source community is community can add to the project, shared with others, and everyone can benefit from it.

22:02 Another one of the challenges of low-code, no-code type stuff has to do with the deployment side of things.

22:08 I maybe buy a SaaS subscription at some low-code place.

22:13 But, you know, in practice, the performance is just not good enough to, if you put it on the internet, it'll just not take it or something like that, right?

22:22 If it's basically JavaScript over FastAPI, like, that's a very well-known and super scalable setup, right?

22:29 Part of that is, in the unification, it wasn't only front-end, back-end, it was also deployment, which a lot of people, they build their app, and deployment takes as long, if not longer, than the actual building, especially...

22:39 And the DevOps all along the way, yeah.

22:41 Yeah, especially if you've never done this, right?

22:43 Like, to go learn about, you know, how to domain names and what is, like...

22:46 SSL.

22:47 What is S3, SSL?

22:48 Like, all these things take a long time.

22:49 And that, so, and going back to the thing of balancing that thing of batteries included, yet, if you don't want to use our batteries, you know, you should be able to self-host it.

22:58 So, along those lines, what we've included in Reflex is a one-line deploy.

23:02 So, after you build your app, you can just type Reflex deploy.

23:05 We set up all the infrastructure, and you'll get a URL back that anyone can access your app through.

23:11 So, we have the ASL hosting service built in as well to Reflex.

23:14 And if you don't want to use that, like many companies, you know, say you want to deploy on your private cloud, or et cetera,

23:19 it's really important to us to stay with, like, open source and make it so, you know, if you want to use it in your own use case, that's always possible.

23:26 So, we have guides and make it easy to deploy on all these.

23:29 And like you said, because it's kind of a standard output, it's kind of easy to self-host it yourself as well.

23:34 Right, right.

23:34 What you know about running FastAPI probably translates pretty well.

23:38 Yep.

23:38 What's the database story?

23:40 There's got to be a database, right?

23:41 This goes back to, like, the whole batteries yet flexible.

23:43 So, we have a built-in ORM similar to Django.

23:46 It's nothing but a kind of light wrapper around SQLAlchemy, but kind of hooked up more to Reflex.

23:53 So, kind of taking care of some abstractions in terms of making the models work with Reflex state, et cetera.

23:58 So, the nice part is we have first-class support for any SQL database because of the SQLAlchemy, like, tight integration.

24:05 When you start Reflex, you have a built-in SQLite database that gets any app that wants it.

24:11 It's there for you.

24:12 You don't have to do any setup.

24:13 So, you can start developing with databases right away, like, without, you know, having to learn too much outside or doing any setup.

24:20 And then once you want to go to, you know, production, deployment, and you want to use, say, Postgres, MySQL, or whatever you want to use for your actual database, it's just a matter of, in our config, putting the database URL that you want.

24:33 So, we make it really easy to partner with whatever you're doing.

24:36 So, a lot of people use us with providers like Supabase, Neon, where they set up their database using one of these providers, and they can easily connect it to their app.

24:43 That's cool.

24:44 So, basically, anything SQLAlchemy supports, just set the connection string, and you're good to go.

24:48 Along that line, right?

24:49 Like, a lot of people ask us follow-up questions like, well, how do you handle MongoDB?

24:53 How do you handle NoSQL?

24:54 How do you handle, like, XYZ tool that I want to use in my app?

24:58 And this is another part where I think our big advantage over low-code, no-code frameworks, where, you know, if you want, say, a drag-and-drop builder to support your random database, because there's no code in it, you're kind of dependent on them, right?

25:10 Yeah, yeah, yeah.

25:11 For us, we kind of have this kind of nice privilege where we can say, hey, it's just Python.

25:14 Go use the Python library.

25:15 Anything you can do in Python, you can, like, integrate in Reflex.

25:18 So, we give a lot of first-class support, but a lot of what we're doing is we're on the shoulders of React and Python.

25:25 Oh, interesting.

25:26 So, if I wanted to use, say, Beanie and Pydantic and MongoDB, I'd just do that?

25:30 Just do pip install, whatever the library is, and use it like any Python.

25:33 So, for example, like, a huge use case people use us with is, you know, AI apps.

25:38 So, a lot of people use OpenAI, Anthropic, and all this.

25:40 And it's just a Python library away.

25:42 And oftentimes, they already have written that Python script first, right?

25:46 And they just want a UI on top of it.

25:47 So, it's, like, even easier to hook up at that point.

25:49 Anything you want to add to that before we move on?

25:50 This whole deployment, managing, DevOps-y side of things?

25:54 Yeah, it definitely reminds me of the code where, like, any, like, sufficiently advanced technology is, like, indistinguishable from magic.

26:01 Because, like, we recently sponsored Cal Hacks.

26:04 And, like, being able to, like, see people who are taking, like, CS1, CS2, like, the magic, like, in their eyes.

26:11 And, like, they can, like, run it.

26:13 And then, like, a website comes up.

26:14 Yeah.

26:15 It's just so compelling, you know?

26:16 And then, so, like, for me, I'm just, like, looking forward to the future where more people can use it.

26:21 And then we can just, like, make, like, the web ecosystem, like, more democratized, you know?

26:25 Like, just bringing power to people who, like, don't have a JavaScript experience, you know?

26:29 Yeah, it's a big part of the Python story as well, right?

26:31 One of the alternatives to this is notebooks, right?

26:34 Which I know is not even close to the same thing.

26:36 But a lot of people who are not web developers or just don't want to take a month to build a website, right?

26:41 They'll kind of create a notebook and use the notebook to visually communicate in interesting ways, right?

26:46 But when it comes down to, I want something that feels like a website for someone, it kind of falls short most of the time.

26:52 They use a notebook for that.

26:54 Yeah.

26:54 So the reason I brought it up is notebooks totally democratized visualization and interaction for data scientists in a way that was massive.

27:02 Yeah, I completely agree.

27:04 And I think most people would agree, like, a web interface is nicer than a notebook, but a notebook is so much easier to build, right?

27:09 So when considering that trade-off, people are like, all right, here's my Jupyter notebook.

27:11 And what we're trying to hope, or what we're trying to do is make it as easy to, okay, convert your notebook to a website that's more easily shareable, more easily kind of deployable, and all this other stuff.

27:21 This portion of Talk Python to Me is brought to you by Bluehost.

27:26 Got ideas, but no idea how to build a website?

27:29 Get Bluehost.

27:31 With their AI design tool, you can quickly generate a high-quality, fast-loading WordPress site instantly.

27:37 Once you've nailed the look, just hit enter, and your site goes live.

27:41 It's really that simple.

27:42 And it doesn't matter whether you're a hobbyist, entrepreneur, or just starting your side hustle.

27:46 Bluehost has you covered with built-in marketing and e-commerce tools to help you grow and scale your website for the long haul.

27:54 Since you're listening to my show, you probably know Python, but sometimes it's better to focus on what you're creating rather than a custom-built website and add another month until you launch your idea.

28:03 When you upgrade to Bluehost cloud, you get 100% of time and 24-7 support to ensure your site stays online through heavy traffic.

28:12 Bluehost really makes building your dream website easier than ever.

28:16 So what's stopping you?

28:17 You've already got the vision.

28:18 Make it real.

28:19 Visit talkpython.fm/Bluehost right now and get started today.

28:24 And thank you to Bluehost for supporting the show.

28:27 Along those lines, I think we're going to chat about it maybe a bit later.

28:31 But our goal, like right now, a big part of it is making, okay, you can write your UI in Python, right?

28:36 So it's making that part of it more accessible.

28:38 But our goal is not necessarily, you know, to stop at Python.

28:43 Our goal is just to make it easy for someone with an idea to build a web app.

28:46 So along those lines, like as we started, a lot of the positive comments people have said is, okay, now I can, you know, one language, one framework.

28:53 But still, it's just because, you know, Python, that doesn't suddenly mean you're a designer, you're a web developer.

28:58 Like I can now make, you know, an Airbnb style website just because the HTML is now in Python.

29:04 So a big part of what we're trying to do is accelerate a lot of the entire process.

29:09 Because fundamentally, I think people have in their mind, like they know what they want to build.

29:14 They know what it looks like in their head.

29:16 In their mind, they can visualize it.

29:17 But it's kind of their technical implementation and their tool.

29:20 Like all of those are not good enough for what's in their mind to become reality.

29:25 So that's why they have to settle for notebooks, settle for, you know, an approximation of what's in their mind.

29:29 Because they're like, okay, this is with my time and effort and tools.

29:32 This is like what I'm trying to do.

29:35 And along those lines, so I think Python is definitely one good aspect of it because, you know, it's now in their language.

29:40 We're trying to bring it to where they are.

29:42 But there's a lot of stuff that I think the whole web dev ecosystem is going to change in the upcoming years.

29:48 And we want to be part of this kind of new age of frameworks that's incorporating things like AI along with code.

29:55 And kind of that integration between the two where a lot of stuff, you know, that's easier to do in AI.

30:01 It makes sense to do there.

30:02 But it's important that the output of that is something that the developer can understand, edit, and kind of work with.

30:07 So it's still their contribution that's getting, you know, built in the end.

30:11 I'm skeptical of many integrations of AI into, I'll say, most apps.

30:16 But I know you're leaning towards not playing a little bit.

30:20 It's pretty neat.

30:20 So, yeah, we'll get to that.

30:22 But, yeah, it's pretty empowering because, you know, if you just stare at a blank screen of HTML where it literally just says angle bracket HTML, angle bracket body, now what?

30:31 Like, that's daunting, you know?

30:33 That's kind of the point we're trying to go after because there is, you've probably seen, like, there's a lot of AI website generators that, you know,

30:40 they'll make kind of your landing page.

30:41 I think there's two real downsides to a lot of existing ones that we're trying to kind of attack differently.

30:46 One is they're mostly meant for static sites, right?

30:49 Like, they'll give you your thing, but it's very hard to add your actual stuff to it.

30:53 And part of that is they generate kind of the stuff, but it's not in a way that's usable by the end user.

30:59 So you could generate a nice dashboard interface.

31:02 But for a developer, they're like, well, how do I actually put my data in there?

31:05 How do I hook it up with my database?

31:06 How do I actually make this nice thing actually practical?

31:09 So I think that's kind of the approach we're trying to do is, like, once, if we have these AI features, it's not just an AI to build.

31:16 It's something that the developer can also, you know, understand the output with and work with it.

31:20 So it's like Python we see as great in this thing as, like, an intermediate language with which both AI can kind of write to and a developer can actually understand.

31:29 And compared to an AI outputting a bunch of React code, which would be really hard for then a Python developer to actually go make modifications with.

31:36 It's write only.

31:37 And you can't do much with it after it's created.

31:39 Exactly.

31:40 I want to talk through some of the little examples and what code looks like within the constraints of a mostly audio show to the extent that we can do that.

31:46 But I want to talk open source first.

31:48 Because one of the considerations you guys said, hey, let's circle back and talk about Reflex.

31:53 I'm like, wait, I don't know what Reflex is.

31:55 But then it's Pynecone, right?

31:56 I'm always a little bit hesitant to have just a company on the show because I'm afraid it's just, well, we're just going to talk about our product all day.

32:03 But, you know, I think there's one.

32:05 I feel like having an option to write Python code across the board is super interesting for Python people.

32:12 There's a few other things that I've covered previously that are somewhat like that.

32:16 Like Anvil is close, but it has a very different approach.

32:19 And Streamlit, very different approach, but kind of somewhat very slightly sort of similar output, but not the same for sure.

32:26 But also just the fact that you guys have this also as open source.

32:30 I think that that's a pretty compelling option.

32:33 And so one of the things I think this makes it pretty relevant for people.

32:36 And then I looked at the GitHub repository and it has 20,000 stars.

32:40 That's like a third of Flask or a third of Django.

32:42 That's pretty good, you guys.

32:44 When we started, we always wanted to open source it from the start.

32:47 I think that was like very, very important to us.

32:49 I think our idea was I'd rather have a large number of users and only X percent of them,

32:55 say on a paid product than a small number of users that are all paying.

32:58 Like our biggest thing is all about kind of the community.

33:01 And related to that, I don't think there's been many, especially in like, say, web frameworks.

33:06 I can't really think of many web frameworks that are not open source that I've really took off because a big part of things like web frameworks are the ecosystem around it, right?

33:15 Like it's not just the framework, but what are all the stuff people build on top of it?

33:19 Like the integrations, the components, the tutorials and all this stuff around it.

33:24 So a big part of what we wanted to do was open source it, make it really easy for people to get started and not have a huge like burden to even start.

33:33 And yeah, pretty much lower all the activation energy that someone would need to get their first app up and running.

33:38 Yeah. And actually the open source has really been good.

33:41 Like it's been awesome for our community.

33:43 So when we first started like a year and a half ago, like people, what is very surprising to me?

33:48 Like this is the first time I've done an open source project, like, like, you know, led an open source project.

33:53 And it's what was most surprising in a positive way was like how many people are eager to contribute to open source?

33:59 Like I did not expect when I started, but like so many people were like, hey, can I work on this?

34:04 Hey, can I add this feature?

34:05 And what's really nice is like we have our reflex core stuff that we're working on, but everyone has a different use case of what they're trying to build with it.

34:13 Right. So it's like this balance of like, okay, we have a plan of our roadmap.

34:16 We're going to add these features.

34:17 But then other people will say, well, I want an audio component for this and I want this.

34:22 And the nice part about being open source is you really encourage people to add their own stuff to it.

34:27 When they hit a bug, a lot of people are like, all right, it's open source.

34:30 I can just go fix the bug.

34:31 I don't have to rely on the maintainers.

34:32 So for the and like going back to kind of the velocity, because we started around a year and a half ago, and I think we're getting pretty good traction.

34:40 And a lot of that is because of our great kind of community that's been building a lot for us.

34:45 Yeah, it is an interesting aspect of choosing what platform you want to work with.

34:49 Right. Because it's closed source.

34:52 It might be great, but you're stuck with whatever you're going to get.

34:54 Right. Maybe fingers crossed something comes, but you know, no promises.

34:57 Right. But if it's relatively small, like a component or something.

35:01 Yeah. Then people can add their own.

35:03 And that's pretty cool.

35:04 Whenever I'm like evaluating like tools to bring into our tech stack, especially for go to market.

35:09 One of the first things I look at is like, it's like open source and then their docs.

35:13 And like whether they have an API.

35:14 Like those are like my first three like top tier criteria.

35:17 That way we're not like constrained in the future.

35:20 If the company decides to pivot or to change their roadmap and things.

35:23 Yeah. Pivot. It definitely could turn out bad if it's your platform.

35:26 Right.

35:27 So Apache 2 license.

35:29 Tell me what, what does that mean for people who want to go and build stuff with us?

35:32 Basically, we wanted to make it as permissive as possible.

35:34 So I think the gist of it is you can kind of use it for anything you want paid, commercial, open source, whatever it is.

35:40 The only restriction, as far as I understand, I'm not an expert, by the way.

35:44 So maybe anyone looking into it, consult a license themselves.

35:48 But I think it's just you have to like attribute trademarks if you're copying the code with it.

35:52 But we really wanted to make it super permissive, you know, like let anyone use it and then build products on top of it.

35:58 Like our hosting, like, you know, more premium components, like built in auth that will provide value for people that are using it in a, say, a business or more, you know, production use case.

36:08 So the core open source, it's really important.

36:10 Like anyone who wants to build anything, like we want to give them something to start building.

36:13 And so it's always interesting to me on what hand we have a business and employees to we're giving away our thing.

36:19 That turns out to be a pretty good business model these days, but it is a little bit.

36:22 How does that work?

36:23 And I think what you are offering is pretty helpful.

36:25 Basically, the real, in addition to the core product, right, the real reason which you can go and sign up at Reflex.dev is take away the trouble of hosting this, upgrading it, maintaining it, patching it.

36:39 Just push a button or a CLI command and your thing lives, right?

36:42 Exactly.

36:43 Yeah.

36:43 We want to simplify the process of hosting because once you build your app, you end up having to host it anyways.

36:48 And there's a lot of clouds out there, right?

36:51 And we have self-hosting guides, so anyone that wants to can do that themselves.

36:55 But a lot of these clouds, they're configured to host any type of app, right?

36:59 Which is really great for the cloud because they can host anything.

37:01 But for the user, it means it ends up being a lot of configuration, a lot of setup, and a lot of overhead when they just want to get their app and share it with someone.

37:10 So one part of what we're doing with our hosting service is, one, making the UX around it really nice.

37:15 So just a simple deploy command, your app is up and running.

37:18 The second is we're really able to optimize our hosting around Reflex apps.

37:22 Since it's the only type of app that we host, we can really optimize the performance, the cost, and all these other factors, as well as add a lot of stuff on top of it.

37:29 For example, in the future, like analytics and different stuff on your app where that's another add-on if you're using a third-party hosting.

37:36 So there's a lot of plugins on the open source side.

37:39 But there's also, once you've hosted your apps, a lot of things you end up having to add in terms of analytics, tracking, monitoring, etc.

37:45 So we have unification on the framework level, but also we're going to have it on the cloud level where every part of the framework and from the front and back into the hosting kind of knows about each other.

37:55 So you can probably get some big machines and have a multi-tenant database with good performance, stuff like that.

38:00 There's kind of two aspects to our hosting.

38:02 One is a public cloud, and you can think of that similar to Vercel for Python.

38:06 So that's more geared to, say, hobbyist startups, people that want to build their ideas shared with the public community.

38:12 And another big use case, which is where a lot of our app developers come from, is the internal app use case.

38:20 That's kind of another aspect where we're building tools to easily deploy to our internal cloud, monitor who's accessing your apps, etc.

38:27 Yeah, I saw that over on Reflex.dev.

38:30 If you go to pricing, it's basically free for hobbyists, coming soon for pro.

38:34 You don't have anything to announce yet, do you?

38:35 We're working on our pro hosting service.

38:38 So right now, we have a hobby, so anyone can kind of deploy a few apps for free.

38:41 But our pro is going to have features like custom domains, ability to configure your machines, multi-region, and make it actually like a crib.

38:49 Let's a crib, probably.

38:49 Yeah, yeah, SSL, all that.

38:51 So actually making it kind of able to serve more users.

38:54 I'm pretty fascinated by the idea that it's FastAPI in the back end.

38:58 Because I'm always concerned that these things just don't scale.

39:00 Like you're going to build it and it's awesome for 100 people.

39:02 But then if it ever becomes popular, then it's a bad idea.

39:05 You know, it just doesn't take it.

39:07 That's a big reason also why we built our website as this is kind of the leading edge, cutting edge Reflex app.

39:12 Like hopefully in terms of features and number of traffic, like it's tested our framework a lot in terms of like improvements to support it.

39:19 I'm sure that it has.

39:20 All right.

39:20 Let's talk for a moment, for a few moments maybe, about what the programming model looks like.

39:27 And just keep in mind, most people listening can't see what we're talking about.

39:30 But nonetheless, let's just give people a sense of what it's like to write code in this.

39:34 Okay.

39:35 So if you go to Reflex.dev and scroll down, like just have a page or something, there's a little tab thing across the top here that has how do you create a form?

39:45 How do you create a chat bot?

39:46 How do you create an image gen?

39:48 And, you know, this thing's pretty cool.

39:50 It says, what do you want to see?

39:51 And all this stuff is live, right?

39:52 So I could be in here and type, I want to see a bunny.

39:54 And within just a moment, boom, there's a bunny running on, what was it?

40:00 I don't remember where I saw it.

40:01 Running on Flux, right?

40:03 Yeah.

40:03 Yeah.

40:04 Here it is.

40:04 Flux schnell.

40:05 Fast.

40:06 The fast version.

40:07 It's very fast.

40:08 It's pretty fast compared to, I was playing with Mid Journey yesterday and, you know, that took a while.

40:13 Then a lot of 500 errors and it took a while longer.

40:15 Then eventually I got a picture out of it.

40:16 Yeah.

40:16 It was pretty cool.

40:17 You got charts and so on.

40:19 Let's maybe just talk about this little, send us a message, put your name, email.

40:24 And message.

40:25 What does it look like to code up one of these things?

40:28 In all these examples you show, the code on the right is the entire code needed.

40:31 So it all fits in one file.

40:33 Like there's no extra stuff you need beyond that.

40:35 So if you were to copy that and run it in an app, it would actually run.

40:38 Yeah.

40:38 And just to get people listening, there's probably 50 lines, 45 lines, something like that, a code.

40:44 And so one thing you'll notice is it's all in one language and in this case, even one file.

40:48 So it doesn't have to be in one file.

40:50 Like you can have multi-page, et cetera, Reflex apps.

40:52 But the kind of nice part is the front end and back end can live together in one repository.

40:57 And so normally, you know, people that have written front end, they're probably used to either writing React HTML tags or, you know, templating through Jinja, et cetera.

41:06 And what we kind of do different in Reflex is we define your front end as nothing but Python functions.

41:12 So it fits in exactly with all the Python syntax.

41:15 You don't have to kind of learn a new language there.

41:18 Everything is a Python function.

41:19 So for example, normally when you have a button, rather than writing an HTML button tag, we have built-in components like rx.button, which as you call it, will create a button.

41:30 And the kind of layout of the front end, if you've ever worked with React, it's very similar to React or even HTML in the sense that you have this nested tree structure that kind of maps directly to the HTML DOM.

41:41 And within there, you can define all your UI components.

41:45 So that kind of is how the front end works.

41:47 And once you define your UI, these Python functions compile down to React app in the end.

41:51 Now, the interesting thing is how to make this interactive, right?

41:55 Like how do you add state to this?

41:56 So in this example, you want to do a form or in the image generation, I really want to hook this up with my OpenAI or my mid-journey model to create something.

42:04 So normally in web development, you end up having to write a front end, a back end, and a networking layer between the two where you set up a FastAPI endpoint for every single action you want.

42:15 Then on the front end, you're going to call that API, get the result by, parse it back, and then update your UI.

42:20 So that's the normal flow of, say, even adding one new feature.

42:23 Like if you want to add a button that generates an image and shows it, it will involve touching like multiple files, going through all this stuff, and hooking it together.

42:30 So one thing that we've done in Reflex beyond bringing it to one language is abstracting away the front end, back end networking layer.

42:38 So in Reflex, you'll never have to write an API call.

42:41 You never have to write a post request, a get request, or any of that.

42:44 All of that is done under the hood.

42:46 So to set up your kind of state and interactive, you can do this all within what we call a state class.

42:53 So a state class is just a normal Python class.

42:56 And within it, you define all the fields in your state that can change over time, which we call vars, as well as any event handlers that can change the vars.

43:05 So an event handler is just a Python-like function or method.

43:08 And I think the image gen is a good example of it.

43:11 So for example, in the image gen, the image URL is a var because it's something that's going to change.

43:15 And an event handler would be the get image function, which is a function that when they hit submit on the input, we call it.

43:22 So in order to hook up the front end and back end, all you have to do is hook up the UI to the Python function.

43:28 So you can say button on click equals state dot get image.

43:32 And what this does under the hood is when you click that button, it creates an event.

43:37 It sends up through a WebSocket to the back end.

43:39 It will run your Python function on the back end.

43:42 So whether that's your OpenAI, your Replicate, whatever it is, all their state runs on the back end on a server.

43:48 And that's what allows us to keep the state in pure Python.

43:50 So it will update your state UI.

43:53 In this case, it's going to update the image URL and send that back.

43:56 And it works very similar to React in the sense that as your state updates, the front end updates reactively.

44:02 That's super cool.

44:03 Kind of just two-way data binding on the values there.

44:06 Exactly.

44:06 Yeah.

44:07 All right.

44:07 So you just said something interesting that there's the next JS React front end and the FastAPI back end.

44:13 But you didn't say it's calling HTTP APIs.

44:16 You said it's using WebSockets.

44:18 Yes.

44:18 What's the deal there?

44:19 Why WebSockets and not Pydantic over HTTP or something?

44:23 No, it's a really good question.

44:24 And I think this is like, and a lot of people ask us, you know, how is Reflex's performance?

44:29 Or what are the downsides of Reflex?

44:31 Like, what's the catch?

44:32 Because up to now, we've been saying, you know, we can perform, create anything you can do in JavaScript, anything you can do in React.

44:37 So a lot of people are kind of ask about the performance.

44:40 And we kind of made design Reflex to be really performant in everything we do.

44:44 And the reason we use WebSockets is because Reflex apps, especially like very stateful apps, often need to make a bunch of requests.

44:51 So rather than having to reestablish a new HTTP request every time, by keeping a WebSocket, we are really able to optimize the speed of the apps.

44:59 So when you create, when you kind of send the type your prompt, say you want a bunny and you press enter through the website.

45:06 We changed it to a fast bunny, by the way, because you said the website was fast.

45:09 Now we have a fast bunny.

45:10 So when you want that fast bunny, it will create a little event that says, hey, this guy wants to call get image and he typed fast bunny.

45:18 It'll take that little payload, send it through the WebSocket that's already been established, run the Python function on the backend, and then send only the state delta back.

45:26 So for example, if you have a really large app with hundreds of pages and hundreds of states, changing this is not going to say, hey, front end, this is their entire new state.

45:34 We only send the diffs and stuff back over the WebSocket.

45:37 So all of this was done like in the name of performance and making Reflex apps really snappy for whatever you're doing.

45:42 In a sense, the Python code that I write, even though there's this React bit, some of it still lives on the backend.

45:49 Yeah.

45:50 And then some of it gets kind of mirrored to React on the front end.

45:53 Is that right?

45:53 This is something, especially like as people are learning Reflex, like one of the things we try to emphasize most, which is though it's all in one file, it's all in Python.

46:02 There still is a distinction between the front end and backend because of this fact that the front end compiles to Next.js app while the backend is a FastAPI.

46:10 So in this case, it's pretty much all the UI code, right?

46:13 Like what's inside the index function.

46:15 That's your Next.js React app.

46:17 Your FastAPI is pretty much your state and your event handlers.

46:20 So within there, you can keep everything in pure Python.

46:23 use anything you want.

46:24 The one thing you can't do and we can't do is compile arbitrary Python to JavaScript.

46:30 So that's the reason all the event handlers run on the server.

46:33 So you can use any library, anything you want.

46:35 And on the front end, we only compile kind of a static website.

46:39 So there's no logic that ever happens on the front end, actually.

46:42 Just updating the bindings and triggering events.

46:45 The front end is just like a dumb UI.

46:47 It's like, give me the state.

46:48 I'm going to show the state.

46:49 That's definitely a nice bunny.

46:50 So one thing that I think is notable here, and I've seen this in other frameworks as well.

46:55 Like, for example, I had PuePy on Talk Python recently, which is also sort of React stuff on the front end.

47:04 But this is a lot more, PuePy is more running, I think, React type stuff almost in PyScript, I believe.

47:12 Oh, got it.

47:13 All on there, which is interesting, right?

47:14 But one of the things that I think you find with a lot of these is the shape of the code matches the DOM a lot of times.

47:22 Or at least the conceptual idea of the hierarchy of the UI, right?

47:27 So, for example, here you've got a VS tag with a skeleton with a flex.

47:31 And then you start putting forms and in the forms and all of this, every word that I said there is another level of indentation.

47:38 And then you indent and you get a React input and a React button and you unindent Python style, right?

47:43 And I think it makes it pretty easy to think about, here's the code, here's the UI, because the shape of the code matches the concept.

47:51 It mirrors the UI in some ways, right?

47:53 And rather than just pure top to bottom imperative, we're just generating the UI, but it actually, like, the way it's structured, it's kind of like Flutter.

48:01 It looks like it matches it, you know?

48:03 There's kind of two approaches people in this space have taken to building.

48:06 Like, one is imperative, which is kind of what you said.

48:08 And I think, for example, Streamlit has taken this approach where to do a button, you would do, like, ST heading, ST button.

48:15 And it will implicitly, like, kind of magically put it into its thing.

48:18 And I think it could be good for simple stuff, but it's really hard to reason about as your thing gets larger, because you have to kind of contextualize, wait, has this been called already?

48:27 Like, what order is everything going through?

48:29 Is the button in this group or is it outside of the group?

48:31 Or, yeah, stuff like that, right?

48:33 It's nice in some sense, but I don't think it scales very well, especially, like, conceptually.

48:38 Like, it's hard to kind of reason about what all you've kind of built.

48:42 I guess going back to, like, why it's in this structure, it's, like, this is already kind of the natural structure, right, from HTML, from React.

48:48 And I think a lot of, as we were going through stuff related to API design, we try to improve the API where we can.

48:54 But a lot of the times we realize, you know, the people that did it originally had a good idea.

48:58 Like, and there's a reason it's kind of the standard.

48:59 I think it takes a little getting used to, to be honest, to see search nested stuff.

49:03 But I do like it.

49:04 I think it's good.

49:05 Part of it, I think in this example, we kind of nested it just to show, you know, it's all in one function.

49:08 But in a more practical setting, you would break this up into different components.

49:12 So similar to React, you probably wouldn't have a giant nested thing.

49:15 And you can think of each of those things as units that you work with.

49:18 Yeah.

49:18 Also, like, decorators help a lot with, like, making dynamic components on the fly in terms of different functionality.

49:24 Yeah.

49:24 All right.

49:25 Let's talk about just a couple more things while we're here.

49:27 I want to talk about the components.

49:29 And the components are these building block pieces.

49:32 Maybe pick just a couple you think highlight the idea of these things and we can talk about them.

49:36 A really big thing people use this for is kind of like tables and graphing.

49:39 So maybe if you go down to the table section, the AG grid one might be a good one.

49:44 So this is actually a good example of a third party component.

49:46 So you can see we have our built in components, but a lot of our enterprise users really wanted this AG grid feature, which is one of the most popular kind of table libraries.

49:56 So we make it really easy.

49:58 This is an example of a third party library.

49:59 Someone's wrapped that you can kind of bring in.

50:02 And this is an easy way to kind of showcase your data.

50:05 So a lot of data scientists, et cetera, use this library.

50:08 It can hook up with your data frames and kind of show this.

50:11 So this is another example showcasing kind of the flexibility of you want that random react library, even if it's not in Reflex, like the team or external contributor often wraps this easily.

50:22 And yeah, the kind of nice part about it is it's more high level.

50:25 It has a lot of these built in features like pagination, searching, sorting and all these.

50:28 So I think it's this balance, right?

50:30 Like we can give people the raw components like you can code everything in HTML.

50:35 You can build everything from the ground up yourself or you can use this kind of high level thing.

50:40 And the nice part about Reflex is you can kind of approach it at any level that you want.

50:44 So it's like I want this nice built in thing that has sorting pagination.

50:47 Here it is.

50:48 Or you're like, you know, I'm just going to build everything from the ground up.

50:51 I want my own table component.

50:52 We also give you the tools to do that.

50:54 So I think it just kind of shows the scale at which you can kind of pick your level of abstraction as you're using it.

51:00 Yeah.

51:01 Then you just pip install the name of the thing and then just use it like a native component, right?

51:07 Exactly.

51:07 And it will act as if like all other Reflex components.

51:10 So there's nothing like distinct between our components and something you would wrap yourself.

51:13 I was a reasonably sized company with a team of maybe many of them knowing React.

51:20 It might make sense for me to build out an internal library of widgets that we use on our app and plug in to Reflex something like that.

51:27 We have a whole guide on our website on wrapping React with different examples.

51:31 And we're trying to make it accessible for Python developers.

51:34 So because that's our user at the end, right?

51:36 So we wanted to make it accessible for even a non-JavaScript, non-React expert to be able to wrap these components.

51:42 So we've seen in different companies, like I kind of mentioned earlier, that have their internal component systems in React.

51:49 A Python developer was easily able to kind of wrap these because we make it super easy to wrap as just a Python class where you just define the props.

51:57 So maybe if you go to the wrapping React section on the left-hand side, it's kind of at the, maybe go back to the main docs section.

52:05 But yeah, we try to make it really easy to bring your own components as well.

52:08 So whether you already have one or you want to make your own.

52:11 So this is like a spline one.

52:13 And you can see all you have to do is list all the props.

52:15 It's a Python class.

52:17 You kind of have to just go find what library, what NPM library you're using, list all the props.

52:21 And for interactive ones, you may have to define that.

52:23 And then you can start using it right away.

52:25 As part of your component, you define just basically the NPM thing to install or whatever.

52:30 And then off it goes.

52:31 Yeah.

52:31 And Reflex will handle, it'll install the component.

52:33 It will wrap it for you and it will compile out for you.

52:35 All right.

52:35 I said three things.

52:36 One was components.

52:37 The other is this AI generator.

52:39 And then I want to just talk about the roadmap.

52:41 So let's get short on time.

52:42 So let's go and talk about this FlexGen thing.

52:46 This is build web apps at the speed of thought.

52:49 Create UIs with Reflex framework with simple prompting.

52:53 This is in beta.

52:53 Like we're kind of released it on our Discord and we're going to do more releases.

52:58 But this version of it is similar to if you've seen like v0.dev from Vercel.

53:04 This is kind of, I'd say like a version of V04 Reflex where you can, it's a web editor.

53:08 You can enter your prompt.

53:09 It's going to live stream your output.

53:11 At the end of it, it's going to give you the code that you can copy into your app and you

53:15 can start adding a backend to it.

53:17 So I guess an important note is this is more for like your starter app, right?

53:20 Like when you're first starting your project and you want to get like a good starting point.

53:24 We'll fix that.

53:25 So don't worry about it.

53:26 It made such a nice one for me before.

53:28 Let's see.

53:28 Yeah.

53:29 The idea of this one is to be kind of a web editor to get your app kind of started building

53:33 out from.

53:34 And this is kind of just a version of V0 for Python.

53:37 So this is level one of what we're building with FlexGen.

53:40 But a more interesting thing that we're developing now internally and are hoping to release in

53:45 the next month is a local version of this.

53:47 So this is, this has no context of your existing code base.

53:50 It has no context of what you're building, right?

53:52 So you could ask it to build a little component, but a big issue with V0 and other of these web

53:56 developers is how do I actually integrate this into an existing app?

53:59 Like it's good at building brand new stuff, but how do I like update an existing app?

54:04 So on this front, we're building a local AI toolbar, which has a lot of these agentic

54:09 features around Reflex, but on your local.

54:11 So for example, the features we have there are you can click a button and say, when I click

54:16 the button, do this or click a text and say, change, like, you know, put a form under this

54:20 text.

54:20 And the big idea there, I think this is a good, good first start, but I think in the long

54:25 run, I'd see the toolbar as being this way where the AI and the developer kind of integrate

54:31 together with Python as a common language.

54:33 So for crazy stuff that you don't want to deal with, like make a form that works in mobile

54:37 view, et cetera.

54:38 The AI can handle a lot of this, but once it outputs, it's outputs code that you can actually

54:43 go understand and read.

54:44 Like it's not this obfuscated JavaScript or React code.

54:47 It's code that you can go edit by hand if you want, and you can easily hook up your own

54:51 state and data to it, right?

54:52 Which is a big other thing.

54:53 I think other frameworks miss, which is here's a great dashboard.

54:56 Great.

54:56 But it's all fake data.

54:57 Like how do I actually make it hook up with my clicks, hook up with my different data?

55:02 So that's a big part of what we're trying to bring to the local environment.

55:05 This thing will generate a visual look and feel thing and you actually go show the code.

55:09 That's all fake data.

55:10 Yeah.

55:11 And then it's fake.

55:11 Yeah.

55:11 Yeah.

55:11 Of course.

55:12 And then you can show the code and then now you can kind of copy the code, start using

55:15 it in Reflex.

55:16 And then with the toolbar, you'll then be able to make incremental upgrades on top of this

55:20 rather than starting from scratch.

55:21 And that will have like full context.

55:24 And on top of that, we're aiming to build a lot of stuff on top beyond, you know, just

55:29 prompting and updating.

55:30 Like there's a lot of improvements that we want to build on top of that as well.

55:33 All right.

55:33 Well, this is pretty neat.

55:34 I like it.

55:34 It definitely gives you some ideas for here's some possible layouts and so on.

55:39 And it gives you at least a little bit of an idea of what you might want to do and take

55:42 it and run with it.

55:43 So that's helpful.

55:44 Yeah.

55:44 I think some ideas we have in the future for the local are, you know, buttons that can,

55:48 you know, keep your same content, show you different variations, like auto style it, etc.

55:51 Like a lot of stuff that people don't want to deal with, but they're like, just give me

55:55 some ideas and how it could look and turn people more into like, you know, prompters and

55:59 selectors rather than implementers.

56:00 All right.

56:01 Let's close it out with the roadmap.

56:02 Where are we going?

56:03 So recently we just released Reflex 0.6 last month.

56:07 And right now we're going after 0.7.

56:10 So a big part of 0.7 is cleaning up a lot of our core components that we have, especially

56:15 for the features people use the most.

56:17 So the ones we're starting off with are like you can see here, AG grid support, which is

56:22 a big thing people asked.

56:23 And beyond that, just like very good support with tables, databases, and graphing to help

56:29 a lot of these internal apps and data science use cases.

56:32 Beyond that, like one really important thing for web frameworks that we're trying to build

56:36 is auth.

56:37 So built in auth.

56:37 So if anyone's ever used Django, you know, they have a really great kind of way that you

56:42 can plug any auth system in.

56:43 And that's often the first thing someone wants in a practical web app, right?

56:47 They're like, I have, especially a data app.

56:49 They're like, I have this great app, but I don't want anyone to be able to access it.

56:52 And we already have integrations with third party auth providers.

56:55 But we want to bring in just like first party auth where you can just add a click of a button.

56:59 Your website is going to have auth at this point.

57:01 A lot of these, the other stuff here is related to a lot of performance improvements that we're

57:07 going to make.

57:07 So one key feature of Reflex is the development experience.

57:11 So one part of that is code, but the other part is things like hot reload and how fast is

57:15 it for me to actually make iterations on what I'm doing?

57:18 So a lot of these other tickets are internal changes we're going to do to make it easier for

57:23 pretty much improve the hot reload times.

57:25 So we wanted people to improve their iteration speed a lot.

57:28 A lot of time people like pretty much all their time should be spent looking at actions and coding

57:32 and not waiting for anything.

57:33 And then one final thing related to kind of how we want to simplify the approach of UI and state

57:39 is we're implementing a system called CSR, which is kind of right now, I kind of mentioned there's this difference between compile time and runtime.

57:49 And there's certain things, your entire UI kind of needs to be known at compile time.

57:53 So you have to compile your code and that's what you get at runtime.

57:56 And what we're introducing is this idea of dynamic components, which are dynamics generated at runtime.

58:02 So this will enable a really cool use cases.

58:05 For example, you can have a chat bot that instead of just returning text all the time,

58:08 it could return components.

58:09 So it could return a graph, it could return a whole Reflex page.

58:12 And these could be components that you don't know upfront and are actually generated during runtime.

58:16 So it's going to help a lot in terms of flexibility and also in terms of, you know,

58:21 the ease of use in using Reflex, because since they're generated at runtime,

58:25 you can now use pure Python.

58:26 You don't have any limitations.

58:28 And there's a lot of advantages on the developer side as well.

58:31 Yeah, that's very cool.

58:32 So yeah, this is on the open source.

58:33 And we're also, like I mentioned, releasing some of our AI features.

58:36 And the biggest thing, though, is we're releasing our first version of our hosting service.

58:41 Our hosting service has been in beta for some time right now.

58:43 But along with all this, we're releasing our first kind of paid version of our hosting service.

58:48 And yeah, getting people on apps onboarded onto there is coming up.

58:53 So I'm really excited for that.

58:54 Framework looks really nice.

58:55 So sure to help a lot of people.

58:56 Awesome.

58:57 All right, guys.

58:57 One final parting thought from each of you.

59:00 Yeah, I can go.

59:01 I think one of the fun things that I've experienced with working here is that

59:05 even when I'm writing our docs, it's like some people have never interfaced with props before.

59:11 And so Reflex, in a way, is like a bridge to the web ecosystem.

59:15 So it's been fun thinking about what are the mental models that I can take in Python

59:20 to help explain things that are in web?

59:23 And it's like, how can we bring those in and then create pathways for people to start building apps?

59:28 Yeah, there's not a lot of event-driven stuff in Python, but so much of the web is event-driven callbacks and stuff.

59:34 Yeah.

59:34 I'm just excited about thinking about new kind of user interfaces, both in terms of like coding APIs and, you know, actual user interfaces

59:41 that people are going to be able to build upcoming.

59:44 I think the current web frameworks, you know, the Django's and Flask, they've been around for a long time.

59:48 And I think they have a lot of great stuff, but there's also a lot of new stuff that I think a next generation of web frameworks

59:53 could like add, you know, to accelerate a lot of work.

59:57 And I'm just excited about thinking of what are those features?

01:00:00 Like how can we accelerate while keeping the good stuff that's already been,

01:00:03 you know, discovered before?

01:00:04 And yeah, I think there's, especially now, like a lot more people are building,

01:00:08 a lot more people are becoming builders and sharing.

01:00:10 So I'm excited about like empowering all those people.

01:00:12 Yeah.

01:00:13 There's a lot of abstractions to like think through in terms of like, like how can we create guarantees that can enable someone to be successful in the long term,

01:00:21 especially when it comes to building apps that can serve like hopefully millions of people

01:00:26 and millions of traffic, but then also like being flexible enough that they can still start.

01:00:30 That's a challenge.

01:00:31 And you know, there's a lot of places that are struggling with those challenges or trying to solve them.

01:00:36 Look at AWS.

01:00:37 Just go to the services tab of AWS, right?

01:00:40 That place serves tons of people, but boy, is it complicated to look at the hundred or whatever services

01:00:47 and decide what you need and how they go together, right?

01:00:49 We have system initiative now though.

01:00:51 So that's going to be huge value add.

01:00:53 Yeah.

01:00:54 I think in one way, I think we're, we're on an effort to just like simplify this whole thing

01:00:58 and yeah, just make it really easy for more people to build.

01:01:00 Yeah.

01:01:01 It's a good mission.

01:01:01 All right.

01:01:02 Nikhil, Elvis, thanks for being on the show.

01:01:03 Talk to you guys later.

01:01:04 Yeah.

01:01:05 Thanks so much.

01:01:06 Bye.

01:01:06 Bye.

01:01:06 This has been another episode of Talk Python to Me.

01:01:10 Thank you to our sponsors.

01:01:12 Be sure to check out what they're offering.

01:01:14 It really helps support the show.

01:01:15 This episode is sponsored by Posit Connect from the makers of Shiny.

01:01:20 Publish, share, and deploy all of your data projects that you're creating using Python.

01:01:24 Streamlit, Dash, Shiny, Bokeh, FastAPI, Flask, Quarto, Reports, Dashboards, and APIs.

01:01:31 Posit Connect supports all of them.

01:01:33 Try Posit Connect for free by going to talkpython.fm/Posit, P-O-S-I-T.

01:01:39 And this episode is brought to you by Bluehost.

01:01:42 Do you need a website fast?

01:01:43 Get Bluehost.

01:01:44 Their AI builds your WordPress site in minutes and their built-in tools optimize your growth.

01:01:50 Don't wait.

01:01:51 Visit talkpython.fm/Bluehost to get started.

01:01:54 Want to level up your Python?

01:01:56 We have one of the largest catalogs of Python video courses over at Talk Python.

01:02:00 Our content ranges from true beginners to deeply advanced topics like memory and async.

01:02:05 And best of all, there's not a subscription in sight.

01:02:07 Check it out for yourself at training.talkpython.fm.

01:02:11 Be sure to subscribe to the show.

01:02:12 Open your favorite podcast app and search for Python.

01:02:15 We should be right at the top.

01:02:17 You can also find the iTunes feed at /itunes, the Google Play feed at /play,

01:02:22 and the direct RSS feed at /rss on talkpython.fm.

01:02:26 We're live streaming most of our recordings these days.

01:02:29 If you want to be part of the show and have your comments featured on the air,

01:02:32 be sure to subscribe to our YouTube channel at talkpython.fm/youtube.

01:02:37 This is your host, Michael Kennedy.

01:02:39 Thanks so much for listening.

01:02:40 I really appreciate it.

01:02:41 Now get out there and write some Python code.

01:02:43 I'll see you next time.