1
Fork 0

Add slides for frontend caching

This commit is contained in:
Jake Howard 2024-05-03 17:47:51 +01:00
parent 1066a89f88
commit c9cc80e217
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 292 additions and 0 deletions

BIN
public/map.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

BIN
public/wagtail-homepage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

292
slides.md
View file

@ -313,3 +313,295 @@ layout: section
## 2:
# Frontend Caching
---
layout: fact
---
```mermaid
flowchart LR
U[User]
CDN{Content<br>Delivery Network}
W[(Wagtail)]
U--->CDN
CDN-..->W
```
---
layout: fact
---
```mermaid
flowchart TD
U1[🧑‍💻]
U2[🧑‍💻]
U3[🧑‍💻]
U4[🧑‍💻]
U5[🧑‍💻]
U6[🧑‍💻]
U7[🧑‍💻]
U8[🧑‍💻]
U9[🧑‍💻]
U10[🧑‍💻]
U11[🧑‍💻]
U12[🧑‍💻]
U13[🧑‍💻]
CDN{Content<br>Delivery Network}
W[(Wagtail)]
U1--->CDN
U2--->CDN
U3--->CDN
U4--->CDN
U5--->CDN
U6--->CDN
U7--->CDN
U8--->CDN
U9--->CDN
U10--->CDN
U11--->CDN
U12--->CDN
U13--->CDN
CDN-...->W
```
---
layout: image
image: https://www.cloudflare.com/network-maps/cloudflare-pops-2O04nulSdNrRpJR9fs9OKv.svg
---
Source: Cloudflare
<style>
.slidev-layout {
background: white;
}
p {
color: black;
position: absolute;
bottom: 0;
font-size: 0.66rem;
}
</style>
---
layout: cover
background: /wagtail-homepage.png
---
# An example
---
layout: image
image: /map.jpg
transition: fade
---
---
layout: cover
background: /map.jpg
---
# ~XXms
<style>
h1 {
font-size: 4rem;
}
</style>
---
layout: fact
---
```mermaid
flowchart LR
U[User]
subgraph Content Delivery Network
CDN{Content<br>Delivery Network}
C[(Cache)]
end
W[(Wagtail)]
U---->CDN
CDN-.->C
C---->W
C-.->CDN
```
---
layout: fact
---
```mermaid
flowchart LR
U[User]
A[Admin]
subgraph Content Delivery Network
CDN{Content<br>Delivery Network}
C[(Cache)]
end
W[(Wagtail)]
U---->CDN
CDN-.->C
C---->W
C-.->CDN
A---->CDN
CDN---->W
```
---
layout: fact
---
# Content is cached!
```mermaid
flowchart LR
U1[User]
U2[User]
U3[User]
subgraph Content Delivery Network
CDN{Content<br>Delivery Network}
C[(Cache)]
end
W[(Wagtail)]
U1===>CDN
U2===>CDN
U3===>CDN
CDN==>C
C==>CDN
C-.....->W
```
---
layout: image
image: /wagtail-homepage-typo.png
---
---
layout: section
---
## Solution:
# Frontend Cache Invalidation
### Wagtail secret sauce <logos-wagtail class="fill-white"/>
---
layout: fact
---
```mermaid
flowchart LR
U[User]
subgraph Content Delivery Network
CDN{Content<br>Delivery Network}
C[(Cache)]
end
W[(Wagtail)]
U--->CDN
CDN-->C
C-->CDN
C-..->W
W-.->|Frontend Cache Invalidation|CDN
```
---
layout: center
---
# `settings.py`
### 1.
```python {3}
INSTALLED_APPS = [
...
"wagtail.contrib.frontend_cache"
]
```
#### 2.
```python
WAGTAILFRONTENDCACHE = {
'cloudflare': {
'BACKEND': 'wagtail.contrib.frontend_cache.backends.CloudflareBackend',
'BEARER_TOKEN': os.environ["CF_BEARER_TOKEN"],
'ZONEID': os.environ["CF_ZONE_ID"],
},
}
```
#### 3. ???
#### 4. Profit!
<style>
code {
font-size: 0.9rem !important;
}
</style>
---
layout: fact
---
```mermaid
flowchart LR
A[Admin]
subgraph Content Delivery Network
CDN{Content<br>Delivery Network}
C[(Cache)]
end
W[(Wagtail)]
A-->|Publish new content to<br><code>/blog/post-1</code>|W
W-.->|<code>PURGE /blog/post-1</code>|CDN
CDN-.->C
```
---
layout: cover
background: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png
---
# Conclusion
---
layout: cover
---
<Transform :scale="1.3">
# Performance means:
- Users are happier <mdi-emoticon-happy />
- Servers are happier <mdi-server-network />
- The planet is happier <mdi-earth class="text-green" />
</Transform>
---
layout: end
---