DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!
Summary
TLDRDavid 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
π₯οΈ 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.
π 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.
π οΈ 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.
π§ 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.
π 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.
π 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.
Mindmap
Keywords
π‘HTMX
π‘React
π‘Single Page Application (SPA)
π‘Django
π‘Web Components
π‘User Experience (UX)
π‘AJAX
π‘Server-Side Rendering
π‘Application State Management
π‘Product Agility
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
5.0 / 5 (0 votes)