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

Server-side rendering for each route

After preparing the Consumer class to change pages dynamically, we are going to incorporate a trivial system with Django for the management of routes and the rendering of each page without depending on Channels, so that crawlers can index the content. We’ll define three templates (home.html, login.html, and signup.html).

The content of app/app_template/templates/pages/home.html will be a few lines of HTML:

<section>
    <h1>Welcome to an example of browsing with WebSockets over the Wire.</h1>
    <p>You will be able to experience a simple structure. </p>
</section>

Then, on the second page, representing a login form, we will use a form object to list all the fields and then validate. This will be an argument that we will pass when rendering the template.

We write the following code in app/app_template/templates/pages/login.html:

<h1>Login<...
Previous Section
End of Section 4
Next Section