HTMX + Flask: Modern Python Web Apps, Hold the JavaScript
htmx is one of the hottest properties in web development today, and for good reason. This framework, along with the libraries and techniques introduced in this course, will have you writing the best Python web apps you've ever written: clean, fast, and interactive without all that frontend overhead.
More
If you are a Python web developer that has wanted to build more dynamic, interactive apps, but just don't want to (or can't) write a significant portion of your app in a rich frontend JavaScript framework, you'll absolutely love htmx. This library lets you write Python code you love and still add that clientside interactive aspect.
What's this course about and how is it different?
htmx is a very compelling technology. It's one of the first legitimate libraries that delivers on the promise of dynamic, interactive web applications without complex JavaScript. htmx allows us to write server-side code in any language (Python in our case) and, through a few simple HTML attributes, bring our pages to life.
This is the only course (that we're aware of) that shows you the full lifecycle of building Python and Flask-based applications centered around htmx. Unlike basic tutorials where you'll find only just quick coverage of a simple feature, we take a full-fledged web app and extend it by adding three real-world features all building upon htmx.
Moreover, we show you the right way to use htmx with Flask and Python. The resulting code is incredibly clean and would impress almost any professional web developer.
What will we build
In the course, we will add a bunch of htmx-powered features to an existing application. This app, called Video Collector, is a beautiful Flask web app that allows us to save, explore, search, and play videos we've collected from YouTube.
What topics are covered
In this course, you will:
- See how htmx differs from common JavaScript front-end frameworks such as Vue and React.
- Understand the server-side exchange enabled by htmx attributes (e.g. ).
- Add click to edit to an existing data-driven Flask application.
- Learn about the package to refactor our jinja2 templates (with or without htmx).
- Add deep linking to our dynamic web application, allowing us to share links into interactive segments.
- Add active search to an existing data-driven Flask application.
- Implement browser history for htmx actions (allowing back and forth navigation).
- Add infinite scroll to our app.
- Distinguish between full page requests and partial htmx requests within a single view method in Flask.
- And lots more
Watch Online HTMX + Flask: Modern Python Web Apps, Hold the JavaScript
| # | Title | Duration |
|---|---|---|
| 1 | Introduction to the course | 02:29 |
| 2 | What is htmx? | 05:04 |
| 3 | The HOWL stack | 01:36 |
| 4 | The big ideas covered in this course | 03:04 |
| 5 | Student prerequisites | 01:22 |
| 6 | Vue, React, and htmx: A quick comparison | 02:52 |
| 7 | Git the source code | 00:55 |
| 8 | Meet your instructor: Michael Kennedy | 01:10 |
| 9 | A tour of htmx examples | 01:09 |
| 10 | Example: Infinite scroll | 02:41 |
| 11 | Example: Active search | 03:29 |
| 12 | Example: Lazy loading | 02:37 |
| 13 | Example: Bulk update | 03:18 |
| 14 | Introducing our web app: Video Collector | 01:27 |
| 15 | Setting up and running the Flask app | 03:38 |
| 16 | Key elements of code organization | 05:50 |
| 17 | Concept: Pydantic models | 02:04 |
| 18 | Concept: View models | 02:18 |
| 19 | Concept: Code organization | 01:32 |
| 20 | Our first feature: Click to edit | 00:50 |
| 21 | Introduction to building the non-htmx form | 00:57 |
| 22 | Adding the HTML for the add video form | 06:35 |
| 23 | 'Add video' view methods | 07:10 |
| 24 | Creating the new video in the database | 03:36 |
| 25 | Installing htmx | 02:27 |
| 26 | A clean, enable add button, without the form | 04:56 |
| 27 | Server returns the form on-demand | 03:42 |
| 28 | Changing our mind, adding a cancel option | 05:59 |
| 29 | Concept: Showing the edit UI | 02:05 |
| 30 | Concept: Creating or canceling the video creation | 01:51 |
| 31 | Concept: Processing the form submission on the server | 01:37 |
| 32 | What do you mean by partials? | 01:49 |
| 33 | The jinja-partials package | 02:06 |
| 34 | Partials: A more realistic example | 01:50 |
| 35 | Installing jinja-partials | 03:49 |
| 36 | Removing duplication of add video HTML | 03:54 |
| 37 | Concept: Using partials | 01:25 |
| 38 | Introducing active search | 00:48 |
| 39 | Where we're headed with active search | 02:01 |
| 40 | Create the search page skeleton | 04:06 |
| 41 | Search text is better as an optional URL element | 01:29 |
| 42 | Performing the server-side search | 04:15 |
| 43 | HTML input controls for search | 02:29 |
| 44 | Searching as they type with htmx | 07:10 |
| 45 | Rendering the videos found in search | 04:29 |
| 46 | Search history in the address bar | 02:21 |
| 47 | Deep linking to search results | 04:01 |
| 48 | Concept: Triggering the search with htmx | 01:14 |
| 49 | Concept: Is a request htmx originated? | 01:24 |
| 50 | Concept: Supporting deep linking | 02:02 |
| 51 | Introducing infinite scroll | 00:53 |
| 52 | Popular sites using infinite scroll | 01:53 |
| 53 | Reorganizing the feed HTML for infinite scrol | 04:18 |
| 54 | Returning a limited set of videos | 03:23 |
| 55 | The htmx scroll trigger | 05:23 |
| 56 | Implementing more videos on the server | 03:54 |
| 57 | Concept: Triggering another page as you scroll | 02:24 |
| 58 | HOWL for the finish line | 01:59 |
| 59 | Examples first, docs second | 01:04 |
| 60 | Core elements of the starter Flask app | 03:14 |
| 61 | Click to edit functionality | 01:54 |
| 62 | Jinja-partials package | 02:11 |
| 63 | Active search with htmx | 02:16 |
| 64 | Partial or full response? | 01:59 |
| 65 | Infinite scroll with htmx | 02:19 |
| 66 | Thank you and goodbye | 00:59 |
Similar courses to HTMX + Flask: Modern Python Web Apps, Hold the JavaScript
The Complete Python Programming Course for Beginners
Python Data Analysis & Visualization Masterclass
The Software Designer Mindset (COMPLETE)
Modern APIs with FastAPI and Python Course
Async Techniques and Examples in Python
Secure APIs with FastAPI and the Microsoft Identity Platform
Python 3: Deep Dive (Part 1 - Functional)
Web Developer Bootcamp with Flask and Python in 2022
Create UberEats with Python/Django and Swift 3
