00:00:00.000 --> 00:00:04.680

- Hello, everyone out there in the live stream.

00:00:04.680 --> 00:00:06.920

Thank you for being here live or watching it later

00:00:06.920 --> 00:00:07.760

on YouTube.

00:00:07.760 --> 00:00:09.000

If you've got comments, thoughts,

00:00:09.000 --> 00:00:10.080

throw them into the live chat.

00:00:10.080 --> 00:00:12.080

We'll make them part of the show.

00:00:12.080 --> 00:00:13.440

Carson, great to see you.

00:00:13.440 --> 00:00:15.280

You ready to kick this thing off?

00:00:15.280 --> 00:00:16.280

- Yes, I am.

00:00:16.280 --> 00:00:17.200

Let's do this.

00:00:17.200 --> 00:00:18.040

- All right.

00:00:18.040 --> 00:00:21.220

Carson, welcome to Talk Python To Me.

00:00:21.220 --> 00:00:23.040

- Thank you.

00:00:23.040 --> 00:00:23.880

I'm really happy to be here.

00:00:23.880 --> 00:00:26.760

I'm very thankful that you're willing to go a little bit

00:00:26.760 --> 00:00:29.520

outside the lines of a normal Python development

00:00:29.520 --> 00:00:32.300

to talk about something like HTMX.

00:00:32.300 --> 00:00:36.980

You know, I'm extremely happy to see HTMX getting picked up

00:00:36.980 --> 00:00:39.860

particularly by the Django community in Python.

00:00:39.860 --> 00:00:42.300

So I was very excited to come on here.

00:00:42.300 --> 00:00:44.180

- Yeah, I'm really excited to have you here.

00:00:44.180 --> 00:00:46.020

It is such a cool technology.

00:00:46.020 --> 00:00:50.000

And I think so often the JavaScript story is,

00:00:50.000 --> 00:00:53.540

oh, you're doing this other technology that you like.

00:00:53.540 --> 00:00:55.100

Let us tell you how you should drop that

00:00:55.100 --> 00:00:56.460

and go do JavaScript, right?

00:00:56.460 --> 00:00:58.260

And what I feel HTMX brings

00:00:58.260 --> 00:01:01.340

is whatever technology using Django, Flask,

00:01:01.340 --> 00:01:05.740

even some other thing like Rails or ASP.NET,

00:01:05.740 --> 00:01:08.580

whatever it is that you already got working really well,

00:01:08.580 --> 00:01:10.380

here's a really cool way to extend that.

00:01:10.380 --> 00:01:11.260

We're gonna dive into that.

00:01:11.260 --> 00:01:15.020

So I think, I've had people reach out and say,

00:01:15.020 --> 00:01:17.420

oh, I'm a JavaScript developer.

00:01:17.420 --> 00:01:19.340

Let me come onto your podcast

00:01:19.340 --> 00:01:20.820

and tell people about how cool Node is.

00:01:20.820 --> 00:01:23.180

I'm like, well, I'm not really sure that's the best topic

00:01:23.180 --> 00:01:25.380

for a Python-focused podcast,

00:01:25.380 --> 00:01:27.160

so I'm going to decline your invitation.

00:01:27.160 --> 00:01:30.920

But I was really happy to get a chance to have you on the show

00:01:30.920 --> 00:01:35.120

because I think there are many people out there

00:01:35.120 --> 00:01:39.840

who are nervous about JavaScript.

00:01:39.840 --> 00:01:41.440

They're not yet learning JavaScript.

00:01:41.440 --> 00:01:43.720

They know they need some interactivity,

00:01:43.720 --> 00:01:45.100

and they feel that means they have

00:01:45.100 --> 00:01:46.920

to abandon what they've already learned

00:01:46.920 --> 00:01:48.320

or what they actually love.

00:01:48.320 --> 00:01:49.740

And I don't think that's the case.

00:01:49.740 --> 00:01:51.160

And we're going to dive into that.

00:01:51.160 --> 00:01:54.160

So I think HTML plus Python Web Frameworks

00:01:54.160 --> 00:01:55.040

is a beautiful thing.

00:01:55.040 --> 00:01:56.640

But before we get into that, let's just

00:01:56.640 --> 00:01:57.500

start with your story.

00:01:57.500 --> 00:02:01.640

How'd you get into programming and yeah, start there.

00:02:01.640 --> 00:02:02.480

- Sure.

00:02:02.480 --> 00:02:05.200

Well, I've been programming for a very long time now.

00:02:05.200 --> 00:02:09.060

I started programming in college back in '94.

00:02:09.060 --> 00:02:11.940

Actually before that, I was programming on a Mac

00:02:11.940 --> 00:02:16.320

and HyperCard, which is a very old technology,

00:02:16.320 --> 00:02:17.160

which I love.

00:02:17.160 --> 00:02:18.520

- The web before the web.

00:02:18.520 --> 00:02:19.360

- Yeah.

00:02:19.360 --> 00:02:20.560

- It looked like a internet.

00:02:20.560 --> 00:02:21.400

- I can talk about that.

00:02:21.400 --> 00:02:23.680

If we talk about HyperScript at the end,

00:02:23.680 --> 00:02:26.440

maybe that'll come up again.

00:02:26.440 --> 00:02:28.600

But so I started programming in college

00:02:28.600 --> 00:02:31.440

and then very early on started programming for the web

00:02:31.440 --> 00:02:35.720

back when it was CGI scripts and Perl and stuff like that.

00:02:35.720 --> 00:02:37.620

And then I moved into Java

00:02:37.620 --> 00:02:40.040

during kind of the original dot-com boom

00:02:40.040 --> 00:02:42.040

and did a lot of the,

00:02:42.040 --> 00:02:44.080

was in the Java world for a long time

00:02:44.080 --> 00:02:46.680

and eventually moved into Rails.

00:02:46.680 --> 00:02:50.360

And so I've been programming in Rails now for the most part.

00:02:50.360 --> 00:02:53.120

I do, I program in a lot of different stuff though,

00:02:53.120 --> 00:02:54.640

mainly Java and Rails.

00:02:54.640 --> 00:02:56.440

And I have to admit to your audience,

00:02:56.440 --> 00:02:57.800

please don't judge me too hard,

00:02:57.800 --> 00:03:01.960

but I haven't used Python very much in anger.

00:03:01.960 --> 00:03:04.440

I've used it for local sort of sysadmin scripts,

00:03:04.440 --> 00:03:06.720

but not for a bunch of web development.

00:03:06.720 --> 00:03:10.760

So, but you know, Rails and Django share a lot of things

00:03:10.760 --> 00:03:12.120

in common with one another,

00:03:12.120 --> 00:03:15.960

and they're both great server side pieces of infrastructure.

00:03:15.960 --> 00:03:18.400

And I always felt like it was a shame

00:03:18.400 --> 00:03:20.000

that they were kind of being left,

00:03:20.000 --> 00:03:22.040

that they were being ignored to a large extent

00:03:22.040 --> 00:03:24.960

by the bigger JavaScript frameworks.

00:03:24.960 --> 00:03:26.920

One term that I try and coin,

00:03:26.920 --> 00:03:28.840

there's a lot of different stacks out there, right?

00:03:28.840 --> 00:03:31.240

Like the lamp stack and so on and so forth.

00:03:31.240 --> 00:03:34.880

And one joke stack that I've made up is the how stack,

00:03:34.880 --> 00:03:37.080

which is how H-O-W-L.

00:03:37.080 --> 00:03:38.960

- H-O-W-L.

00:03:38.960 --> 00:03:41.680

- So HTML on whatever you'd like.

00:03:41.680 --> 00:03:42.720

(laughs)

00:03:42.720 --> 00:03:44.440

So use HTML on the front end

00:03:44.440 --> 00:03:47.120

and use whatever you like on the back end.

00:03:47.120 --> 00:03:47.960

And that's a cool way.

00:03:47.960 --> 00:03:49.800

- And HTML is really empowering for this, right?

00:03:49.800 --> 00:03:51.880

I mean, that's like kind of the philosophy in some degree.

00:03:51.880 --> 00:03:56.320

I mean, you got a joke stack, but like literally that's sort of.

00:03:56.320 --> 00:03:57.760

It's a joke, but it's kind of true.

00:03:57.760 --> 00:04:02.800

So, yeah, yeah, absolutely.

00:04:02.800 --> 00:04:03.380

And how about now?

00:04:03.380 --> 00:04:04.320

What do you do day to day?

00:04:04.320 --> 00:04:09.480

so day to day I teach part-time at a university, and, my, my

00:04:09.480 --> 00:04:11.320

passion's actually programming languages.

00:04:11.320 --> 00:04:15.480

So I teach that as well as some other programs, classes at a university,

00:04:15.480 --> 00:04:19.840

uh, part-time, and, then I also, I work for a startup as well that I've

00:04:19.840 --> 00:04:21.000

I've been working on for a long time

00:04:21.000 --> 00:04:23.500

and which uses Intercooler JS,

00:04:23.500 --> 00:04:25.480

which is the predecessor to HTMX.

00:04:25.480 --> 00:04:28.100

The story with HTMX was that,

00:04:28.100 --> 00:04:30.040

well, we can go into it in a little bit if you'd like to,

00:04:30.040 --> 00:04:31.640

but that's what I'm doing now.

00:04:31.640 --> 00:04:33.320

So kind of a mix.

00:04:33.320 --> 00:04:35.520

I find myself doing a lot of different stuff.

00:04:35.520 --> 00:04:38.720

- Yeah, that sounds like a really nice mix.

00:04:38.720 --> 00:04:39.760

I love universities.

00:04:39.760 --> 00:04:41.600

I love university campuses.

00:04:41.600 --> 00:04:45.440

Maybe it's a slightly different story today with COVID,

00:04:45.440 --> 00:04:46.280

right?

00:04:46.280 --> 00:04:47.440

But I think we'll kind of get back to it.

00:04:47.440 --> 00:04:50.180

but some of my fondest memories are just, you know,

00:04:50.180 --> 00:04:52.700

spending time dreaming about ideas,

00:04:52.700 --> 00:04:54.940

walking around various campuses.

00:04:54.940 --> 00:04:56.300

- Yeah, it's a good energy.

00:04:56.300 --> 00:04:59.140

The kids aren't quite as beaten down

00:04:59.140 --> 00:05:02.500

as some of the, when you're in the corporate sector,

00:05:02.500 --> 00:05:04.660

I mean, you see a lot of these posts on Hacker News

00:05:04.660 --> 00:05:07.260

and so forth, just old guys, older guys and gals

00:05:07.260 --> 00:05:09.900

that are just sick of the grind.

00:05:09.900 --> 00:05:11.660

And so it's nice to be around younger kids

00:05:11.660 --> 00:05:14.540

that are maybe not quite as jaded

00:05:14.540 --> 00:05:18.920

and there's just an energy and it's a beautiful environment.

00:05:18.920 --> 00:05:22.140

- Yeah, it keeps you young being around that crowd,

00:05:22.140 --> 00:05:23.440

I do think that's awesome.

00:05:23.440 --> 00:05:27.360

So I wanna start our conversation

00:05:27.360 --> 00:05:28.900

by taking a little bit of a step back

00:05:28.900 --> 00:05:31.880

and I think we've circled around this a little bit,

00:05:31.880 --> 00:05:36.880

but when people are working in some technology,

00:05:36.880 --> 00:05:39.200

let's focus on Python,

00:05:39.200 --> 00:05:42.120

but it could be Rails like you had said before,

00:05:42.120 --> 00:05:44.600

and they've got something working really great.

00:05:44.600 --> 00:05:46.520

You know, you come to some part of the site

00:05:46.520 --> 00:05:48.240

and it's like, well, this should be really interactive.

00:05:48.240 --> 00:05:50.200

Like I wanna click on this thing

00:05:50.200 --> 00:05:51.840

and depending on what I select here,

00:05:51.840 --> 00:05:54.600

I want that dropdown to select that other thing.

00:05:54.600 --> 00:05:57.360

Or as I search here,

00:05:57.360 --> 00:05:59.600

I wanted to actually just fill it as I type.

00:05:59.600 --> 00:06:01.240

I don't wanna have to type in the search text,

00:06:01.240 --> 00:06:03.600

hit enter, see what comes back from the server.

00:06:03.600 --> 00:06:08.240

Oftentimes that is sold as a,

00:06:08.240 --> 00:06:10.340

well, your site is gonna be more responsive

00:06:10.340 --> 00:06:11.400

if it's running on the front end.

00:06:11.400 --> 00:06:13.080

And sometimes that's sort of true,

00:06:13.080 --> 00:06:15.820

but I feel like a well-designed website

00:06:15.820 --> 00:06:17.200

can be really responsive.

00:06:17.200 --> 00:06:19.520

Like I don't really feel like the speed thing is the story,

00:06:19.520 --> 00:06:22.460

but this interactive like navigation thing

00:06:22.460 --> 00:06:24.240

where it resets where it is,

00:06:24.240 --> 00:06:26.600

like that is a real challenge.

00:06:26.600 --> 00:06:30.960

And so often people get pulled down this path, right?

00:06:30.960 --> 00:06:33.040

Well, you wanna have that experience.

00:06:33.040 --> 00:06:35.560

So is it Vue.js or React?

00:06:35.560 --> 00:06:36.400

What are you gonna do?

00:06:36.400 --> 00:06:39.300

And then 10,000 lines later, front end code,

00:06:39.300 --> 00:06:41.600

you've winnowed down your back end

00:06:41.600 --> 00:06:46.140

to just a couple of simple HTTP API methods,

00:06:46.140 --> 00:06:50.340

then also something that serves up like a HTML static page.

00:06:50.340 --> 00:06:52.540

And then the question becomes,

00:06:52.540 --> 00:06:54.140

well, why are we doing Python?

00:06:54.140 --> 00:06:55.600

Or why are we doing Rails at all?

00:06:55.600 --> 00:06:57.660

Why don't we just do Node on the back end

00:06:57.660 --> 00:07:00.900

and we just have that as our entire stack?

00:07:00.900 --> 00:07:06.060

I feel a lot of times people either end up going down

00:07:06.060 --> 00:07:10.060

and throwing the baby out with the bathwater type of thing.

00:07:10.060 --> 00:07:13.060

You have this really cool server side ORM

00:07:13.060 --> 00:07:16.060

and a bunch of stuff happening that you really love

00:07:16.060 --> 00:07:20.060

from your server side, say Django or whatever.

00:07:20.060 --> 00:07:23.060

But you've kind of already gone,

00:07:23.060 --> 00:07:25.060

you're just so close, you're just like,

00:07:25.060 --> 00:07:27.060

"Well, we're already mostly writing JavaScript,

00:07:27.060 --> 00:07:28.060

let's just write JavaScript."

00:07:28.060 --> 00:07:30.060

So I think that's one side of the story,

00:07:30.060 --> 00:07:33.060

and I think there's real pressure on the other web frameworks,

00:07:33.060 --> 00:07:35.060

Python and other spaces for that.

00:07:35.060 --> 00:07:37.220

The other side is people who are not doing that,

00:07:37.220 --> 00:07:38.500

but they feel bad.

00:07:38.500 --> 00:07:40.780

They're like, I know I'm doing it wrong.

00:07:40.780 --> 00:07:42.820

I know I'm not using React.

00:07:42.820 --> 00:07:46.060

I'm just using Django, but this is all I know.

00:07:46.060 --> 00:07:48.960

And I just not ready, or we're just not a big enough team.

00:07:48.960 --> 00:07:52.340

How's that sit with you?

00:07:52.340 --> 00:07:53.180

What do you think?

00:07:53.180 --> 00:07:54.340

- Yeah, I didn't like that.

00:07:54.340 --> 00:07:55.180

That's exactly the pressure.

00:07:55.180 --> 00:07:56.460

- I don't like it either.

00:07:56.460 --> 00:07:58.340

That's why I'm so excited about HTMX.

00:07:58.340 --> 00:08:00.900

- That's exactly the pressure that I felt on Rails.

00:08:00.900 --> 00:08:02.780

I liked Rails.

00:08:02.780 --> 00:08:07.200

Ruby is a programming language I'm so-so on, it's fine.

00:08:07.200 --> 00:08:10.700

It's got its issues, but I liked Rails quite a bit.

00:08:10.700 --> 00:08:13.940

And I just disliked that pressure to adopt something else

00:08:13.940 --> 00:08:16.860

on the backend that came with using

00:08:16.860 --> 00:08:19.520

these more complex JavaScript front ends.

00:08:19.520 --> 00:08:22.980

And like I said earlier, it was just a shame.

00:08:22.980 --> 00:08:25.740

And the other aspect of that is when you go to that model,

00:08:25.740 --> 00:08:28.860

when you go to the Vue.js or the React model,

00:08:28.860 --> 00:08:31.780

your backend becomes pretty dumb, right?

00:08:31.780 --> 00:08:34.020

It's just producing JSON.

00:08:34.020 --> 00:08:36.860

There's validation code and yeah,

00:08:36.860 --> 00:08:39.620

your validation code can now live on both sides,

00:08:39.620 --> 00:08:41.460

which is important because the front end

00:08:41.460 --> 00:08:43.220

is not a trusted computing environment.

00:08:43.220 --> 00:08:44.980

So you can't trust validations that are done

00:08:44.980 --> 00:08:45.800

on the front end.

00:08:45.800 --> 00:08:46.640

You always have to redo them.

00:08:46.640 --> 00:08:48.740

- You just redo them again anyway, that's right.

00:08:48.740 --> 00:08:51.960

- Yeah, and so there's just all these kind of,

00:08:51.960 --> 00:08:55.780

I don't think they're complete arguments,

00:08:55.780 --> 00:09:00.500

but it's just with the grain to start pushing JavaScript

00:09:00.500 --> 00:09:03.500

onto the backend, especially once node really came out

00:09:03.500 --> 00:09:06.000

and gave JavaScript a good runtime on the backend.

00:09:06.000 --> 00:09:08.460

And it's not a good thing.

00:09:08.460 --> 00:09:11.400

And the reality is, is I hope we can demonstrate

00:09:11.400 --> 00:09:15.340

with HTMX today that a lot of very good UI

00:09:15.340 --> 00:09:18.920

or slash UX patterns from the web can be achieved

00:09:18.920 --> 00:09:23.660

using just HTML, using the original HTML model,

00:09:23.660 --> 00:09:26.980

the original RESTful model for the web.

00:09:26.980 --> 00:09:28.820

I know that's kind of a fancy term,

00:09:28.820 --> 00:09:31.140

but just using the original model of the web,

00:09:31.140 --> 00:09:34.420

just kind of generalizing what we're already familiar with

00:09:34.420 --> 00:09:37.600

in our day-to-day development, links and forms.

00:09:37.600 --> 00:09:40.620

And so that's where HTMX is coming from,

00:09:40.620 --> 00:09:44.100

is this idea, wait a second, let's take a step back.

00:09:44.100 --> 00:09:46.460

We don't need a super complicated front end.

00:09:46.460 --> 00:09:47.300

We just need to-

00:09:47.300 --> 00:09:50.540

- We don't have to push it all down to the front end.

00:09:50.540 --> 00:09:51.780

We only need to push a little bit

00:09:51.780 --> 00:09:53.860

of that interactivity down, right?

00:09:53.860 --> 00:09:54.700

- That's right.

00:09:54.700 --> 00:09:58.780

And that interactivity can be defined in terms

00:09:58.780 --> 00:10:02.700

that are very familiar to us from normal HTML.

00:10:02.700 --> 00:10:07.700

So let's just take HTML and try and push it as a hypermedia