eBook: The Definitive Guide to Hotwire and Django

Michael Yin

Last updated on July 04 2022

Table of Contents

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.

You can go to Hotwire official Doc to learn more about it.

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 http://hotwire-django.herokuapp.com/

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

The Definitive Guide to Hotwire and Django

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.

Table of Contents

Django SaaS Template

It aims to save your time and money building your product, developed by Michael Yin

Learn More

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More

Subscribe

Get notified about new great Web Development Tutorial