eBook: The Definitive Guide to Hotwire and Django

Background

As you know, React, Vue and other frontend techs (Angular, Svelte) are becoming more and more popular nowadays.

In most cases, when people use the above techs, Django will work as an API server, for example, expose data to JSON API using Django REST framework.

However, some people (including me) do not like the above approach, and they want a simple solution:

1. They like to use classic Django form, Django templates, Django standard auth.
2. Do not split the frontend and backend to keep infrastructure simple.
3. Render HTML in Django, and use Javascript to enhance the server-rendred HTML.

Why I recommend Hotwire

If you do some research, you will see there are already some solutions such as:

1. HTMX
2. Alpine.js
3. Unicorn

I prefer Hotwire because:

1. It is the official frontend solution in Rails and is very popular in the PHP community.
2. It has healthy ecosystem, there are many tutorials, blog, videos and open source projects on Github for us to use directly and learn.
3. It can let us write less Javascript while getting things done quickly.
4. Hotwire can help you keep frontend code clean and easy to maintain.
5. Hotwire can even help you to build hybrid mobile apps, it gives you a complete solution across all platforms.

If you want to know more about the lightweight Javascript framework, you can check my previous article:

Lightweight Javascript Framework Review (For Django Developers)

Objectives

Considering there are no good tutorials about Hotwire and Django.

I decided to write a book to help people to learn Hotwire with Django in a systematic way and now it is published.

After reading this book, you will be able to:

1. Learn Howtwire includes Turbo and Stimulus, and what problem they can help solve.
2. Jump start frontend project bundled by Webpack.
3. Use Tailwind CSS as your theme solution.
4. Setup Turbo and Stimulus.
5. Learn how page navigation works in Turbo Drive
6. Understand what is cache in Turbo Drive and how preview works.
7. Learn what is Turbo Frame and how it works.
8. Build Inline Editing feature with Turbo Frame.
9. Learn what is Stimulus and how Stimulus Controller work.
10. What is Stimulus Values, Targes, and Actions
11. Use Stimulus to build a Datetime picker and improve form submission process.
12. Understand how to use events to do communication among Stimulus controllers
13. Build Type as search feature with Stimulus, Turbo and Django.
14. Learn what is Turbo Stream and how it works.
15. How to build Collaborative Editing based on Websocket and Turbo Stream

Tech

• Django
• Django channels
• Hotwire
• Tailwind CSS

What is included

1. A PDF ebook which contains about 40 chapters.
2. The source code of the project.

Demo

The demo is available on https://hotwire-django.fly.dev/

Table of contents

1. Introduction
2. Create Project
3. Setup Turbo
4. Create Task App
5. Render Django Form with Tailwind CSS Style
6. Explore Turbo Drive (Page Navigation)
7. Explore Turbo Drive (Cache)
8. Explore Turbo Drive (Javascript, CSS)
9. Explore Turbo Drive (3-party Javascript)
10. Turbo Drive and Django form validation
11. Prepare to Learn Turbo Frame
12. Turbo Frame Basics
13. Turbo Frame and Django Form
14. Inline Editing with Turbo Frames
15. Prepare Django app to learn Stimulus Basics
16. Stimulus Controller Basics
17. Stimulus Controller (Actions, Values)
18. Stimulus Controller (Targets, CSS classes)
19. Stimulus Controller (Lifecycle)
20. Stimulus Controller (3-party Resources)
21. Stimulus Controller (Date Picker)
22. Stimulus Controller (Form Submission)
23. Prepare Django app to learn Stimulus and Turbo Frame
24. Stimulus Controller (Flash Message)
25. Build Stimulus Controller for Modal
26. Load Form in the Modal
27. Handle Form Submission in Modal
28. Full Page Redirect in Modal
29. Communication Among Stimulus Controllers Via Events
30. Prepare Django app to learn Stimulus Stream
31. Import Turbo Frame
32. Turbo Stream Basics
33. Use Turbo Stream to improve inline editing
34. Filtering on the List Page
35. Auto Search
36. RealTime Update based on Websocket (Part 1)
37. RealTime Update based on Websocket (Part 2)
38. Next Steps

BOOK LINK

The Definitive Guide to Hotwire and Django