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.

Outlines

00:00

🖥️ Introduction to David Guillo's Background and Experiment

David Guillo, a seasoned web developer from France with 15 years of experience, introduces himself and his work at Context, a French company. He shares his intention to discuss an experiment conducted at his workplace involving the replacement of React with HTMX in a production-level SaaS product. The talk is structured to dispel common misconceptions about frontend development, showcase the UI and code, narrate the journey, and conclude with reflections and learnings. David challenges the conventional belief that a rich user experience (UX) requires a React-based single-page application (SPA), suggesting that a rich UX is about creating a seamless user interface where interactions feel native without reloading the entire page.

05:00

📊 Demonstrating the UI and HTMX Implementation

David introduces a key UI screen from their product in production, which features a sophisticated navigation timeline and an article text column. He explains how the interface, despite its complexity, functions smoothly with HTMX rather than relying on traditional client-side state management. For instance, a list of over 1,000 items can be filtered and searched without lag, demonstrating the power of HTMX in handling heavy data with minimal JavaScript. He emphasizes that actions like marking articles as favorites are achieved without client-side state management, showcasing the simplicity and efficiency of HTMX.

10:01

🛠️ Simplifying Application State Management with HTMX

David delves deeper into the technical details, explaining how application state management is handled seamlessly with HTMX. He illustrates this by showing how an article's favorite status is updated in the UI without any client-side JavaScript. Instead, HTMX handles the interaction through simple Django views and templates, using minimal HTML and HTMX attributes. This approach allows for sophisticated state management while keeping the codebase clean and avoiding the complexities of traditional JavaScript frameworks.

15:05

🔧 Achieving Rich UI Elements with Server-Side Components

David highlights how rich UI elements, such as custom dropdowns and internal search features, are implemented using server-side components in Django, with a combination of HTML templates, CSS, and minimal JavaScript. He describes the flexibility and reusability of these components, which are managed entirely on the server side, making them easy to test, upgrade, and customize. This method ensures that the UI remains rich and interactive while maintaining a clean and manageable codebase.

20:05

🚀 Transitioning from React to HTMX for Enhanced Performance

David recounts the initial challenges his team faced when using React for their SaaS product. Despite following industry recommendations to use React for client-side state management and web components, the resulting UI was slow and difficult to maintain. This led David to experiment with server-side rendering using Django and HTMX, which resulted in a significant improvement in performance, code quality, and team efficiency. He emphasizes that the switch to HTMX allowed for a faster, more agile development process without sacrificing the rich UX that their product required.

25:06

📉 Simplifying Codebase and Enhancing Developer Collaboration

David discusses the positive impact of transitioning to HTMX on his team and codebase. The team was able to significantly reduce the amount of code, deleting 15,000 lines, and shift from a specialized front-end/back-end division to a more integrated full-stack approach. This transition allowed developers to collaborate more closely with designers and take ownership of features from start to finish. David also shares the improved project management practices that emerged from this change, highlighting the benefits of a simplified, less segmented codebase.

🤔 Key Takeaways and Final Thoughts on HTMX

In his concluding remarks, David offers insights into the decision-making process for adopting HTMX. He stresses the importance of aligning the choice of technology with the team's needs and business goals. While HTMX may not be the best fit for teams accustomed to a strict separation of frontend and backend concerns, it offers significant advantages in terms of product agility and simplicity. David asserts that HTMX allows for a more holistic approach to frontend development, enabling teams to build rich, interactive UIs without the complexity of traditional JavaScript frameworks. He closes by encouraging others to consider HTMX for their projects and expresses gratitude to his colleagues for their support.

Keywords

💡HTMX

HTMX is a JavaScript library that allows for dynamic updates of web pages without requiring a full reload. It listens for JavaScript events, sends AJAX calls, retrieves HTML fragments, and injects them into the DOM. In the video, HTMX is presented as an alternative to React for creating a rich user interface (UI) on the web, emphasizing that it can manage application state changes and UI components without the need for heavy client-side JavaScript frameworks.

💡React

React is a popular JavaScript library used for building user interfaces, particularly single-page applications (SPAs). The video discusses React as the traditional choice for creating a rich user experience (UX) on the web, requiring developers to manage application state on the client side. The speaker contrasts React with HTMX, highlighting that while React is powerful, it can lead to complexity and performance issues, especially in scenarios where a simpler solution like HTMX might suffice.

💡Single Page Application (SPA)

A Single Page Application (SPA) is a type of web application that loads a single HTML page and dynamically updates the content as the user interacts with the app. SPAs typically rely on JavaScript frameworks like React to manage the application state and UI updates on the client side. In the video, the speaker critiques the complexity of SPAs and suggests that for certain use cases, a server-rendered approach using HTMX might be more efficient.

💡Django

Django is a high-level Python web framework that enables rapid development of secure and maintainable websites. The speaker in the video mentions Django in the context of building web applications with server-side rendering. He introduces a library that allows for the creation of web components within Django templates, demonstrating how Django can be used in conjunction with HTMX to achieve a rich user interface without relying on JavaScript-heavy frameworks like React.

💡Web Components

Web Components are reusable, encapsulated UI elements that can be used across different parts of a web application. They typically consist of HTML, CSS, and JavaScript working together to create complex UI elements. In the video, the speaker explains how Web Components can be implemented on the server side using Django, without the need for a client-side JavaScript framework. This approach allows for the creation of isolated and reusable components, contributing to a clean and maintainable codebase.

💡User Experience (UX)

User Experience (UX) refers to the overall experience a user has when interacting with a website or application, including the ease of use, efficiency, and satisfaction. The speaker emphasizes the importance of a rich UX, where users can interact with the interface seamlessly, without noticing they are using a web browser. He argues that HTMX can achieve this by providing smooth interactions and state changes without requiring a full page reload, challenging the notion that a JavaScript framework like React is necessary for a rich UX.

💡AJAX

AJAX stands for Asynchronous JavaScript and XML, a technique used to update parts of a web page without reloading the entire page. In the video, HTMX leverages AJAX to retrieve HTML fragments from the server and insert them into the DOM. This approach allows for dynamic updates and interactions within a web application, contributing to a more responsive user experience without the overhead of a full client-side application.

💡Server-Side Rendering

Server-Side Rendering (SSR) is the process of rendering web pages on the server rather than in the browser. This approach often results in faster initial page loads and improved SEO. The speaker advocates for SSR using Django in combination with HTMX, as it simplifies the development process by keeping the logic on the server side, reducing the need for complex client-side JavaScript, and improving performance, especially for content-heavy applications.

💡Application State Management

Application State Management refers to how a web application manages and synchronizes the state of various components and data across the interface. Traditional approaches, like using React, involve managing the state on the client side, often resulting in complex code. The speaker in the video demonstrates how HTMX can manage state changes through server-side updates, reducing the need for client-side state management and simplifying the overall architecture.

💡Product Agility

Product Agility refers to the ability of a development team to quickly adapt and make changes to a product based on feedback or new requirements. In the video, the speaker highlights how adopting HTMX and a server-side approach has increased the agility of his team. By reducing the complexity of the codebase and eliminating the need for a dedicated front-end framework like React, the team was able to iterate faster, improve performance, and maintain a higher quality of code.

Highlights

David Guillo discusses his 15 years of experience in the web industry, including five years as a Django developer.

The talk focuses on an experiment where a SaaS product in production replaced React with HTMX.

HTMX allows for modern, rich UI experiences on the web without relying heavily on JavaScript frameworks like React.

Guillo challenges the common belief that a rich UX on the web requires a full client-side application like a single-page app.

HTMX operates by listening to JavaScript events, making AJAX calls, and inserting HTML fragments into the DOM, simplifying the process.

Web components can be achieved on the server side in Django by using a library that integrates HTML, CSS, and JavaScript.

In the demo, Guillo showcases a sophisticated UI in production, illustrating how HTMX handles application state changes efficiently.

The demo includes a screen with a navigation timeline, a text section, and a large list of items, all managed without client-side state management.

The UI supports features like marking articles as favorites and filtering large lists, all handled by HTMX without heavy JavaScript.

Guillo explains that their approach allowed them to remove 15,000 lines of code, significantly simplifying their codebase.

By shifting from React to HTMX, the team improved performance, especially on first load, and reduced client-side memory usage.

The transition also enabled the backend developers to become full-stack, increasing their involvement in front-end development.

The team's product agility improved, allowing for faster shipping and reducing debates over API contracts.

Guillo encourages teams to consider their needs when choosing between HTMX and a JavaScript framework like React.

The presentation concludes with an invitation to consider HTMX for teams seeking faster development and simpler front-end architectures.

Transcripts

well hello everyone I hope you can hear

me

my name is David Guillo I'm from France

as you can hear

um I've been in the web industry for 15

years I've been a jungle developer for

five years I work at context yes it's

the French word for context

and I'm here to talk to you about an

experiment we we've been running at my

work it's about replacing react with

htmx on a SAS product that was already

in production

and it's a good experience

so this talk is about

realizing what is possible when it comes

to

a modern UI Rich UI on the web so I'll

start by breaking some misbeliefs about

front-end development

I will show you our UI I will show you

some code

then I will tell you our story

and finally I will share some thoughts

and learning about all this

so

um

this is the the cover of htmx Twitter

account

um

it's creative commands by the way

um

you've heard for too many years now that

uh

for a rich ux on the web you need you

have to go the react way you have to

to build an API and build a single page

app and

you will have everything you need

probably the reality is a bit more open

than that

because

what makes a ux rich

probably there is something about making

the user forgetting they are looking at

a web browser

um

for example when the user acts on your

interface and they changes the the

application state

you want to react to this change and you

don't want to reload the full page

because it's so

205

um

another part is you you want to have

some beautiful UI elements smooth

reliable reusable accessible like the

ones you've got on your phone

and

you've heard that to get all this

you need to go the JavaScript

application framework way like reactor

something else

but

when it comes to reacting to application

State changes

you you will hear that

you need an application on the client

side to to duplicate the application

State on the client side to to be able

to react very smoothly

probably

there are other ways and htmx is one of

them

so htmx what is it basically it's

listening to JavaScript events

in order to fire some Ajax calls get him

getting some HTML fragments and

inserting this HTML fragment into the

Dom

that's it

when it comes to

web components because that's I was

that's what I was talking about when

when I said Rich UI elements

the the best way the the design pattern

to get rich UI elements is to build

isolated reusable components that that

are PCS of HTML code CSS code and

JavaScript code that will work together

in order to get

some beautiful UI element that you will

be able to reuse

anywhere in your application and even in

other applications

and we were told that in order to

achieve that

we need JavaScript application

Frameworks that force you to think

component oriented oriented and to get

web components

now is it possible on the server side in

jungle world yes it is

this guy

implemented some

library that that allows you to to get

web components

within Django templating and I will show

you some code about it

now it's demo time

um I will show you our UI in our product

and production

um it's quite sophisticated screen that

I will show you and when it comes to ux

I will present it briefly first and then

I will dive into two features I want to

show you to illustrate application State

changes and UI elements

so

there it comes

so this is a a screen that is quite

Central in in our user experience at the

top you get

a navigation timeline

so it's a series of steps when you click

on one of them you get a beautiful

animation you get some stuff that

reloads on the bottom of the page

I can close that for now

on the right column you get a text

it can be a huge text but it's just text

the rendering is very quick

this text is split into articles the

Articles can be seen

just when opening the table of contents

I can mark an article as favorite

When I close my table of contents My

article has been marked as my favorite

here

is it client-side application State

Management no it isn't it's htmx

it's just

a JavaScript event

triggering some

very very located reload

on the left side you've got

a list of items that are related to the

text

this list of items can be quite huge

here we have more than 1000 items in

this list

huge and it works it doesn't lag

and this list can be filtered

for example by articles there are two 10

items related to article 2.

easy htmx stuff

I can also

search something

they all match

um

no no example search on this one

and

let's reset now let's dive into

[Music]

one feature that illustrates quite

sophisticated

application State Management

that you you could think it is at least

so in this face set filter I have

all my articles with counters of results

and at the top of the of the filter I

have a special bucket here which is all

the Articles I'm interested in

all the articles I marked as favorite so

for now I have only Article 1 and

Article 2 as favorites

so the counter is

127 results because it's 117 Plus 10.

what happens if I'm not interested in

article

first anymore

just here the counter has been updated

is it some client-side application State

Management no is there some JavaScript

for achieving this no zero line of

JavaScript

this is just htmx all the way do you

want to see how it works

let's Dive In

so this is the

the jungle View for the watch button I

hope this is readable on big screen

obviously I have a post method and uh

when I build my HTTP response with the

star becoming yellow or green according

according the post or delete method

let's join this

HTTP header which is a special HTTP

header that htmx understand on the

client side

now my small

counter here actually it's the whole

line

in my HTML template

which is

here

it's just an empty div

with a bunch of htmx attributes

and this empty div

is about to to get its content from the

server

on page load and also

when an article is watched and when an

article is unwatched

this is quite simple isn't it

and then you have application State

Management without writing a single line

of client-side code

the second feature I wanted to show you

is about rich UI elements

uh actually you've seen them already

it's these facet filters we have three

of them

um

it's actually a quite sophisticated UI

element because

it's a custom drop down you've already

did probably search things

I can close it when I click anywhere I

can close it by hitting Escape there is

some internal search

oh there is nautical uh not on articles

article one an article 9 for example

um

this is some JavaScript of course

because it is client-side pure user

interaction

but these elements are actually web

components made on Jungle side

so

I have a

face it template which is a regular

jungle template that will

take some input the the bucket the

values what the user selected Etc

and this face said this HTML

template is working with

in my static folder components face it I

have some CSS code

and I also have some JavaScript for

example to to handle the internal search

stuff

we use stimulus on JavaScript but you

can use whatever you want

and all of this is working together

through

uh jungle components and jungle

components allow you to

declare a component here

that make that bring together the

template the CSS and the JavaScript

and that makes you able to

to pass some data into it

and this is how you achieve a UI web

components on server side with jungle

components

and how do you use it I will open my

base template again

and here it goes we were there two

minutes ago

you have your component

and so it's really completely reusable I

have another one here for another field

in my data

and I passed the the buckets into it I

pass whatever you the user selected in

order to

to mug them

this way

and

I have slots slots allowing me to to do

special stuff to customize for example

this filter you've got some

color dots uh

aside the aside the values aside the

bucket names

here it goes I have my slot and I have

the possibility to to customize some

stuff in there

so it's reusable it's isolated

we can unit test it if we want we can

upgrade it add some features

independently from its usage in our

application and that's the whole point

of web components

so that's the end of the demo part

um

I hope at this point you are convinced

that yes our UI is quite quite Rich

offers a rich user experience and no our

code is not spaghettical because we

don't have code htmx does everything

almost everything for us

now about our experience at context and

the road wasn't always like this the

project this project started in 2017

it's a quite complex project especially

on the back-end side there are many

domain complex domain stuff but on the

front-end side

in 2017 we were a very very small team

it was our first SAS product and we

asked around us how do we do that and

everybody told us the same thing

it's 2017 guys go the react way build an

API bindle spa and you will achieve

client-side application application

State Management you will get a

separation of concerns between your

backend and your front end you will get

web components

it's the modern way to go

so we tried it we hired a JavaScript

developer we I was in charge of the API

among other things and

it was quite of a kind of okay

we were able to to deploy it to

production

but

the UI was was very very slow

because the the API contract was not

optimal

because the the Dom tree was way too

deep and as you as you have seen we have

lots of information to to put into the

browser

[Music]

um

and uh we had a very very low team

velocity and that was a big problem

because we were trying to launch a

product uh we were trying to to have

people buy our product so we needed to

to to be agile about it

and uh

there were no code quality on the

front-end side because the JavaScript

developer was alone and he was

overwhelmed with all the complexity of

making an Spa

um

so when I heard about

Phoenix live view in The Elixir world

when I heard about hotwired in the Ruby

world

when I heard about unpoli htmx

I had an idea I created a proof of

concept I duplicated our UI which was

all react I duplicated it with several

rendered Django templates and just a bit

of htmx

in one month of work the code was ugly

as hell but the proof was there it was

working the performances were good

let's refactor it one month later we had

web components we had uh code quality we

had we even had tests but we didn't have

before on the on the react World

so

consequences on the ux were there some

negative consequences on the ux no we we

made no trade-offs I can't think of a

feature we used to have and we don't

have any more

and it open it even opens some new

possibilities some new opportunities

um for example on the the left column

you've seen earlier which has many many

many items

on the react World the the dumb tree was

so deep and so heavy

that this colon was able to display only

50 items at a time and so you had to

scroll to display to replace the 50

items Etc and

it was terrible

now that we have a

quite clean and as light as possible Dom

tree

we are able to display thousands of

elements and no lags

whatever web Turf

we measured time to Interactive

um

[Music]

on three scenarios jungle and react

jungle API and react on first load then

on second load

and with htmx htmx is at least as fast

as the react second load on first load

is way faster

and it happens that in our use case

users often get to our UI through a deep

link that they received by email so the

first load is really important to us

and react was just not the right fit for

it

the memory usage on the client side is

also very lower much lower so this is

good news because we will we will stop

hearing our users crying for a new

laptop every six months

which is good for the planet

what happened to the team

obviously the JavaScript developer left

because we didn't need here anymore but

um

but the other two we were quite stuck in

our back end only role the

the most beautiful demonstration I did

after each print was an API endpoint

with Jason the

now we are full stack and we are able to

collaborate with designers

and also obviously continue working on

our complete complex back-end issues but

we have a much wider scope and this is

much more exciting as a developer at

least from my perspective

um

and this allowed also as to to explore

new project management methods because

we are now able to to

make the developer in charge of a

feature from the beginning to the end by

exploring data by exploring a user

scenario working with the developers it

is great

I don't even need to comment this slide

I let you enjoy it

that this is these are lines of code

in our code base

we deleted 15

000 lines of code

now

[Music]

um

when it comes to you

because I'm a bit here to convince you

but I'm here to to to give you all the

kids all the kids

I think you need to make your own

decision

you need to ask yourself what do we need

more as a team as a business

um because

in the beginning of this presentation I

told you that people who recommended

react to me uh talked about reacting to

application State Management okay this

is over

uh talk they talk to me about web

components okay this is handled

they talked to me about separation of

concerns and

from that perspective with htmx we have

um less separated code base and

to me it's a good thing because I like

to be a full stack developer but

if your team is used to separation a

heavy separation of concerns between

back-end and front end Maybe

htmx is not the best way for you

but what htmx gave us is product agility

we are now able to ship much faster much

much faster

we we have no more endless debates about

API contracts Etc

uh so if product agility is

a big thing for you maybe you should

consider htmx

another question is what is front-end

development

um

if some of you hate CSS Maybe

maybe you should consider

um

an architecture that allows you to focus

on the back end and let other people

work on the front end but that doesn't

necessarily mean reactor

JavaScript application framework

but if you think that front-end

development is about taking some data

from the database and exposing exposing

the data to the user in a beautiful way

making make the users interact with your

data and so store the data into the

database

maybe htmx is the way to go

I'm I think I'm done

almost

um here are the key takeaways form for

you

uh the first one is is if you had some

doubts about htmx does it work on a real

project a real product

yes it works people are paying for the

UI that you've seen earlier so it works

um for a small team like us

on a B2B SAS product

it makes us very happy so if you're in

the same position or in if you're in a

similar position maybe it would make you

happy so

and the most important thing is that

with htmx with jungle components as well

now you're able to to make your own

choice about

what architecture will we Implement for

our front end

this time I'm really done

I would like to give a special thanks to

my colleagues at context

I'd like to

to tell you that this awesome company

gave me to the opportunity to work on

this presentation in my working time my

working time so this is great

and people you see here gave me feedback

about the presentation they helped me

rewrite it three times but it was great

and the girls of the tech team took care

of

our Tech stuff while I was working on

this presentation so this is good

and thank you for your attention uh you

can you can't find me anywhere else than

on GitHub I have no social network

um and I have one more thing

if there if there are some friendships

here we are hiring so let's meet later