DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!

Summary

David Guillo from France shares his experience replacing React with HTMX in a SaaS product at Context. He highlights the benefits of using HTMX for creating rich, responsive UIs without the need for complex JavaScript frameworks like React. Through a demo, he illustrates how HTMX simplifies state management and UI component creation within Django, leading to faster performance, reduced code complexity, and improved team agility. David emphasizes that HTMX offers a viable alternative for teams seeking a more streamlined approach to frontend development while maintaining product agility.

Takeaways

• 🌐 David Guillo, a French web industry veteran, shares his experience with replacing React in a SaaS product with htmx.
• 🚀 htmx is a JavaScript library that enhances web interfaces by listening to events, making AJAX calls, and updating the DOM without full page reloads.
• 🛠️ Guillo challenges the common belief that a rich user experience on the web requires a JavaScript framework like React, suggesting htmx as a viable alternative.
• 🔍 He demonstrates that web components can be achieved on the server side, using a library within Django templating, to create isolated, reusable UI elements.
• 🎨 The speaker showcases a sophisticated UI in their product, emphasizing the importance of smooth animations, quick rendering, and user interaction without page reloads.
• 📈 Guillo presents a case study where htmx improved performance, reduced memory usage, and increased team agility compared to their previous React implementation.
• 📝 The switch to htmx resulted in a cleaner, lighter DOM structure, allowing for better performance and more efficient handling of large datasets.
• 👨‍💻 The team at Context transitioned from a back-end focused approach to full-stack development, improving collaboration and feature development speed.
• 📉 The transition also led to a significant reduction in codebase size, with 15,000 lines of code deleted, streamlining the development process.
• 🤔 Guillo encourages developers to consider their team's needs and the nature of front-end development when choosing between htmx and other JavaScript frameworks.
• 🌟 Context is hiring, and the presentation concludes with an invitation to connect for potential job opportunities.

Q & A

Who is the speaker, and what is their background?

The speaker is David Guillo, from France. He has been in the web industry for 15 years and has been a Django developer for 5 years. He works at a company called Context.

What is the main topic of the presentation?

The main topic is an experiment conducted by the speaker's company to replace React with HTMX in a SaaS product that was already in production.

What are the key goals of the presentation?

The goals are to break some common misbeliefs about front-end development, showcase the UI built with HTMX, share code examples, tell the story of the experiment, and provide thoughts and learnings from the experience.

What is HTMX, and how does it work?

HTMX is a JavaScript library that listens to events and triggers Ajax calls to fetch HTML fragments and insert them into the DOM. It allows developers to react to application state changes without reloading the entire page.

How does HTMX compare to using a JavaScript framework like React for rich UI development?

HTMX provides a simpler alternative by allowing server-side management of application state, avoiding the need for client-side state duplication, and enabling rich UI elements without heavy JavaScript frameworks like React.

Can you explain how Django components are used in this project?

Django components are used to create isolated, reusable web components that bring together HTML templates, CSS, and JavaScript. These components can be customized and reused throughout the application, providing a way to build rich UI elements on the server side.

What were some key challenges faced with the React-based approach?

The React-based approach led to slow UI performance, deep DOM trees, low team velocity, and poor code quality on the front-end side. The complexity of maintaining a single-page application (SPA) also contributed to these issues.

What were the outcomes of replacing React with HTMX?

Replacing React with HTMX resulted in improved performance, faster time to interactive, lower memory usage on the client side, and enhanced product agility. The team was able to ship features faster and with better code quality.

What are the potential trade-offs when using HTMX instead of React?

While HTMX simplifies front-end development and improves product agility, it may not be the best fit for teams that prefer a heavy separation of concerns between back-end and front-end. HTMX integrates the front-end and back-end more closely.

What advice does the speaker give to teams considering HTMX?

The speaker advises teams to consider their needs for product agility, front-end development preferences, and team structure. If product agility and a simpler, more integrated front-end are important, HTMX could be a good choice.