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.

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

Share Your Thoughts

Part 1: Getting Started with Python

Part 1: Getting Started with Python

Free Chapter

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

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

Part 2: WebSockets in Django

Part 2: WebSockets in Django

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

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

Chapter 5: Separating Communication in Rooms

Chapter 5: Separating Communication in Rooms

Technical requirements

Basic functions for managing Channels

Creating a full Chat

Part 3: HTML over WebSockets

Part 3: HTML over WebSockets

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

Hydrating sections or components

Creating temporary sessions for clients

Avoiding cross-site request forgery (CSRF) with WebSockets

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

Part 4: Simplifying the frontend with Stimulus

Part 4: Simplifying the frontend with Stimulus

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

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

Basic functions for managing Channels

The basic functions for managing Channels are as follows:

send(): This is used to send new messages from the Consumer to a single client. We have used this function from the beginning of this book. However, we used the JsonWebsocketConsumer wrapper to make send_json() more convenient for sending JSON:
```
data = {
            "my_data": "hi",
       }
self.send_json(data)
```
group_send(): This is used to send new messages from the Consumer to a group of clients that we have previously defined. It is an asynchronous function, so we will need the whole Consumer to be asynchronous or, preferably, use the async_to_sync function. In the following example, you can see how the {"my_data": "hi"} JSON is sent to the whole group as "Main":
```
from asgiref.sync import async_to_sync
async_to_sync(self.channel_layer...
```