Simplify Your Stack: Django Single-Page-Apps in 2023

About This Tutorial

Have you looked at your React app and asked “why is this so complex”?

We’re tired of the empty promises of heavy javascript-based build-once run-anywhere frameworks. They’ve led to duplicated functionality, hacky work-arounds, more than twice the code, and layer upon layer of libraries to learn.

Enough.

It doesn’t need to be like this. There is a simpler way.

This way involves letting Django do what it does best - everything, and letting a light javascript library automatically place things where you need it to go. We’ll be exploring Hotwire, an emerging game-changer from the brilliant minds at 37signals, and will demonstrate how, with minimal changes to your app, you can create a single-page-app entirely in Django without writing a single line of Javascript.

In this session, you will:

• Create a React-style single-page-application…without a single line of Javascript.
• Update components on your site without a page reload…without Javascript.
• Push live HTML updates to your users…without Javascript.
• Add the most highly-sought-after engineering skills to your talent stack. That translates to a higher salary for you.
• Who knows? You may even get to see how easy it is to deploy what you’ve made to the App Store. 😉

Tutorial Schedule

We will start with a pre-made basic django application and add features as we walk through. You may feel free to code along, or sit back and enjoy learning the demonstrated capabilities and techniques.

This may look like too much to do in such a short time, but Hotwire makes things so simple, you’ll be amazed what you can accomplish. We will likely finish early. There will be a 5-10 minute break between each segment.

Hour 1

• Introduction: Why are things so complex and how did we get here?
• Dive right in - Create a single page app in Django
• Overview of Hotwire Turbo - What is it?
• How to use Django forms with Turbo
• Make lazy-loading tabs
• Keep that dopamine coming with an infinite scrolling page
• Create a form that only reloads one part of the page.

Hour 2

• Create a CRUD page that never reloads
• Update a counter as you add and remove entries
• Push live updates to the page as your fellow coders make changes

Hour 3

• Overview of Hotwire Stimulus - for when you need to add a little Javascript
• Add a media player that keeps playing as you navigate to different pages - YouTube style.
• Get ready for the App Store: overview of Turbo Native.
• Q&A