3.8 KiB
Django Interactive Frameworks Benchmark
Performance comparison of Django's main interactive frameworks. This project implements the same alert system using five different approaches: Django LiveView (WebSocket), traditional SSR, django-htmx (AJAX), Django Unicorn (reactive components), and Django Reactor (Phoenix LiveView style). The goal is to measure and compare their real-world performance, network overhead, and user experience characteristics.
Technology Comparison
| Feature | LiveView (/) |
SSR (/ssr/) |
django-htmx (/htmx/) |
Unicorn (/unicorn/) |
Reactor (/reactor/) |
|---|---|---|---|---|---|
| Transport | WebSocket | HTTP | AJAX | AJAX | WebSocket |
| Update Type | Real-time | Full reload | Partial | Reactive | Real-time |
| Multi-user | ✅ Broadcast | ❌ | ❌ | ❌ | ✅ Broadcast |
| Infrastructure | Redis + Channels | Django only | Django only | Django only | Redis + Channels |
Results Summary and Performance Conclusions
You can see the results on my blog
Run your own tests: Quick Start
docker compose up --build
Access at http://localhost:8000/ - Navigation bar switches between implementations.
Implementation Details
| Aspect | Implementation |
|---|---|
| django-htmx CSRF | <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> |
| Theme | <html data-theme="light"> (Bulma CSS) |
| Templates | templates/alerts/{ssr,htmx,unicorn}/ |
| Components | alerts/components/alert_list.py (Unicorn) |
| Views | All in alerts/views.py |
| Reactor | alerts/reactor_components/live.py |
Dependencies
- django-liveview - WebSocket reactive framework
- django-htmx
==1.22.0- HTMX middleware for Django - django-unicorn
==0.62.0- Reactive components - django-reactor
==5.3.0b0- Phoenix LiveView for Django - Django Channels + Redis - WebSocket infrastructure
- Daphne - ASGI server
Technology Documentation
- Django LiveView - Official Django LiveView documentation
- HTMX - Official HTMX documentation and examples
- Django Unicorn - Complete Unicorn documentation
- Django Reactor - Phoenix LiveView but for Django
- Django - Django official documentation (for SSR implementation)
Performance Testing
Comprehensive performance tests were conducted across all implementations to measure response times for the "Create Alert" action. Tests were performed with 10 iterations per implementation using Chrome DevTools and the Performance API.
Troubleshooting
| Issue | Solution |
|---|---|
| Templates not updating | docker compose restart web |
| django-htmx 403 CSRF | Check hx-headers in <body> tag |
| Dark tables | Add data-theme="light" to <html> |
Features
| Feature | LiveView | SSR | django-htmx | Unicorn | Reactor |
|---|---|---|---|---|---|
| Create alerts | ✅ | ✅ | ✅ | ✅ | ✅ |
| View details | ✅ | ✅ | ✅ | ✅ | ✅ |
| Delete | ✅ | ✅ | ✅ | ✅ | ✅ |
| Notifications | ✅ | ✅ | ✅ | ✅ | ✅ |
| Modals | ✅ | ❌ | ✅ | ✅ | ✅ |
| Form validation | ✅ | ✅ | ✅ | ✅ | ✅ |
| No page reload | ✅ | ❌ | ✅ | ✅ | ✅ |
MIT License - Reference implementation for Django web technologies