Book Image

Building SPAs with Django and HTML Over the Wire

By : Andros Fenollosa
5 (1)
Book Image

Building SPAs with Django and HTML Over the Wire

5 (1)
By: Andros Fenollosa

Overview of this book

The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results. You’ll learn state-of-the-art WebSocket techniques to realize real-time applications with minimal reliance on JavaScript. This book will also show you how to create a project with Docker from the ground up, test it, and deploy it on a server. You’ll learn how to create a project, add Docker, and discover development libraries, Django channels, and bidirectional communication, and from then, on you’ll create real projects of all kinds using HTML over WebSockets as a chat app or a blog with real-time comments. In addition, you’ll modernize your development techniques by moving from using an SSR model to creating web pages using WebSockets over HTML. With Django, you’ll be able to create SPAs with professional real-time projects where the logic is in Python. By the end of this Django book, you’ll be able to build real-time applications, as well as gaining a solid understanding of WebSockets with Django.

Related Content you might be interested in

Current Title:

Small book image
Building SPAs with Django and HTML Over the Wire
Andros Fenollosa
Aug, 2022 | 264 pages
Small book image
Django 4 By Example
Antonio Meleacute
Aug, 2022 | 766 pages
Small book image
Django 3 By Example,
Antonio Meleacute
Mar, 2020 | 568 pages
Small book image
Django 4 for the Impatient
Greg Lim | Daniel Correa
Jun, 2022 | 190 pages
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1: Getting Started with Python
Part 1: Getting Started with Python
Free Chapter
2
Chapter 1: Setting up the Virtual Environment
Chapter 1: Setting up the Virtual Environment
Exploring the software required
Adding dependencies
Configuring the IDE
Installing Django
Creating our project
Summary
3
Chapter 2: Creating a Django Project around Docker
Chapter 2: Creating a Django Project around Docker
Technical requirements
Exploring the containers used for building our app
Adding the Django service
Configuring the databases
Connecting Django to a web server
Adding a fake SMTP mail server
Testing for correct operation
Summary
4
Part 2: WebSockets in Django
Part 2: WebSockets in Django
5
Chapter 3: Adding WebSockets to Django
Chapter 3: Adding WebSockets to Django
Technical requirements
Creating our first page with Daphne
Listening to events with consumers
Sending plain text from the backend
Sending JSON from the backend
Receiving JSON in the frontend
Rendering HTML in the backend
Summary
6
Chapter 4: Working with the Database
Chapter 4: Working with the Database
Technical requirements
Inserting information into the database
Rendering database information
Limiting queries with a pager
Deleting rows from a database
Updating rows in a database
Summary
7
Chapter 5: Separating Communication in Rooms
Chapter 5: Separating Communication in Rooms
Technical requirements
Basic functions for managing Channels
Creating a full Chat
Summary
8
Part 3: HTML over WebSockets
Part 3: HTML over WebSockets
9
Chapter 6: Creating SPAs on the Backends
Chapter 6: Creating SPAs on the Backends
Technical requirements
Switching between pages
Server-side rendering for each route
Including a browser to achieve dynamic navigation
Changing URLs
Hydrating sections or components
Creating temporary sessions for clients
Avoiding cross-site request forgery (CSRF) with WebSockets
Summary
10
Chapter 7: Creating a Real-Time Blog Using Only Django
Chapter 7: Creating a Real-Time Blog Using Only Django
Technical requirements
Creating models for the database
Generating fake articles and comments
Listing of articles
Navigating between articles with pagination
Adding an article search engine
Creating a static page
Moving between pages and generating a browser
Implementing an individual page per article
Adding a list of comments
Adding new comments
Offering an RSS feed
Summary
11
Part 4: Simplifying the frontend with Stimulus
Part 4: Simplifying the frontend with Stimulus
12
Chapter 8: Simplifying the Frontend
Chapter 8: Simplifying the Frontend
Technical requirements
Installing and configuring Stimulus
Defining a controller
Managing events with actions
Capturing references with targets
An application that converts text into uppercase letters
Summary
Why subscribe?
13
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

Managing events with actions

Actions are a structure used by Stimulus to link events to controller functions. They are declared in the DOM by means of a data-action dataset with the following structure:

<div data-controller="aliasController">
<button
  data-action=
    "event->aliasController#functionOfTheController"
>Click me!</button>
</div>

It will only work if it is inside a controller with the same alias; you cannot place an action in DOMs outside the tree.

Following the example, we modify our button:

<input
  type="button"
  value="Transform"
  data-action="click->transformer#lowercaseToUppercase"
>

Let’s analyze what we have done with data-action, since it contains its own format that we must follow:

  1. The event is click. It could be any other event, such as a submit event if we were in a HTML <form...
Previous Section
End of Section 5
Next Section