Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Building SPAs with Django and HTML Over the Wire
  • Table Of Contents Toc
  • Feedback & Rating feedback
Building SPAs with Django and HTML Over the Wire

Building SPAs with Django and HTML Over the Wire

By : Andros Fenollosa
4 (7)
close
close
Building SPAs with Django and HTML Over the Wire

Building SPAs with Django and HTML Over the Wire

4 (7)
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.
Table of Contents (14 chapters)
close
close
1
Part 1: Getting Started with Python
4
Part 2: WebSockets in Django
8
Part 3: HTML over WebSockets
11
Part 4: Simplifying the frontend with Stimulus

Changing URLs

We have managed to change pages and visually mark in the browser where we are, but the browser URL is still passive. We are going to add a mechanism to update the path every time we change pages.

In JavaScript, we can use the History API to manipulate the address that the visitor sees in the browser. For example, if you wanted to show that you are at /login/, you would implement the following:

history.pushState({}, '', '/login/')

What we will do is modify the event listener message by adding the line we just mentioned, together with a new parameter that will always send a Consumer class called url:

// Event when a new message is received by WebSockets
myWebSocket.addEventListener("message", (event) => {
    // Parse the data received
    const data = JSON.parse(event.data);
    // Renders the HTML received from the Consumer
    const selector =...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY