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

https://www.drupal.org/node/2123523

set of fields ;)

Field

= Atom

Entity

= Molecule

Atomic Design

http://bradfrost.com/blog/post/atomic-web-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

/project/eck

Media entities

/project/media_entity

Entity translation

D8 core

Node

Title

Body

Authors

User

Name

Another user

Name

Entity reference

Picture

The Reference

Entity reference

D8 core

Entity nesting

(by reference)

Node

User

Inline editing

D8 core

Contextual links

D8 core

Inline entity forms

/project/inline_entity_form

Entity pickers

/project/entity_browser

/project/media_entity_browser

Reference to revision

/project/entity_reference_revisions

Reference to view mode

/project/er_viewmode

Reference preview

/project/entityreference_live_preview

Sounds cool, but...

Menu item

Term title

Node teaser

Side block

Breadcrumbs block

User

The Power

Entity tree

Page body
- List of nodes
  - Node teaser
    - Title
    - Body
    - Author
      - Name
      - Picture
  - Node teaser
- Sidebar
  - Block
    - Title
    - Content
  - Block

Two column layout entity
- Stack layout entity
  - Node entity
    - String field
    - Text field
    - User entity
      - String field
      - Image field
  - Node entity
- Stack layout entity
  - Block entity
    - String field
    - Text field
  - Block entity

Whole page?

Page
- Menu
  - Menu item
    - Title
    - Link
  - Menu item
- Header
  - Breadcrumbs
  - Title
- Body
  - ...
- Footer
  - Text

Stack layout entity
- Menu entity
  - Link entity
    - String field
    - Link field
  - Link entity
- Header entity
  - [page crumbs]
  - [page title]
- Two column layout entity
  - ...
- Block entity
  - Text field

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

Directors

Managers

Management Team

Management Team
- Directors
  - User
  - User
  - User
- Managers
  - User
  - User
  - User
  - User
  - User
  - User
  - User
  - User
  - ...

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
  - ...

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

...

Single field!

Let's do:

UI Bricks

/project/bricks

Dynamic reference

/project/viewfield

User

Name

Bio

Picture

Note #1:

Be minimalistic.

Field Collection

/project/field_collection

Field Group

/project/field_group

Panels

/project/panels

Display Suite

/project/ds

Paragraphs

/project/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

drupal.org

Discover