1
Fork 0

Add slides for fragment caching

This commit is contained in:
Jake Howard 2024-05-03 13:33:41 +01:00
parent 90a7b360ec
commit 89cc1a7509
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 265 additions and 6 deletions

BIN
public/website-homepage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/website-posts.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 KiB

BIN
public/website-search.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

271
slides.md
View file

@ -3,6 +3,7 @@ title: Wagtail & Caching
class: text-center
highlighter: shiki
transition: slide-left
monaco: false
mdc: true
themeConfig:
primary: '#2e1f5e'
@ -40,17 +41,275 @@ layout: cover
layout: center
---
# Importance of caching
---
layout: cover
background: https://cdn.jsdelivr.net/gh/wagtail/wagtail@main/.github/wagtail-screenshot-with-browser.png
---
# Scale
# Wagtail is a Content Management System
<style>
@keyframes grow {
from {
}
to {
font-size: 30rem;
}
}
h1 {
animation-name: grow;
animation-duration: 30s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
</style>
---
layout: cover
---
# <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
---
layout: section
---
## 1:
# Template Fragment Caching
---
layout: image
image: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png
backgroundSize: cover
---
<style>
.slidev-layout {
background-position: top center !important;
}
</style>
---
layout: none
---
```html
<div class="one-half--medium one-third--large">
<div class="card card--link">
<a href="/developers/springload/made-wagtail/" class="project-image">
<img src="https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.52.2e16d0ba.fill-680x564.png" alt="" title="">
</a>
<div class="project__links">
<a class="project__info" href="/developers/springload/made-wagtail/">
<span class="u-sr-only">Project info</span>
<svg class="i i--grey i--hover">
<use xlink:href="#i-info"></use>
</svg>
</a>
<a class="project__visit" href="http://madewithwagtail.org/" title="Project link" data-analytics="Project|Link click">
<span class="u-sr-only">Project link</span>
<svg class="i i--grey i--hover">
<use xlink:href="#i-visit"></use>
</svg>
</a>
</div>
</div>
<h4 class="project-title">
Made with Wagtail
</h4>
<p class="project-author">
<a href="/developers/springload/" title="View the company page of Springload">
Springload
</a>
</p>
```
<style>
.slidev-page, .slidev-code-wrapper, .slidev-code {
height: 100%;
}
</style>
---
layout: cover
background: /website-homepage.png
---
# An example
---
layout: image
image: /website-posts.png
---
---
layout: none
---
````md magic-move
```html
{% load wagtailcore_tags util_tags %}
<article class="media listing-item">
<div class="columns">
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
{% if page.list_image_url %}
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
</a>
{% endif %}
</figure>
<div class="media-content column">
<div>
{% if breadcrumbs %}
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
{% endif %}
<h2 class="title is-3">
<a href="{% pageurl page %}">{{ page.title }}</a>
</h2>
{% include "common/content-details.html" %}
<p>{{ page.summary }}</p>
</div>
</div>
</div>
</article>
```
```html {all|1|3,27|4-26|all}
{% load wagtailcore_tags wagtail_cache util_tags %}
{% wagtailpagecache FRAGMENT_CACHE_TTL "listing-item" breadcrumbs show_listing_images %}
<article class="media listing-item">
<div class="columns">
<figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
{% if page.list_image_url %}
<a href="{% pageurl page %}" class="image" title="{{ page.title }}">
<img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
</a>
{% endif %}
</figure>
<div class="media-content column">
<div>
{% if breadcrumbs %}
{% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
{% endif %}
<h2 class="title is-3">
<a href="{% pageurl page %}">{{ page.title }}</a>
</h2>
{% include "common/content-details.html" %}
<p>{{ page.summary }}</p>
</div>
</div>
</div>
</article>
{% endwagtailpagecache %}
```
````
<style>
.slidev-page, .slidev-code-wrapper, .slidev-code {
height: 100%;
}
</style>
---
layout: cover
background: /website-search.png
---
# Duplication
---
layout: center
---
```html {3}
<section class="container">
{% for page in listing_pages %}
{% include "common/listing-item.html" %}
{% endfor %}
</section>
```
<style>
code {
font-size: 1.5rem !important;
}
</style>
---
layout: image
image: /website-search.png
---
---
# Cache invalidation
<v-click>
```python
>>> BlogPostPage.objects.first().cache_key
```
</v-click>
<v-click>
```python
@property
def cache_key(self) -> str:
"""
A generic cache key to identify a page in its current state.
Should the page change, so will the key.
Customizations to the cache key should be made in :attr:`get_cache_key_components`.
"""
...
```
</v-click>
<style>
code {
font-size: 1rem !important;
}
</style>
---
layout: center
---
# What about Django?
```jinja
{% load cache %}
{% cache 500 sidebar request.user.username %}
.. sidebar for logged in user ..
{% endcache %}
```
<Transform :scale="1.4">
<v-clicks>
- Current page
- Current site
- Preview
- Cache invalidation
</v-clicks>
</Transform>
<style>
code {
font-size: 1.5rem !important;
}
</style>
---
layout: section
---
## 2:
# Frontend Caching