Intro to FastHTML
00:00:00.780 | - Hi, I'm Jeremy Howan.
00:00:02.660 | - Hi, I'm Jonath.
00:00:04.160 | - Hi, I'm Nate.
00:00:05.640 | - We wanted to give you a quick introduction
00:00:07.320 | here to FastHTML.
00:00:08.560 | Have a look at some of these things that we made.
00:00:11.200 | - So this first example is a chatbot that I made
00:00:13.580 | to interact with ChatGDT.
00:00:16.200 | You may need to try out a styling library
00:00:18.320 | for these beautiful looking chat bubbles.
00:00:20.720 | And this is the entire source code.
00:00:22.160 | There's no other components to it.
00:00:23.920 | - And this is an app that I made
00:00:27.320 | based off of Conway's GamerLife
00:00:29.880 | that allows multiple users
00:00:32.880 | to be able to play the game of life.
00:00:35.240 | And the backend, it uses WebSockets.
00:00:38.200 | And as you can see, the code is quite small.
00:00:41.160 | - Here's my little demo.
00:00:43.040 | It's maybe the most uninteresting one in some ways,
00:00:45.640 | but I like it 'cause it's an example of like everything.
00:00:48.040 | It's markdown, it's drag and drop.
00:00:51.280 | It's a complete custom login system.
00:00:53.520 | And that entire thing also fits onto a single screen
00:00:57.600 | of code written from scratch.
00:00:59.840 | - Other people are making cool stuff with this as well.
00:01:02.080 | If you know a bit of web programming already,
00:01:04.160 | you'll get started real fast.
00:01:06.000 | Legendary author and web programmer, Daniel Roy-Greenfield,
00:01:09.600 | said he would like to give it a try.
00:01:11.520 | And within 45 minutes of starting out with FastHTML,
00:01:14.240 | he sent me a screenshot and said,
00:01:15.360 | "Look, I've just created a complete blog system."
00:01:18.520 | There's lots of great ways
00:01:19.640 | to create web applications nowadays.
00:01:22.000 | Data scientists in particular
00:01:23.480 | love these rapid dashboarding apps
00:01:26.400 | like Radio and Streamlet.
00:01:29.600 | What we've heard though, and we found ourselves,
00:01:31.640 | is that when you're ready to go to the next level
00:01:33.520 | beyond your dashboard or proof of concept,
00:01:36.160 | things like this require rewriting from scratch
00:01:38.480 | in a totally different framework
00:01:39.800 | and learning a whole lot of new skills.
00:01:41.760 | Lots of people have created lots of fantastic
00:01:45.240 | web applications in Django.
00:01:47.000 | For example, Instagram is written in Django.
00:01:50.120 | But it's pretty complicated.
00:01:52.200 | This is the getting started,
00:01:53.640 | setting up a new project example in less than five minutes.
00:01:57.880 | One great way to write web apps
00:01:59.800 | is with something like FastAPI on the backend
00:02:02.680 | and something like React or Svelte or Vue on the front end.
00:02:06.960 | You can create nice, sophisticated apps with this,
00:02:10.160 | but there's a lot to learn,
00:02:12.720 | particularly if you don't know JavaScript
00:02:15.440 | or TypeScript already,
00:02:16.520 | and then you've got a few other things
00:02:18.160 | to learn about as well.
00:02:20.360 | I've been writing web applications for years.
00:02:22.920 | I created the framework that FastMail is built on.
00:02:26.200 | I started it over 25 years ago now.
00:02:29.160 | It's had millions of users.
00:02:31.000 | A lot of what I learned from that is now built into this.
00:02:34.080 | And ever since then,
00:02:35.040 | I've been looking for better and better ways
00:02:36.640 | to create web frameworks and to create web applications.
00:02:39.920 | I have hundreds of thousands of views
00:02:41.800 | of my tutorials on Flask, AngularJS, C#, and so forth.
00:02:46.800 | With FastHTML, this is by far the most excited
00:02:50.560 | I've ever been about web programming.
00:02:53.240 | I think it makes it so much easier,
00:02:55.840 | and I can't wait to see what you can do with it.
00:02:59.280 | So we're gonna show you how to get started
00:03:01.480 | with building that to-do web application
00:03:04.600 | to create this source code that you see here.
00:03:06.880 | - Okay, so Jeremy, where's the rest of this?
00:03:09.400 | Can you show us how to create the scaffolding
00:03:11.280 | and templates that go along with this app?
00:03:13.600 | - There is no create scaffolding.
00:03:15.120 | There is no create FastHTML app.
00:03:17.240 | You just start typing into a window.
00:03:19.160 | That's all you need, one Python file.
00:03:21.040 | - Wait, what about the front-end JavaScript code?
00:03:26.120 | - There is no front-end JavaScript code.
00:03:27.760 | You just type into one Python file.
00:03:30.720 | Let's start typing the Python file right now.
00:03:33.000 | Jono, take it away.
00:03:34.560 | - Fantastic.
00:03:36.280 | Okay, so we're in a single Python file,
00:03:38.640 | and the app here is going to define
00:03:40.400 | some different routes that we can hit.
00:03:42.280 | So you could have different routes
00:03:43.480 | for different pages, for example.
00:03:45.480 | And here we're displaying some code and running the app.
00:03:48.920 | This has got something like live reloading
00:03:51.040 | switched on by default,
00:03:51.880 | so you can see all the changes that you make in real time.
00:03:55.160 | So whenever we're building an app,
00:03:56.080 | we want to be able to show some content,
00:03:58.120 | but we don't have to type the HTML ourselves.
00:03:59.920 | We use templates.
00:04:00.960 | And so FastHTML has all of these built-in tags
00:04:03.280 | that we can use to construct
00:04:04.840 | the HTML programmatically in Python.
00:04:07.440 | Here we're creating a to-do list,
00:04:08.760 | which is the list of multiple items,
00:04:11.320 | and we're seeing if we can display that component.
00:04:14.000 | So we have this idea of nested components
00:04:16.200 | starting to merge here.
00:04:17.600 | We can create these with Python list comprehensions
00:04:19.880 | and so on, and start to build up the UI.
00:04:23.120 | So let's add a form that lets us specify new to-dos.
00:04:26.520 | And then we need a way for these UI elements
00:04:28.680 | to interact with the app.
00:04:29.560 | So rather than going to whole new pages,
00:04:31.520 | what we're going to do here is do something called HTMX,
00:04:33.760 | which plays really nicely with FastHTML.
00:04:36.160 | We trigger an event, send a message to our server,
00:04:38.680 | and then we're going to have a new route
00:04:40.080 | that responds to that, in this case, post request,
00:04:42.800 | asking us to add a new to-do.
00:04:46.240 | HTMX also lets you, doesn't refresh the whole page,
00:04:48.720 | it just updates specific parts of it,
00:04:50.080 | so that's why we have the to-do list section here.
00:04:53.000 | And we're adding to the end of it any new to-dos
00:04:54.880 | that are added by that button.
00:04:56.600 | - All right, so let's add some persistency to this app.
00:05:02.240 | So you can use any sort of database,
00:05:05.440 | but already built into FastHTML is SQLite.
00:05:09.720 | So in our Fast app, we can set where our database
00:05:13.360 | is going to be stored and some of the fields,
00:05:16.440 | as well as which one's going to be the private primary key.
00:05:21.040 | We can update our TD list to go ahead
00:05:24.200 | and go through all of the to-dos in our database.
00:05:27.560 | If we refresh that, we can see that it gets returned,
00:05:31.920 | but it doesn't get added to the database,
00:05:33.640 | so let's go ahead and insert that.
00:05:35.960 | Now, as you can see, it's getting added.
00:05:38.240 | We don't really render the returned post request,
00:05:43.560 | HTML, so let's go ahead and add a little rendering function
00:05:46.880 | that makes it a little bit prettier.
00:05:48.320 | We can make this for loop comprehension
00:05:51.360 | a little bit nicer, and as you can see,
00:05:53.480 | now we have a very beautiful rendering of the to-dos.
00:05:58.480 | - So from here, really, it's just about adding
00:06:02.080 | all the features you've won.
00:06:03.120 | You've actually, we've shown you
00:06:04.280 | all the key concepts you need to know.
00:06:06.200 | You know that you can use any HTML tag,
00:06:09.000 | but you can now create them as Python functions.
00:06:11.280 | You can compose them together to create component libraries
00:06:14.120 | for other people to use.
00:06:15.480 | You can use any CSS frameworks
00:06:17.800 | or Web Component frameworks you like.
00:06:19.960 | So here, let's go ahead and add a delete link as well.
00:06:22.520 | So when we click on the delete link,
00:06:24.080 | it's gonna call delete on the server.
00:06:26.080 | So we create a function called delete
00:06:28.360 | and just go to dos.delete.
00:06:30.560 | We'll delete the ID that we're being passed,
00:06:33.280 | and now we've got delete tags.
00:06:34.720 | There they are.
00:06:35.560 | They're done.
00:06:37.120 | You can add anything from the entirety
00:06:39.120 | of the foundations of the web.
00:06:40.560 | So for example, you could add authentication
00:06:43.600 | by taking advantage of basic auth in your web browser.
00:06:47.840 | So now we've got an authenticated web app.
00:06:50.520 | We can add a logout by using
00:06:52.040 | your browser's logout functionality.
00:06:54.160 | So all of the functionality of the web
00:06:56.080 | is here for you to use.
00:06:58.680 | All of the components that exist,
00:07:01.000 | all of the web frameworks that exist,
00:07:02.920 | all of the CSS libraries that exist,
00:07:05.880 | they're now for you.
00:07:07.080 | And you can deploy it with a single line of code
00:07:10.480 | and within a minute or so, it's done.
00:07:14.080 | - So we've all been having a ton of fun writing examples.
00:07:16.960 | Do go check out our docs.
00:07:18.000 | We're gonna keep adding more and more examples
00:07:19.720 | and documentation as we go.
00:07:21.080 | And I think you'll be able to get something there
00:07:22.760 | that you can get started with,
00:07:24.560 | and we're really looking forward to seeing what you build.
00:07:27.040 | (upbeat music)