mirror of
https://github.com/tanrax/django-interactive-frameworks-benchmark
synced 2026-01-10 07:13:36 +01:00
Andros Fenollosa
0a9a32c0e4
Implemented the same alert system using 4 different Django technologies: - Django LiveView (WebSocket real-time) - Django SSR (traditional server-side rendering) - HTMX (AJAX partial updates) - Django Unicorn (reactive components) Added comprehensive performance testing suite: - Automated browser-based tests using Chrome DevTools - Performance metrics collection (response time, network overhead) - CSV data export for analysis - Matplotlib visualizations comparing all implementations Performance results show LiveView is fastest (9.35ms), followed by HTMX (16.48ms), Unicorn (26.76ms), and SSR (47.25ms). Updated README with detailed comparison tables, performance benchmarks, and reproduction instructions.
78 lines
2.5 KiB
HTML
78 lines
2.5 KiB
HTML
{% extends "alerts/ssr/base.html" %}
|
|
|
|
{% block title %}Home - Alert System SSR{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Alert System (SSR)</h1>
|
|
<h2 class="subtitle">Standard Django with full page reloads</h2>
|
|
|
|
<div class="table-container">
|
|
<table class="table is-fullwidth is-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for alert in alerts %}
|
|
<tr>
|
|
<td>{{ alert.id }}</td>
|
|
<td>
|
|
<span class="tag {% if alert.type == 'INFO' %}is-info{% elif alert.type == 'WARNING' %}is-warning{% else %}is-danger{% endif %}">
|
|
{{ alert.type }}
|
|
</span>
|
|
</td>
|
|
<td>{{ alert.description|truncatewords:10 }}</td>
|
|
<td>
|
|
<a href="{% url 'alerts:ssr_alert_detail' alert.id %}" class="button is-small is-info">
|
|
Details
|
|
</a>
|
|
<form method="post" action="{% url 'alerts:ssr_delete_alert' alert.id %}" style="display: inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="button is-small is-danger ml-1" onclick="return confirm('Are you sure?')">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="has-text-centered">No alerts yet</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<form method="post" action="{% url 'alerts:ssr_create_random_alert' %}" style="display: inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="button is-primary">
|
|
Add Random Alert
|
|
</button>
|
|
</form>
|
|
<a href="{% url 'alerts:ssr_create_alert' %}" class="button is-link ml-2">
|
|
New Alert Form
|
|
</a>
|
|
</div>
|
|
|
|
<div class="notification is-info is-light mt-5">
|
|
<p class="mb-3"><strong>Standard Django (SSR) Demo</strong></p>
|
|
<p class="mb-2">This version uses traditional Django patterns:</p>
|
|
<ul style="list-style: disc; margin-left: 1.5rem;">
|
|
<li><strong>Full page reloads:</strong> Every action triggers a complete page refresh</li>
|
|
<li><strong>Traditional forms:</strong> POST requests with redirects</li>
|
|
<li><strong>Django messages:</strong> Notifications shown after redirect</li>
|
|
<li><strong>No JavaScript framework:</strong> Pure server-side rendering</li>
|
|
<li><strong>No real-time updates:</strong> Must manually refresh to see changes from other users</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|