Add slides for frontend caching
This commit is contained in:
parent
1066a89f88
commit
c9cc80e217
4 changed files with 292 additions and 0 deletions
BIN
public/map.jpg
Normal file
BIN
public/map.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 MiB |
BIN
public/wagtail-homepage-typo.png
Normal file
BIN
public/wagtail-homepage-typo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 120 KiB |
BIN
public/wagtail-homepage.png
Normal file
BIN
public/wagtail-homepage.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 121 KiB |
292
slides.md
292
slides.md
|
@ -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
|
||||
---
|
||||
|
|
Loading…
Reference in a new issue