1
[Link] Al-Hubaishi
FastHTML
Advanced Computer Programming
DR. MOHAMMED AL-HUBAISHI
2
Key Differences between FastHTML and FastAPI
FastHTML FastAPI
► • Focus on UI development ► • API-first approach
► • Server-side rendering ► • JSON/REST focused
► • Component-based ► • Endpoint-based
► • Built-in templating ► • No built-in templating
► • Full-stack framework ► • Backend framework
[Link] Al-Hubaishi
3
Use Cases and Recommendations
When to use FastHTML: When to use FastAPI:
► • Full-stack web applications ► • REST API development
► • Server-rendered UIs ► • Microservices
► • Real-time applications ► • Backend services
► • Rapid prototyping ► • High-performance APIs
► • Traditional web apps ► • Mobile app backends
[Link] Al-Hubaishi
4
FastHTML Overview and Architecture
• FastHTML is a modern web framework for building dynamic web applications
• Core Features:
- Server-side HTML rendering
- Component-based architecture
- Built-in state management
- Real-time updates
• Architecture:
- Built on top of FastAPI
- Uses Jinja2 templating engine
- WebSocket support for real-time features
[Link] Al-Hubaishi
5
HTML Components in FastHTML
• Component-Based Structure: • Template Syntax:
- Reusable HTML components - Similar to Jinja2
- Template inheritance - Component interpolation
- Dynamic component rendering - Conditional rendering
• Features:
- Custom HTML tags
- Component lifecycle hooks
- Props and state management Jinja2 is a modern and designer-friendly templating engine for Python. It is
widely used for generating dynamic HTML, XML, or other markup formats
by combining templates with data.
[Link] Al-Hubaishi
6
JavaScript Integration in FastHTML
• Client-Side Capabilities: • Integration Methods:
- Interactive UI elements - Inline scripts
- Event handling - External JavaScript files
- AJAX requests - WebSocket connections
• JavaScript Features:
- Built-in reactive system
- State synchronization
- DOM manipulation
[Link] Al-Hubaishi
7
CSS Handling in FastHTML
• Styling Approaches:
• Asset Management:
- Scoped CSS
- Static file serving
- Global stylesheets
- CSS preprocessing
- Dynamic styling
- Style optimization
• CSS Features:
- Component-specific styles
- CSS modules support
- Style inheritance
[Link] Al-Hubaishi
8
Install Python
[Link] Al-Hubaishi
9
Install FastHTML
A Modern Python Web Framework for Rapid Development
[Link] Al-Hubaishi
Example of Basic Text Elements: 10
• H1 to H6 heading tags
Header example • Text formatting
[Link]
[Link] [Link]
[Link] Al-Hubaishi
11
Button Interaction
@[Link]("/"): This defines a route for the root (/). [Link]
[Link]
[Link] Al-Hubaishi
12
Creating the Application
app = FastHTML()
► FastHTML() initializes the web application. This is the main object that
handles routing and serving the application.
serve()
► serve(): Starts the web server and serves the application, making it
accessible in a browser.
[Link] Al-Hubaishi
13
What is HTMX?
HTMX is a lightweight JavaScript library that allows you to add AJAX
functionality to your web pages using HTML attributes. It simplifies the
process of making HTTP requests (GET, POST, etc.) and updating parts of
the page dynamically.
Common HTMX Attributes:
•
hx-get: Sends an HTTP GET request to the specified URL.
•
hx-post: Sends an HTTP POST request to the specified URL.
•
hx-target: Specifies the part of the page to update with the response.
•hx-swap: Defines how the response should be swapped into the target element.
[Link] Al-Hubaishi
14
Defining the First Route (/)
► @[Link]("/change"): This decorator defines a
route for the /change URL.
► change_text(): This function is executed when a
user visits the /change URL (or when the hx_get
request is triggered).
► P(“Click me!"): Returns a new paragraph element
with the text "You clicked the button!"
[Link] Al-Hubaishi
15
What is hx_get ?
► hx_get is an attribute used in conjunction with HTMX, a lightweight
JavaScript library that enables dynamic, interactive web applications
without requiring a full-page reload or heavy JavaScript frameworks.
► hx_get is an HTMX attribute that specifies a URL to send an HTTP GET
request to when the associated HTML element is triggered (e.g., clicked,
hovered, etc.).
► When the request is sent, the server's response (usually HTML or JSON) is
used to update part of the web page dynamically.
[Link] Al-Hubaishi
Forms and Input Elements
Form Components:
• Input fields
• Text areas
• Buttons
• Checkboxes
• Radio buttons
App Routing and Titled
fast_app(live=True) is a helper function that initializes the app object and a routing object (rt) in one step.
The live=True argument likely enables some form of live reloading or hot-reloading, which is useful during development.
App Routing
Feature (FastHTML) (fast_app())
Initialization Directly creates a FastHTML instance. Uses a helper function (fast_app()) to initialize.
Routing Uses @[Link]("/") for routing. Uses @rt('/') for routing.
Modularity Less modular; app and routing are combined. More modular; separates app and routing.
Use Case Simpler, for smaller applications. More flexible, for larger or modular apps.
[Link] Al-Hubaishi
18
19
Example 3: Navigation Bar
[Link]
HTML
[Link] Al-Hubaishi
20
Example 4: Dynamic Content Update
[Link] Al-Hubaishi
21
Example 5: Form Submission
[Link] Al-Hubaishi
22
Simple Counter
[Link] Al-Hubaishi
23
Image Display
[Link] Al-Hubaishi
24
List of Items
[Link] Al-Hubaishi
25
Conditional Rendering
[Link] Al-Hubaishi
26
CSS Styling
[Link] Al-Hubaishi
27
Loading Spinner
[Link] Al-Hubaishi
28
Modal Dialog
[Link] Al-Hubaishi
29
Countdown Timer
[Link] Al-Hubaishi
30
File Upload
[Link] Al-Hubaishi
31
JSON Response
[Link] Al-Hubaishi
32
Fetch API Integration
[Link] Al-Hubaishi
33
References
► [Link]
[Link] Al-Hubaishi
Link Layer: 6-34