Entity Reference as a
Component-based Site Builder
Anton Staroverov
Site Building | https://events.drupal.org/node/13331
Anton Staroverov
UI Lead at Acronis
Professional Product Manager, UX Designer and Front End Developer, all-in-one.
Currently working on a new concept of Content Management Systems (CMS) based on the Atomic Design principles.
The Entity
Entity
D8 core
The only thing you should know about Entity —
it's simple
set of fields ;)
Field
= Atom
Entity
= Molecule
Atomic Design
Node
Title
Body
Built-in entities
D8 core
Node
User
Term
Comment
Block
Menu item
Title
Body
Name
Bio
Picture
Title
Description
Summary
Message
Title
Content
Title
Description
Link
Custom entities
Media entities
Entity translation
D8 core
Node
Title
Body
Authors
User
Name
Another user
Name
Entity reference
Picture
Picture
The Reference
Entity reference
D8 core
Entity nesting
(by reference)
Node
User
Inline editing
D8 core
Contextual links
D8 core
Inline entity forms
Entity pickers
Reference to revision
Reference to view mode
Reference preview
Sounds cool, but...
Menu item
Menu item
Menu item
Menu item
Term title
Node teaser
Node teaser
Side block
Breadcrumbs block
User
User
The Power
Entity tree
- Page body
- List of nodes
- Node teaser
- Title
- Body
- Author
- Name
- Picture
- Node teaser
- Node teaser
- Sidebar
- Block
- Title
- Content
- Block
- Block
- List of nodes
-
Two column layout entity
-
Stack layout entity
-
Node entity
- String field
- Text field
-
User entity
- String field
- Image field
- Node entity
-
Node entity
-
Stack layout entity
-
Block entity
- String field
- Text field
- Block entity
-
Block entity
-
Stack layout entity
Whole page?
- Page
- Menu
- Menu item
- Title
- Link
- Menu item
- Menu item
- Header
- Breadcrumbs
- Title
- Body
- ...
- Footer
- Text
- Menu
-
Stack layout entity
-
Menu entity
-
Link entity
- String field
- Link field
- Link entity
-
Link entity
-
Header entity
- [page crumbs]
- [page title]
-
Two column layout entity
- ...
-
Block entity
- Text field
-
Menu entity
Layout as a content
(by layout entities)
- Custom layouts
- Layout translation
- Layout revisioning
- Layout reference
- ...
Ultimate flexibility
- Highly reusable
- Replacable
- Customizable
More power
Flat nesting
User
User
User
Directors
Managers
Management Team
- Management Team
- Directors
- User
- User
- User
- Managers
- User
- User
- User
- User
- User
- User
- User
- User
- ...
- Directors
-
Stack layout entity
-
3-column layout entity
- User entity
- User entity
- User entity
-
5-column layout entity
- User entity
- User entity
- User entity
- User entity
- User entity
- User entity
- User entity
- User entity
- ...
-
3-column layout entity
Stack layout
Title
Items
3-col layout
Title
Items
User
Name
Picture
Instead of:
Stack layout
Title
3-col layout
Title
User
Name
Picture
Item
Page
Item
Item
Item
Item
Item
Item
Item
...
Single field!
Let's do:
UI Bricks
Dynamic reference
User
Name
Bio
Picture
Tags
View entity
Title
View
Get all entities tagged by ...
- Management Team
- Directors
- User
- User
- User
- Managers
- User
- User
- User
- User
- User
- User
- User
- User
- ...
- Directors
-
Stack layout entity
-
View entity #Directors
- [User entity]
- [User entity]
- [User entity]
-
View entity #Managers
- [User entity]
- [User entity]
- [User entity]
- [User entity]
- [User entity]
- [User entity]
- [User entity]
- [User entity]
- ...
-
View entity #Directors
Note #1:
Be minimalistic.
Field Collection
Field Group
Panels
Display Suite
Paragraphs
Note #2:
Stay flexible.
But not too much!
Flexible content
- Custom fields
- Dynamic order
- Flexible layout
Structured content
- Constant fields
- Constant order
- Constant layout
- Per-entity customization
- Nested entities
- Layout entities
- Per-bundle customization
- Single entity with fields
- Simple layout solution
Note #3:
Don't be afraid.
Experiment!
Why not to mix flexible and structured content?
We’re not designing pages, we’re designing systems of components.
— Stephen Hay
← Repeat
Thank you!
Love Drupal
Discover
Entity Reference
D8 core
Do backup
Entity Reference as a Component-based Site Builder
By Anton Staroverov
Entity Reference as a Component-based Site Builder
DrupalCon Dublin 2016, DrupalCamp London 2017
- 3,019
