From React to a Django+HTMX based stack

Episode Deep Dive

Guests introduction and background

Sheena O’Connell is a seasoned software developer who has spent significant time in the Python space. She previously worked at a nonprofit training provider in South Africa, where she and her team built a learning management system (LMS) for training junior developers. Initially, they used a Django back end with a React+Redux front end. Over time, Sheena led a successful migration to a pure Django + HTMX stack, drastically simplifying the application and opening the door for more developers (especially junior ones) to contribute. She has spoken at conferences such as DjangoCon US and PyCon South Africa and is especially passionate about Python education and community.

What to Know If You’re New to Python

• Basic understanding of how web frameworks (like Django) can create dynamic websites will help you follow along.
• Familiarity with HTML is important, as HTMX extends HTML with minimal JavaScript overhead.
• Knowing that Python web apps often rely on libraries (Django, Flask, etc.) helps frame this conversation.
• You’ll hear about combining server-rendered templates with small front-end enhancements (no big SPA or React setup required).

Key points and takeaways

1. Why They Moved from React to HTMX

   • The original setup required working across multiple contexts: Django on the server and React/Redux/Saga on the client. This split slowed down development, especially for junior devs.
   • HTMX allowed them to return to a single, cohesive codebase with minimal JavaScript.
   • Links and tools:
     • HTMX

2. Maintaining Productivity and Simplicity

   • Simpler architecture made junior developers more productive because they could stay in Python and HTML rather than juggling multiple frameworks.
   • React’s complexity (Redux, side-effect libraries, etc.) led to a steeper learning curve, while HTMX made daily coding tasks more approachable.
   • Links and tools:
     • Django
     • Alpine.js (mentioned as a lightweight companion for client-side interactions)

3. HTMX Attributes and Server-Rendered HTML

   • HTMX extends standard HTML tags with attributes like hx-get, hx-post, and swapping strategies for partial page updates.
   • Instead of exchanging JSON and reassembling HTML on the client, the server returns HTML fragments which HTMX seamlessly integrates into the existing page.
   • Links and tools:
     • HTMX Docs / Examples

4. Django Template Organization

   • HTMX often relies on partial HTML templates; code can become “spaghetti” if not carefully structured.
   • Carlton Gibson’s django-template-partials helps organize partials in a more maintainable way.
   • Links and tools:
     • django-template-partials

5. How HTMX Scales with Larger Apps

   • While some worry about scalability, Sheena found HTMX scales well for sophisticated features (like Kanban boards and user permissions).
   • The biggest hurdle was setting up best practices for partial templates and minimal duplication. With that solved, the team was able to iterate quickly.

6. Enabling Junior Developers

   • A central theme: Simplifying the stack made it far easier to onboard new developers.
   • Sheena noted junior devs were more engaged and able to contribute meaningful features without deep JavaScript knowledge.
   • Quote from Sheena:

     “Everyone was suddenly able to do stuff that was meaningful… This HTMX thing is way better.”

7. Playwright for Testing

   • They discussed the importance of testing interactive features with an end-to-end tool like Playwright or Selenium.
   • Testing strategies can be lighter than full-blown React tests because much of the logic sits server-side, but certain user flows still benefit from automated browser checks.

8. Sheena’s Education and Workshop Focus

   • Sheena has run workshops on building CRUD apps with Django + HTMX, including one at DjangoCon US.
   • A key part of her mission is providing high-support environments (small groups, expert-led) so that learners truly understand the tools.
   • Links and tools:
     • DjangoCon US (example of where she presented)

9. Empowering Teachers and Learners

   • Beyond code, Sheena highlighted teaching concepts like mastery-based learning, spaced repetition, and feedback loops.
   • When educators can track student progress in real time (e.g., through a Kanban board), they quickly spot and improve bottlenecks.

10. Quotes and Stories

• On rewriting the LMS:

  “Usually a big rewrite raises red flags, but here, simplifying the stack to just Django and HTMX absolutely paid off.”

• On adopting a single language approach:

  “If you can just stay in Python and HTML, you can solve real problems without the overhead of switching contexts.”

Learning resources

• HTMX + Django: Modern Python Web Apps, Hold the JavaScript : HTMX + Django course on Talk Python Training: Ideal if you want to take a deeper dive into building interactive Django apps without heavy front-end frameworks.

• HTMX + Flask
  HTMX + Flask course on Talk Python Training: If you’re in the Flask ecosystem, a similar approach applies.

• Django’s Official Documentation for all things Django, including best practices for templates and server-side rendering.

• Alpine.js Docs for lightweight reactivity that pairs well with HTMX.

Overall Takeaway

Switching from a React-based front end to Django + HTMX had a profound impact on development speed, code maintainability, and the ability for junior developers to actively contribute. By simplifying both the tech stack and the cognitive overhead, Sheena’s team built feature-rich applications with far less complexity. Whether you are a solo developer or part of a growing team, combining Python, Django, and HTMX can strike a powerful balance between simplicity and interactivity for web apps that truly get the job done.