Slide 1
Slide 1 text
Modular Architecture for
Building Content Websites
Slide 2
Slide 2 text
Hi! I’m Souvik.
@souvikdg
Slide 3
Slide 3 text
Miranj
Slide 4
Slide 4 text
We architect information and
design radically simple,
future-proof websites.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
We like tackling projects
that are content-heavy.
Slide 11
Slide 11 text
The number of content pieces
often run into thousands.
Slide 12
Slide 12 text
How we think of a website
has kept evolving over time.
Slide 13
Slide 13 text
Page Page
Website
Page
Slide 14
Slide 14 text
Page Page
Website
Page
Complexity & Size ∝ fn(n)
Slide 15
Slide 15 text
Page Page
Website
Page
n = pages
Slide 16
Slide 16 text
Section Section
Website
Section
Page Page Page
Page
Page Page Page
Slide 17
Slide 17 text
Section Section
Website
Section
Page Page Page
Page
Page Page Page
Template Template
Template
Slide 18
Slide 18 text
Section Section
Website
Section
Page Page Page
Page
Page Page Page
Template Template
Template
n = templates
Slide 19
Slide 19 text
Section Section
Website
Blog Section
Page Page
Post
Page
Page Page
Post
Template
Template
Template Post
Post
Slide 20
Slide 20 text
Section Section
Website
Blog Section
Page Page
Post
Page
Page Page
Post
Template Template
Post
Post
Template
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Index
Slide 21
Slide 21 text
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Index
Template
Section Section
Website
Blog Section
Page Page Page
Page Page
Template Template
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Slide 22
Slide 22 text
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Index
Template
Section Section
Website
Blog Section
Page Page Page
Page Page
Template Template
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Taxonomy
Taxonomy
Taxonomy
Taxonomy
Slide 23
Slide 23 text
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Index
Template
Section Section
Website
Blog Section
Page Page Page
Page Page
Template Template
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Post
Taxonomy
Taxonomy
Taxonomy
Taxonomy
n = templates (page +
index + taxonomy)
Slide 24
Slide 24 text
Shift towards
Modular Thinking
Slide 25
Slide 25 text
Shift towards
Modular Thinking
Slide 26
Slide 26 text
Modularity is
intrinsic to the Web
Slide 27
Slide 27 text
Modular Design
Principles of Design
– Tim Berners-Lee (1998)
www.w3.org/DesignIssues/Principles.html
Slide 28
Slide 28 text
“
– Tim Berners-Lee
There are lots of reasons
for modularity. The basic
one is that one module
can evolve or be replaced
without affecting
the others.
www.w3.org/DesignIssues/Modularity.html
Slide 29
Slide 29 text
“
– Tim Berners-Lee
If the interfaces are clean,
and there are no side
effects, then a developer
can redesign a module
without having to deeply
understand the
neighboring modules.
www.w3.org/DesignIssues/Modularity.html
Slide 30
Slide 30 text
“
– Tim Berners-Lee
The flip side is that a
cleanly designed module
designed as part of one
system can be re-used in
other systems.
www.w3.org/DesignIssues/Modularity.html
Slide 31
Slide 31 text
“
– Tim Berners-Lee
There are lots of reasons
for modularity. The basic
one is that one module
can evolve or be replaced
without affecting
the others.
www.w3.org/DesignIssues/Modularity.html
Slide 32
Slide 32 text
“
– Tim Berners-Lee
There are lots of reasons
for modularity. The basic
one is that one module
can evolve or be replaced
without affecting
the others.
www.w3.org/DesignIssues/Modularity.html
Slide 33
Slide 33 text
“
– Tim Berners-Lee
If the interfaces are clean,
and there are no side
effects, then a developer
can redesign a module
without having to deeply
understand the
neighboring modules.
www.w3.org/DesignIssues/Modularity.html
Slide 34
Slide 34 text
“
– Tim Berners-Lee
The flip side is that a
cleanly designed module
designed as part of one
system can be re-used in
other systems.
www.w3.org/DesignIssues/Modularity.html
Slide 35
Slide 35 text
Modular Design
=
Evolvable + Decoupled + Reusable
Slide 36
Slide 36 text
commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg
Slide 37
Slide 37 text
commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg
Think Lego!
Slide 38
Slide 38 text
UI/UX Patterns…
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Pattern Libraries…
Slide 41
Slide 41 text
www.flickr.com/photos/antpaniagua/8110356483
Modules that stack.
Slide 42
Slide 42 text
www.flickr.com/photos/antpaniagua/8110356483
Slide 43
Slide 43 text
Style Guides…
Slide 44
Slide 44 text
Atomic Design
bradfrost.com/blog/post/atomic-web-design/
Design Systems!
Slide 45
Slide 45 text
Atomic Design
bradfrost.com/blog/post/atomic-web-design/
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Components
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Layouts
Slide 52
Slide 52 text
pixabay.com/en/matryoshka-russian-doll-russian-toy-2737108
Modules that nest.
Slide 53
Slide 53 text
pixabay.com/en/matryoshka-russian-doll-russian-toy-2737108
Slide 54
Slide 54 text
Stacking + Nesting
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
“Content Builders”
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Matrix
The universally loved feature in Craft CMS
Slide 59
Slide 59 text
In 2013…
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Spon
posals Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Slide 62
Slide 62 text
Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Spon
posals
Slide 63
Slide 63 text
Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Spon
posals
Slide 64
Slide 64 text
Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Spon
posals
Slide 65
Slide 65 text
Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Spon
posals
Slide 66
Slide 66 text
Talks Schedule
JSFoo
Speakers
Talk 1 Talk 2 Talk 3 Speaker 1 Speaker 2 Speaker 3
Track 1 Track 2
Sponsors
Workshops Proposals Past Speakers Featured Talks Venue
Hotels
Spon
posals
Slide 67
Slide 67 text
Content is deeply interconnected.
Slide 68
Slide 68 text
Content is deeply interdependent.
Slide 69
Slide 69 text
Every piece of content
needs to appear across
multiple pages and sections.
Slide 70
Slide 70 text
Treating page-level templates as
monolithic units is inefficient.
Slide 71
Slide 71 text
It just wasn’t DRY enough.
(Don’t Repeat Yourself)
Slide 72
Slide 72 text
Discipline + Consistency + Reuse
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Post
Hiker
About Us
Slide 77
Slide 77 text
Post?
Hiker?
About Us?
Hard to skim
Hard to differentiate
Hard to consume
Hard to appreciate
Slide 78
Slide 78 text
Post?
Hiker?
About Us?
Inferior Content UX
Slide 79
Slide 79 text
“
– Tom Brinck
Contrast and consistency
go hand in hand. Make
similar things look similar.
Make different things look
different.
Usability For The Web (2001)
Slide 80
Slide 80 text
Is this a side-effect
of a modular approach?
Slide 81
Slide 81 text
Not really.
Slide 82
Slide 82 text
User Interface
Slide 83
Slide 83 text
Dependency Direction
Content User Interface
Slide 84
Slide 84 text
Dependency Direction
User Interface Content
Slide 85
Slide 85 text
“
– Josh Clark
Pull back from obsession
with presentation. Start
with content. [Designers]
have to accept that your
content will take many
forms.…
Seven Deadly Mobile Myths (2012)
Slide 86
Slide 86 text
Embrace content and
yet achieve modularity
Slide 87
Slide 87 text
Components Layouts
Slide 88
Slide 88 text
? Layouts
Components
Slide 89
Slide 89 text
Layouts
Components
Content
Slide 90
Slide 90 text
Content-first Approach
Slide 91
Slide 91 text
1. Content Modelling
2. Identifying Representations and Modules
3. Translating Modules into Templates
Slide 92
Slide 92 text
1. Content Modelling
Content Strategy and Information Architecture
Slide 93
Slide 93 text
Layouts
Components
Content
Slide 94
Slide 94 text
Structured Content
Slide 95
Slide 95 text
Structured Content
Information or content that is organised in a predictable way
and is usually classified with metadata.
Slide 96
Slide 96 text
In a conference website…
Slide 97
Slide 97 text
Speaker
Slide 98
Slide 98 text
Speaker
First Name
Biography
Profile Picture
Last Name
Role
Organisation
Twitter Handle
Location
Slide 99
Slide 99 text
Content Types
Slide 100
Slide 100 text
We refer to the individual
content instances as Objects.
Slide 101
Slide 101 text
Content Modelling
1. Identify the objects (content types)
2. Define the objects (models)
3. Map relationships between objects
Slide 102
Slide 102 text
In Craft CMS you’re already
working with Objects.
Slide 103
Slide 103 text
1. Asset
2. Category
3. Entry
4. Globals
5. MatrixBlock
6. Tag
7. User
craft\elements\Asset
craft\elements\Category
craft\elements\Entry
craft\elements\GlobalSet
craft\elements\MatrixBlock
craft\elements\Tag
craft\elements\User
Slide 104
Slide 104 text
1. Asset
2. Category
3. Entry
4. Globals
5. MatrixBlock
6. Tag
7. User
craft\elements\Asset
craft\elements\Category
craft\elements\Entry
craft\elements\GlobalSet
craft\elements\MatrixBlock
craft\elements\Tag
craft\elements\User
Slide 105
Slide 105 text
Taxonomies are first-class objects.
Slide 106
Slide 106 text
Layouts
Components
Content
Slide 107
Slide 107 text
Layouts
Components
Objects
(Structured Content)
Slide 108
Slide 108 text
2. Representing Objects
Content Strategy leading to Design
Slide 109
Slide 109 text
Let’s look at a popular website…
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
Objects have many
representations.
Slide 115
Slide 115 text
Objects have many
representations.
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
“But that’s a very large website.
What about smaller websites?”
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Same object.
Multiple representations.
Slide 125
Slide 125 text
Objects need
different representations.
Slide 126
Slide 126 text
Movies
Slide 127
Slide 127 text
Movies
Title
Poster
Trailer
Full-length
Slide 128
Slide 128 text
Movies
Title
Poster
Trailer
Full-length
Label
Engage
Preview
Entertain
Slide 129
Slide 129 text
Movies
Title
Poster
Trailer
Full-length
Label
Engage
Preview
Entertain
Slide 130
Slide 130 text
Movies
Title
Poster
Trailer
Full-length
Label
Engage
Preview
Entertain
Views
Slide 131
Slide 131 text
Objects
Snippet
Teaser
Embed
Detail
Label
Engage
Preview
Full Information
Views
Slide 132
Slide 132 text
Speaker
Snippet
Teaser
Embed
Detail
Label
Engage
Preview
Full Information
Views
Slide 133
Slide 133 text
Views aren’t tied to
any specific visual design.
Slide 134
Slide 134 text
Speaker
Snippet
Teaser
Embed
Detail
Label
Engage
Preview
Full Information
Views
Slide 135
Slide 135 text
Talk
Snippet
Teaser
Embed
Detail
Label
Engage
Preview
Full Information
Views
Slide 136
Slide 136 text
Snippet
Teaser
Embed
Detail
Speaker Talk
Slide 137
Slide 137 text
Snippet
Teaser
Embed
Detail
Speaker Talk
“That’s plenty of
variants to manage!”
Slide 138
Slide 138 text
Stacking Nesting
Slide 139
Slide 139 text
Stacking Nesting Cascading
Slide 140
Slide 140 text
www.flickr.com/photos/petechar/15224096659
Slide 141
Slide 141 text
Snippet
Teaser
Embed
Detail
Speaker Talk
Slide 142
Slide 142 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 143
Slide 143 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 144
Slide 144 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 145
Slide 145 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 146
Slide 146 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 147
Slide 147 text
Snippet
Teaser
Embed
Speaker Talk
Detail
Slide 148
Slide 148 text
www.flickr.com/photos/petechar/15224096659
Modules that Cascade.
Slide 149
Slide 149 text
All interfaces are
powered by views.
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
No content
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
No content
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
No content
Slide 166
Slide 166 text
Views
1. Are the representations of an object.
2. Are not tied to a visual design, but rather to a
purpose behind the representation.
3. Stack, nest and cascade across all objects.
4. Can evolve (or be replaced) for specific objects.
Slide 167
Slide 167 text
Layouts
Components
Object
(Structured Content)
s
Slide 168
Slide 168 text
Layouts
Components
Views
(Object Representations)
Slide 169
Slide 169 text
Components
Views Layouts
Slide 170
Slide 170 text
3. Templating
Implementation and Development
Slide 171
Slide 171 text
templates/
_entry.twig
tracks
!
_entry.twig
talks
!
speakers
!
_entry.twig
Slide 172
Slide 172 text
Components
Views Layouts
Slide 173
Slide 173 text
templates/
_layouts
"
_views
" _components
"
Slide 174
Slide 174 text
templates/
fragment.twig
blog.twig
page.twig
_layouts
!
landing.twig
_views
" _components
"
Slide 175
Slide 175 text
banner.twig
quote.twig
image.twig
heading.twig
_components
!
table.twig
text.twig
templates/
_layouts
"
_views
"
Slide 176
Slide 176 text
_components
templates/
_layouts
"
details
teasers
" "
snippets
"
"
_views
! "
Slide 177
Slide 177 text
_components
templates/
_layouts
"
details
teasers
! !
snippets
!
default.twig default.twig default.twig
"
_views
! "
Slide 178
Slide 178 text
Separation of Concerns
Components Layouts
Views
Render
a UI Component
Render
an object
Provide scaffolding
for laying out the content
Slide 179
Slide 179 text
Components
Views Layouts
Dependency Direction
Slide 180
Slide 180 text
Components
Views Layouts
Components
Views Layouts
Slide 181
Slide 181 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Speaker Page
Slide 182
Slide 182 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Snippet(Talk)
Slide 183
Slide 183 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Detail(Speaker)
Slide 184
Slide 184 text
{% block detail_main %}
{% block detail_header_content %}
{{ entry.title }}
{% endblock %} {% block detail_body %} {% block detail_body_content %} {% for component in entry.body.all() %} {% include '_components/' ~ component.type with { self: component } only %} {% endfor %} {% endblock %} {% endblock %} {% block detail_body_after %}{% endblock %} _views/details/default.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22Slide 185
Slide 185 text
{% block detail_main %}
{% block detail_header_content %}
{{ entry.title }}
{% endblock %} {% block detail_body %} {% block detail_body_content %} {% for component in entry.body.all() %} {% include '_components/' ~ component.type with { self: component } only %} {% endfor %} {% endblock %} {% endblock %} {% block detail_body_after %}{% endblock %} _views/details/default.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22Slide 186
Slide 186 text
{% block detail_main %}
{% block detail_header_content %}
{{ entry.title }}
{% endblock %} {% block detail_body %} {% block detail_body_content %} {% for component in entry.body.all() %} {% include '_components/' ~ component.type with { self: component } only %} {% endfor %} {% endblock %} {% endblock %} {% block detail_body_after %}{% endblock %} _views/details/default.twig 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28Slide 187
Slide 187 text
{% extends '_layouts/fragment' %}
{% block component_content %}
{{ self.text }}
{% endblock %}
_components/text.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 188
Slide 188 text
{% extends '_layouts/fragment' %}
{% block component_content %}
{{ self.text }}
{% endblock %}
_components/text.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 189
Slide 189 text
{% extends '_layouts/fragment' %}
{% block component_content %}
{{ self.text }}
{% endblock %}
_components/text.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 190
Slide 190 text
{% extends '_layouts/fragment' %}
{% block component_content %}
{{ self.text }}
{% endblock %}
_components/text.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
How will a talk and a speaker
view be made different?
Slide 191
Slide 191 text
Components
Views Layouts
Components
Views Layouts
Slide 192
Slide 192 text
Components
Views Layo
Speakers
Talks
Slide 193
Slide 193 text
_components
templates/
_layouts
"
details
teasers
! !
snippets
!
default.twig default.twig default.twig
"
_views
! "
Slide 194
Slide 194 text
_components
ꔇ
templates/
_layouts
"
details
teasers
! !
snippets
!
default.twig default.twig
speakers.twig
default.twig
speakers.twig
talks.twig
"
_views
! "
Slide 195
Slide 195 text
{% extends '_views/details/default' %}
{% block detail_header_content %}
{# Photo #}
{% set photo = entry.photo.one() %}
{% include '_components/image' with {
self: photo,
style: 'round',
} %}
{# Name #}
{{ parent() }} {#
{# Job Title and Twitter #}
{{ entry.title }}
#}{# Job Title and Twitter #}
{{ entry.jobTitle }}
_views/details/speakers.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Slide 196
Slide 196 text
{% extends '_views/details/default' %}
{% block detail_header_content %}
{# Photo #}
{% set photo = entry.photo.one() %}
{% include '_components/image' with {
self: photo,
style: 'round',
} %}
{# Name #}
{{ parent() }} {#
{# Job Title and Twitter #}
{{ entry.title }}
#}{# Job Title and Twitter #}
{{ entry.jobTitle }}
_views/details/speakers.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Slide 197
Slide 197 text
{% extends '_views/details/default' %}
{% block detail_header_content %}
{# Photo #}
{% set photo = entry.photo.one() %}
{% include '_components/image' with {
self: photo,
style: 'round',
} %}
{# Name #}
{{ parent() }} {#
{# Job Title and Twitter #}
{{ entry.title }}
#}{# Job Title and Twitter #}
{{ entry.jobTitle }}
_views/details/speakers.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Slide 198
Slide 198 text
{% set photo = entry.photo.one() %}
{% include '_components/image' with {
self: photo,
style: 'round',
} %}
{# Name #}
{{ parent() }} {#
{# Job Title and Twitter #}
{{ entry.title }}
#}{# Job Title and Twitter #}
{{ entry.jobTitle }}
{% endblock %} _views/details/speakers.twig 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29Slide 199
Slide 199 text
{% set photo = entry.photo.one() %}
{% include '_components/image' with {
self: photo,
style: 'round',
} %}
{# Name #}
{{ parent() }} {#
{# Job Title and Twitter #}
{{ entry.title }}
#}{# Job Title and Twitter #}
{{ entry.jobTitle }}
{% endblock %} _views/details/speakers.twig 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29Slide 200
Slide 200 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {# Invoke a relevant view for the talk object #} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 201
Slide 201 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {# Invoke a relevant view for the talk object #} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 202
Slide 202 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {# Invoke a relevant view for the talk object #} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 203
Slide 203 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {# Invoke a relevant view for the talk object #} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 204
Slide 204 text
Invoking a View
1. Which view?
2. Which variant?
3. Which template file?
Slide 205
Slide 205 text
Components
Views Layo
Speakers
Talks
Slide 206
Slide 206 text
Invoking a View
1. Which view?
2. Which variant?
3. Which template file?
Slide 207
Slide 207 text
_components
ꔇ
templates/
_layouts
"
details
teasers
! !
snippets
!
default.twig default.twig
speakers.twig
default.twig
speakers.twig
talks.twig
"
_views
! "
Slide 208
Slide 208 text
How to invoke a view when the
template file is unknown?
Slide 209
Slide 209 text
Router
Slide 210
Slide 210 text
Router
1. Target a desired view
2. Find the most specific template based
on an order of precedence
3. Invoke the template
Slide 211
Slide 211 text
Components
Views Layo
Speakers
Talks
Slide 212
Slide 212 text
Compo
Views
Speakers
Talks
Routers
Slide 213
Slide 213 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {% include ‘_routers/snippet’ with { entry: talk } %} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 214
Slide 214 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {% include ‘_routers/snippet’ with { entry: talk } %} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 215
Slide 215 text
{#
Snippet Router
#}
{%- include [
'_views/snippets/' ~ entry.section ~ '/' ~ entry.type,
'_views/snippets/' ~ entry.section ~ '/default',
'_views/snippets/' ~ entry.section,
'_views/snippets/default',
] -%}
_routers/snippet.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 216
Slide 216 text
{#
Snippet Router
#}
{%- include [
'_views/snippets/' ~ entry.section ~ '/' ~ entry.type,
'_views/snippets/' ~ entry.section ~ '/default',
'_views/snippets/' ~ entry.section,
'_views/snippets/default',
] -%}
_routers/snippet.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 217
Slide 217 text
{#
Snippet Router
#}
{%- include [
'_views/snippets/' ~ entry.section ~ '/' ~ entry.type,
'_views/snippets/' ~ entry.section ~ '/default',
'_views/snippets/' ~ entry.section,
'_views/snippets/default',
] -%}
_routers/snippet.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 218
Slide 218 text
{#
Snippet Router
#}
{%- include [
'_views/snippets/' ~ entry.section ~ '/' ~ entry.type,
'_views/snippets/' ~ entry.section ~ '/default',
'_views/snippets/' ~ entry.section,
'_views/snippets/default',
] -%}
_routers/snippet.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 219
Slide 219 text
{#
Snippet Router
#}
{%- include [
'_views/snippets/' ~ entry.section ~ '/' ~ entry.type,
'_views/snippets/' ~ entry.section ~ '/default',
'_views/snippets/' ~ entry.section,
'_views/snippets/default',
] -%}
_routers/snippet.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 220
Slide 220 text
{% block snippet_main %}
{% block snippet_content %} {{ entry.title }} {% endblock %}
{% endblock %} _views/snippets/default.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22Slide 221
Slide 221 text
{% block snippet_main %}
{% block snippet_content %} {{ entry.title }} {% endblock %}
{% endblock %} _views/snippets/default.twig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22Slide 222
Slide 222 text
{% extends '_views/snippets/default' %}
{% block snippet_content %}
{{ entry.year }} – {{ parent() }}
{% endblock %}
_views/snippets/talks.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 223
Slide 223 text
Compo
Views
Speakers
Talks
Routers
Slide 224
Slide 224 text
Compo
Views
Speakers
Talks
Routers
Slide 225
Slide 225 text
Views can be nested in any order.
Slide 226
Slide 226 text
Detail (Speaker)
Teaser (Talk)
Snippet (Track)
Detail (Speaker)
Snippet (Track)
Slide 227
Slide 227 text
Routers Views Components Layouts
Slide 228
Slide 228 text
_views
"
templates/
_routers
" _components
" _layouts
"
Slide 229
Slide 229 text
_components
"
_views
!
templates/
_routers
!
snippet.twig
detail.twig
teaser.twig
page.twig
teasers
snippets
details
"
"
"
_layouts
"
Slide 230
Slide 230 text
_components
"
_views
!
templates/
_routers
!
snippet.twig
detail.twig
teaser.twig
page.twig
teasers
snippets
details
"
"
"
_layouts
"
Slide 231
Slide 231 text
No content
Slide 232
Slide 232 text
No content
Slide 233
Slide 233 text
No content
Slide 234
Slide 234 text
No content
Slide 235
Slide 235 text
h/t: Flexible Twig Templates in Craft by Anthony Colangelo and Ryan Irelan
Slide 236
Slide 236 text
h/t: Flexible Twig Templates in Craft by Anthony Colangelo and Ryan Irelan
Slide 237
Slide 237 text
{% extends '_layouts/page' %}
{% block page_main %}
{% include '_routers/detail' with { entry: entry } %}
{% endblock %}
_routers/page.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 238
Slide 238 text
{% extends '_layouts/page' %}
{% block page_main %}
{% include '_routers/detail' with { entry: entry } %}
{% endblock %}
_routers/page.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 239
Slide 239 text
{% extends '_layouts/page' %}
{% block page_main %}
{% include '_routers/detail' with { entry: entry } %}
{% endblock %}
_routers/page.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 240
Slide 240 text
{#
Detail Router
#}
{%- include [
'_views/details/' ~ entry.section ~ '/' ~ entry.type,
'_views/details/' ~ entry.section ~ '/default',
'_views/details/' ~ entry.section,
'_views/details/default',
] -%}
_routers/detail.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 241
Slide 241 text
{#
Detail Router
#}
{%- include [
'_views/details/' ~ entry.section ~ '/' ~ entry.type,
'_views/details/' ~ entry.section ~ '/default',
'_views/details/' ~ entry.section,
'_views/details/default',
] -%}
_routers/detail.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Slide 242
Slide 242 text
{#
Detail Router
#}
{%- include [
'_views/details/' ~ entry.section ~ '/' ~ entry.type,
'_views/details/' ~ entry.section ~ '/default',
'_views/details/' ~ entry.section,
'_views/details/default',
] -%}
_routers/detail.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
What if we want to make the
related talks a bit more engaging?
Slide 243
Slide 243 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {% include '_routers/snippet' with { entry: talk } %} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 244
Slide 244 text
{% block detail_body_after %}
{#
Talks by this Speaker
#}
{% set talks = craft.entries({
section: 'talks',
relatedTo: entry,
}).all() %}
{% if talks|length %}
Talks by {{ entry.firstName }}
-
{% for talk in talks %}
{% block related_item %}
- {% include ‘_routers/teaser' with { entry: talk } %} _views/details/speakers.twig 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Slide 245
Slide 245 text
Recap
1. Content Modelling
3. Translate Modules
into Templates
2. Identify Representations
and Modules
Objects
Views
Views (Objects)
Routers
+
Slide 246
Slide 246 text
n = views + object-types
Slide 247
Slide 247 text
Routers Views Components Layouts
Slide 248
Slide 248 text
Modular Architecture for
Building Content Websites
Slide 249
Slide 249 text
Decoupled
Evolvable
Reusable
Slide 250
Slide 250 text
Decoupled
Evolvable
Reusable Components
Views
Layouts
Decoupled
✓
Slide 251
Slide 251 text
Decoupled
Evolvable
Reusable Nesting
Stacking
Cascading
Reusable
✓
✓
Slide 252
Slide 252 text
Decoupled
Evolvable
Reusable
Cascading
Evolvable
✓
✓
✓
Extensible
+
Slide 253
Slide 253 text
Decoupled
Evolvable
Reusable
Evolvable
✓
Decoupled
✓
Reusable
✓
Slide 254
Slide 254 text
Flexible and Maintainable.
Slide 255
Slide 255 text
Scales better.
Slide 256
Slide 256 text
No content
Slide 257
Slide 257 text
Elements + Routing + Twig
Slide 258
Slide 258 text
This architecture does not
replace a Design System or a
“Content Builder” approach.
Slide 259
Slide 259 text
This is a complimentary system.
Slide 260
Slide 260 text
Works in projects big or small.