SlideShare a Scribd company logo
CHUNK-Y TOWN
won’t you take me to…
Component theming

and the future of Drupal
front-end development
Marc Drummond
Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
Marc Drummond
@MarcDrummond
mdrummond
IRC, drupal.org
marcdrummond.com
Front-end Developer, Lullabot
C E L E B R A T I O N
S P R I N T
Give this a spin Sunday!
M I D C A M P 2 0 1 6
C h u n k s ?
Ummm… why?
Photo credit: shibuya dee, “Bell Bottoms”, Flickr Creative Commons
How do we make this happen?
Photo credit: Charles Rodstrom, “Andrea’s Go-Go Boots”, Flickr Creative Commons
C ’ E S T CHUNK
Le funk
Components
Understanding
B R E A K I T D OW N
Identify components in a design
BANNER
FEATURES
BODY
RELATED
FOOTER
SOCIAL
COPYRIGHT
BRANDING MENU
BANNER TEXT
FEATURE FEATURE FEATURE
BODY HEADING
BODY TEXT
BODY LINK
B R I C K H O U S E
Defining components
Photo credit: Mark Nicolson, “Lego House”, Flickr Creative Commons
B R I C K 

H O U S E
C O M P O N E N T S …
Contain data
C O M P O N E N T S …
Contain other components
C O M P O N E N T S …
Include related CSS
C O M P O N E N T S …
Include related JS
C O M P O N E N T S …
Include related images
C O M P O N E N T S …
Ideally one template per component
C O M P O N E N T
HTML Template
CSS JS Images
Data ChildContext
Photo credit: Nukamari, “Saturday Night Fever”, Flickr Creative Commons
C O N T E X T
Component
communication
C O M M U N I C A T I O N
Pass data down to child components
C O M M U N I C A T I O N
Specify necessary data (context)
Photo credit: wrme2, “24”, Flickr Creative Commons
C O N T E X T U P
Data down
P RO P S V S S T A T E
Gotta get up to get down
P RO P S
Immutable data
S T A T E
Data depending on outside state
C H A N G E S T A T E ?
Action on component triggers event
C H A N G E S T A T E ?
Event changes state
C H A N G E S T A T E ?
State passed down to component: re-render
S T A T E
Parent
Button
Child
This
S T A T E
Parent
Button
Child
This
S T A T E
Parent
Button
Child
This
S T A T E
Parent
Button
Child
That
B E N E F I T S
Why components?
B E N E F I T S
Encapsulation
B E N E F I T S
Pattern reuse
B E N E F I T S
Great for teams
B E N E F I T S
Performance benefits with http2?
Q U O VA D I S ?
Who benefits?
W H O B E N E F I T S ?
Designers
W H O B E N E F I T S ?
Front-end Developers: Design
B E M
CSS Components
.event-teaser {
}
.event-teaser__name {
}
.event-teaser__date {
}
.event-teaser--fundraiser {
}
S T Y L E G U I D E S
KSS Node
P A T T E R N L I B R A R I E S
Pattern Lab
P A T T E R N L I B R A R I E S
Pattern Lab
P A T T E R N L I B R A R I E S
Pattern Lab
P A T T E R N L I B R A R I E S
Pattern Builder, 

Fractal, Drizzle
W H O B E N E F I T S ?
Front-end Developers: Interaction
J S C O M P O N E N T S
Angular 2, React, Ember
J S C O M P O N E N T S
ES2015 Modules
W E B C O M P O N E N T S
Custom elements + shadow DOM: Polymer
W H O B E N E F I T S ?
Site Builders: Outside In
J U S T Y O U R T Y P E
Kinds of Components
P AG E
Home page, Landing page, Article page
Main section
Footer section
Header section
S E C T I O N
Header, Footer
Menu
Branding Search
I T E M S E R I E S
River of News, Event list
Article teaser
Article teaser
Article teaser
Pager
I T E M
Story teaser, Event teaser, Event details
Teaser text
Tags
Headline
Byline
Image
DA T A S E R I E S
Tag list, Event dates
Tag heading
Tag Tag
Tag Tag
Tag Tag
DA T A I T E M
Image, taxonomy term, event date
Tag link target
Tag link text
C O M B O
Flyout menu
Menu
Social links
Branding Search
Terms
Contact links
L A Y O U T
Generic layout with slots for site builders
Column 1 Column 2
S U R V I V E
I will
Components
&Drupal
T H E G O O D
Component-y things in Drupal
B L O C K S
Blocks understand context!
D I S P L A Y M O D E S
But… tightly tied to nodes
P A N E L S
Custom content panes, mini-panels
S E R I E S
Views list of display modes
S E R I E S
Node queue, entity queue
F I E L D S
Field template = data list of data items
T H E B A D
Component challenges with Drupal
DA T A S T RU C T U R E S
Templates tied tightly to Drupal data
T H E U G L Y
I have to do what now?
T E M P L A T E S G A L O R E
Multiple templates per component
node--teaser--event
field--image--event
image--event
field--tags--event
A N A L O G Y A L E RT
Base styles vs BEM components
A N A L O G Y A L E RT
Base templates vs template suggestions
A N A L O G Y A L E RT
As overrides increase, value of base decreases
D I S C O I N F E R N O
Burn the mother down
Components
off the island
Trouble getting
D R I L L A B I L I T Y
One template per component
I T E M C O M P O N E N T S
Includes Data Series with Data Items
Tag list heading
Article Teaser
Tag Tag
I T E M C O M P O N E N T S
Separate templates for Data Series and Items?
I T E M C O M P O N E N T S
One template: use Data Series/Items attributes?
<div class=“tags”>
<h2 class=“tags__heading”>{{ tags.heading }}</h2>
<ul {{ tags.Attributes.addClass(‘tags__list’ }}>
{% for tag in tags %}
<li {{ tag.Attributes.addClass(‘tags__item’ }}>
<a class=“tags__item-link” href=“{{ tag.link }}”>
{{ tag.text }}
</a>
</li>
{% endfor %}
</ul>
</div>
P R E S E N T E R S
Replacing preprocess functions
P R E P RO C E S S
Raw data > Template variables
P R E P RO C E S S
Tied to PHP
T W I G P R E S E N T E R S
Raw data > Template variables
T W I G P R E S E N T E R
Presenter
Logic
Component
Markup
Raw data
E X T E N S I B I L I T Y ?
Modules, themes register mini-presenters?
E X T E N S I B I L I T Y ?
Include mini-presenters in main presenter?
Presenter
Mini-presenter
Mini-presenter
Mini-presenter
C H I L D C O M P O N E N T S
Self-rendering arrays vs. includes
R E N D E R A R R A Y S
Giant arrays of data: loads of context!
R E N D E R A R R A Y S
Decide how to render themselves
R E N D E R A R R A Y S
Pick their template from suggestions
R E N D E R A R R A Y S
Contain arbitrary elements
E X P L I C I T I N C L U D E S
Specify template and pass in variables
T W I G B L O C K S ?
Wrap render array variable in block?
{%block content %}
{{ content }}
{% endblock
T W I G B L O C K S ?
External sources: explicitly include templates
{%block content %}
{{ include(’field’, {heading: ‘Tags’}) }}
{{ include(’field’, {heading: ‘Image’}) }}
{{ include(’field’, {heading: ‘CTA’}) }}
{% endblock
C O N F L I C T
Frameworks, style guides don’t have site builders
C O N F L I C T
Site builder flexibility strength of Drupal
A T T R I B U T E S
Unique Drupal data structures
T W I G E X T E N S I O N S
Replicate outside Drupal?
T H E M E T R E E
Inheritance outside Drupal
C O M P L E X O U T P U T
Theme does not contain all output code
C O M P L E X O U T P U T
Output depends on inheritance chain
Theme
Base Theme
Core Modules
Contrib Modules
R E G I S T R Y
Is this needed for templates, inheritance?
T W I G E X T E N D S
Will this work without access to theme tree?
L I B R A R I E S
The when and where of CSS/JS
A T T AC H L I B R A R Y ?
Can attach to templates… sometimes
A T T AC H L I B R A R Y ?
Routes attach libraries
A T T AC H L I B R A R Y ?
Logic in preprocess attaches libraries
C O N T E X T
Can’t we just use blocks?
D E F I N I N G C O N T E X T ?
Specify context needed through YML?
D E F I N I N G C O N T E X T ?
Specify context needed through JSON?
D E F I N I N G C O N T E X T ?
How do we bubble up context?
D E F I N I N G C O N T E X T ?
Block plugins can handle context
D E F I N I N G C O N T E X T ?
Block plugins outside Drupal?
I T ’ S C O M P L I C A T E D
External reuse compelling but hard
D RU P A L F I R S T ?
Focus on component use in Drupal?
E X T E R N A L R E U S E ?
How much complexity does this add?
E X T E R N A L R E U S E ?
This is where the energy is!
W E A R E F A M I L Y
Component
Theming Efforts
You, your chunks and me
C O M P O N E N T L I B R A R I E S
Register component namespaces
https://www.drupal.org/project/components
D RU P A L 8 Z E N
Presenters and namespaces
https://www.drupal.org/project/zen
P A T T E R N L A B 

D RU P A L T W I G
Drupal Twig Extensions
https://github.com/pattern-lab/edition-php-drupal-standard
P A T T E R N L A B 

S T A RT E R 8
Phase2
https://www.phase2technology.com/blog/introducing-pattern-lab-starter-8/
P A T T E R N B U I L D E R
JSON Schemas and Paragraphs
https://github.com/PatternBuilder/pattern-builder-drupal
W I M ’ S P A T C H
Register components with Drupal
https://www.drupal.org/node/2702061
D RU P A L T W I G S L AC K
#Components chat and meetings
https://drupaltwig-slack.herokuapp.com/
C H U N K - Y M U S I C
Component
Vision for
Theming
Play that
D E F I N E O N C E
Reuse inside and outside Drupal
P A T T E R N L I B R A R Y
In sync with prod, default data
E X T E N S I B L E D E F I N I T I O N S
Core and contrib, modules and themes
C L I E N T - S I D E R E U S E
Enhance user experience
W E B C O M P O N E N T S
Improve performance with http2
O U T S I D E I N
Boost site building with components
D E F I N E P AG E S
e.g. Panels/Panels Everywhere
S E C T I O N S A N D C O M B O S
e.g. Mini-Panels
I T E M S E R I E S
e.g. Views and Entity Queues
I T E M S
e.g. Views, Display Modes, Panel Panes
C O M P O N E N T L A Y O U T S
Generic vs custom markup
C O M P O N E N T E X T E N S I O N S
Define base: Inherit defaults in variations
C H U N K S
Components
Help move
forward
It’s raining
T E S T
Try out implementations!
T A L K
Join us on Slack!
S P R I N T
Give this a spin Sunday!
Photo credit: Dread Pirate Jeff, “Disco Steve VS The Cat”, Flickr Creative Commons
Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
Marc Drummond
@MarcDrummond
mdrummond
IRC, drupal.org
marcdrummond.com
Front-end Developer, Lullabot

More Related Content

Similar to Won't You Take Me to Chunk-y Town: Component-based theming and the future of Drupal front-end development

Reduce, Reuse, Refactor
Reduce, Reuse, RefactorReduce, Reuse, Refactor
Reduce, Reuse, Refactor
cklosowski
 
Model Serving via Pulsar Functions
Model Serving via Pulsar FunctionsModel Serving via Pulsar Functions
Model Serving via Pulsar Functions
Arun Kejariwal
 
State of Drupal keynote, DrupalCon Dublin
State of Drupal keynote, DrupalCon DublinState of Drupal keynote, DrupalCon Dublin
State of Drupal keynote, DrupalCon Dublin
Dries Buytaert
 
Scaling Up AI Research to Production with PyTorch and MLFlow
Scaling Up AI Research to Production with PyTorch and MLFlowScaling Up AI Research to Production with PyTorch and MLFlow
Scaling Up AI Research to Production with PyTorch and MLFlow
Databricks
 
Understanding WordPress Filters and Actions
Understanding WordPress Filters and ActionsUnderstanding WordPress Filters and Actions
Understanding WordPress Filters and Actions
Ian Wilson
 
Semantic SEO in the post Hummingbird Era and WordLift
Semantic SEO in the post Hummingbird Era and WordLiftSemantic SEO in the post Hummingbird Era and WordLift
Semantic SEO in the post Hummingbird Era and WordLift
Andrea Volpini
 
Web dev syllabus
Web dev syllabusWeb dev syllabus
Web dev syllabus
Adithcheshan
 
Web+Dev+Syllabus.pdf
Web+Dev+Syllabus.pdfWeb+Dev+Syllabus.pdf
Web+Dev+Syllabus.pdf
MohammadAhmad589157
 
Angular server side rendering with NodeJS - In Pursuit Of Speed
Angular server side rendering with NodeJS - In Pursuit Of SpeedAngular server side rendering with NodeJS - In Pursuit Of Speed
Angular server side rendering with NodeJS - In Pursuit Of Speed
Ilia Idakiev
 
Drupal 8.3.0: the features are ready, are you?
Drupal 8.3.0: the features are ready, are you?Drupal 8.3.0: the features are ready, are you?
Drupal 8.3.0: the features are ready, are you?
Gábor Hojtsy
 
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
Jon Peck
 
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
Bartosz Chrabski
 
SharePoint Saturday Redmond - Building solutions with the future in mind
SharePoint Saturday Redmond - Building solutions with the future in mindSharePoint Saturday Redmond - Building solutions with the future in mind
SharePoint Saturday Redmond - Building solutions with the future in mind
Chris Johnson
 
Meteor WWNRW Intro
Meteor WWNRW IntroMeteor WWNRW Intro
Meteor WWNRW Intro
Stephan Hochhaus
 
Architecture tests: Setting a common standard
Architecture tests: Setting a common standardArchitecture tests: Setting a common standard
Architecture tests: Setting a common standard
Piotr Horzycki
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
uxpin
 
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation20192019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
TYPO3 CertiFUNcation
 
The Expanding Boundaries of CSS
The Expanding Boundaries of CSSThe Expanding Boundaries of CSS
The Expanding Boundaries of CSS
chriseppstein
 
Apache Spark: the next big thing? - StampedeCon 2014
Apache Spark: the next big thing? - StampedeCon 2014Apache Spark: the next big thing? - StampedeCon 2014
Apache Spark: the next big thing? - StampedeCon 2014
StampedeCon
 
An Introduction to React -- FED Date -- IBM Design
An Introduction to React -- FED Date -- IBM DesignAn Introduction to React -- FED Date -- IBM Design
An Introduction to React -- FED Date -- IBM Design
Josh Black
 

Similar to Won't You Take Me to Chunk-y Town: Component-based theming and the future of Drupal front-end development (20)

Reduce, Reuse, Refactor
Reduce, Reuse, RefactorReduce, Reuse, Refactor
Reduce, Reuse, Refactor
 
Model Serving via Pulsar Functions
Model Serving via Pulsar FunctionsModel Serving via Pulsar Functions
Model Serving via Pulsar Functions
 
State of Drupal keynote, DrupalCon Dublin
State of Drupal keynote, DrupalCon DublinState of Drupal keynote, DrupalCon Dublin
State of Drupal keynote, DrupalCon Dublin
 
Scaling Up AI Research to Production with PyTorch and MLFlow
Scaling Up AI Research to Production with PyTorch and MLFlowScaling Up AI Research to Production with PyTorch and MLFlow
Scaling Up AI Research to Production with PyTorch and MLFlow
 
Understanding WordPress Filters and Actions
Understanding WordPress Filters and ActionsUnderstanding WordPress Filters and Actions
Understanding WordPress Filters and Actions
 
Semantic SEO in the post Hummingbird Era and WordLift
Semantic SEO in the post Hummingbird Era and WordLiftSemantic SEO in the post Hummingbird Era and WordLift
Semantic SEO in the post Hummingbird Era and WordLift
 
Web dev syllabus
Web dev syllabusWeb dev syllabus
Web dev syllabus
 
Web+Dev+Syllabus.pdf
Web+Dev+Syllabus.pdfWeb+Dev+Syllabus.pdf
Web+Dev+Syllabus.pdf
 
Angular server side rendering with NodeJS - In Pursuit Of Speed
Angular server side rendering with NodeJS - In Pursuit Of SpeedAngular server side rendering with NodeJS - In Pursuit Of Speed
Angular server side rendering with NodeJS - In Pursuit Of Speed
 
Drupal 8.3.0: the features are ready, are you?
Drupal 8.3.0: the features are ready, are you?Drupal 8.3.0: the features are ready, are you?
Drupal 8.3.0: the features are ready, are you?
 
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
The Great Consolidation: Entertainment Weekly Migration Case Study (DrupalCon...
 
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
 
SharePoint Saturday Redmond - Building solutions with the future in mind
SharePoint Saturday Redmond - Building solutions with the future in mindSharePoint Saturday Redmond - Building solutions with the future in mind
SharePoint Saturday Redmond - Building solutions with the future in mind
 
Meteor WWNRW Intro
Meteor WWNRW IntroMeteor WWNRW Intro
Meteor WWNRW Intro
 
Architecture tests: Setting a common standard
Architecture tests: Setting a common standardArchitecture tests: Setting a common standard
Architecture tests: Setting a common standard
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation20192019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
 
The Expanding Boundaries of CSS
The Expanding Boundaries of CSSThe Expanding Boundaries of CSS
The Expanding Boundaries of CSS
 
Apache Spark: the next big thing? - StampedeCon 2014
Apache Spark: the next big thing? - StampedeCon 2014Apache Spark: the next big thing? - StampedeCon 2014
Apache Spark: the next big thing? - StampedeCon 2014
 
An Introduction to React -- FED Date -- IBM Design
An Introduction to React -- FED Date -- IBM DesignAn Introduction to React -- FED Date -- IBM Design
An Introduction to React -- FED Date -- IBM Design
 

Recently uploaded

Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
maazsz111
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 

Recently uploaded (20)

Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 

Won't You Take Me to Chunk-y Town: Component-based theming and the future of Drupal front-end development

  • 1. CHUNK-Y TOWN won’t you take me to… Component theming
 and the future of Drupal front-end development Marc Drummond
  • 2. Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons Marc Drummond @MarcDrummond mdrummond IRC, drupal.org marcdrummond.com Front-end Developer, Lullabot
  • 3. C E L E B R A T I O N
  • 4. S P R I N T Give this a spin Sunday! M I D C A M P 2 0 1 6
  • 5. C h u n k s ?
  • 6. Ummm… why? Photo credit: shibuya dee, “Bell Bottoms”, Flickr Creative Commons
  • 7. How do we make this happen? Photo credit: Charles Rodstrom, “Andrea’s Go-Go Boots”, Flickr Creative Commons
  • 8. C ’ E S T CHUNK Le funk Components Understanding
  • 9. B R E A K I T D OW N Identify components in a design
  • 10.
  • 12. BRANDING MENU BANNER TEXT FEATURE FEATURE FEATURE BODY HEADING BODY TEXT BODY LINK
  • 13. B R I C K H O U S E Defining components
  • 14. Photo credit: Mark Nicolson, “Lego House”, Flickr Creative Commons B R I C K 
 H O U S E
  • 15. C O M P O N E N T S … Contain data
  • 16. C O M P O N E N T S … Contain other components
  • 17. C O M P O N E N T S … Include related CSS
  • 18. C O M P O N E N T S … Include related JS
  • 19. C O M P O N E N T S … Include related images
  • 20. C O M P O N E N T S … Ideally one template per component
  • 21. C O M P O N E N T HTML Template CSS JS Images Data ChildContext
  • 22. Photo credit: Nukamari, “Saturday Night Fever”, Flickr Creative Commons C O N T E X T Component communication
  • 23. C O M M U N I C A T I O N Pass data down to child components
  • 24. C O M M U N I C A T I O N Specify necessary data (context)
  • 25. Photo credit: wrme2, “24”, Flickr Creative Commons C O N T E X T U P Data down
  • 26. P RO P S V S S T A T E Gotta get up to get down
  • 27. P RO P S Immutable data
  • 28. S T A T E Data depending on outside state
  • 29. C H A N G E S T A T E ? Action on component triggers event
  • 30. C H A N G E S T A T E ? Event changes state
  • 31. C H A N G E S T A T E ? State passed down to component: re-render
  • 32. S T A T E Parent Button Child This
  • 33. S T A T E Parent Button Child This
  • 34. S T A T E Parent Button Child This
  • 35. S T A T E Parent Button Child That
  • 36. B E N E F I T S Why components?
  • 37. B E N E F I T S Encapsulation
  • 38. B E N E F I T S Pattern reuse
  • 39. B E N E F I T S Great for teams
  • 40. B E N E F I T S Performance benefits with http2?
  • 41. Q U O VA D I S ? Who benefits?
  • 42. W H O B E N E F I T S ? Designers
  • 43. W H O B E N E F I T S ? Front-end Developers: Design
  • 44. B E M CSS Components .event-teaser { } .event-teaser__name { } .event-teaser__date { } .event-teaser--fundraiser { }
  • 45. S T Y L E G U I D E S KSS Node
  • 46. P A T T E R N L I B R A R I E S Pattern Lab
  • 47. P A T T E R N L I B R A R I E S Pattern Lab
  • 48. P A T T E R N L I B R A R I E S Pattern Lab
  • 49. P A T T E R N L I B R A R I E S Pattern Builder, 
 Fractal, Drizzle
  • 50. W H O B E N E F I T S ? Front-end Developers: Interaction
  • 51. J S C O M P O N E N T S Angular 2, React, Ember
  • 52. J S C O M P O N E N T S ES2015 Modules
  • 53. W E B C O M P O N E N T S Custom elements + shadow DOM: Polymer
  • 54. W H O B E N E F I T S ? Site Builders: Outside In
  • 55. J U S T Y O U R T Y P E Kinds of Components
  • 56. P AG E Home page, Landing page, Article page Main section Footer section Header section
  • 57. S E C T I O N Header, Footer Menu Branding Search
  • 58. I T E M S E R I E S River of News, Event list Article teaser Article teaser Article teaser Pager
  • 59. I T E M Story teaser, Event teaser, Event details Teaser text Tags Headline Byline Image
  • 60. DA T A S E R I E S Tag list, Event dates Tag heading Tag Tag Tag Tag Tag Tag
  • 61. DA T A I T E M Image, taxonomy term, event date Tag link target Tag link text
  • 62. C O M B O Flyout menu Menu Social links Branding Search Terms Contact links
  • 63. L A Y O U T Generic layout with slots for site builders Column 1 Column 2
  • 64. S U R V I V E I will Components &Drupal
  • 65. T H E G O O D Component-y things in Drupal
  • 66. B L O C K S Blocks understand context!
  • 67. D I S P L A Y M O D E S But… tightly tied to nodes
  • 68. P A N E L S Custom content panes, mini-panels
  • 69. S E R I E S Views list of display modes
  • 70. S E R I E S Node queue, entity queue
  • 71. F I E L D S Field template = data list of data items
  • 72. T H E B A D Component challenges with Drupal
  • 73. DA T A S T RU C T U R E S Templates tied tightly to Drupal data
  • 74. T H E U G L Y I have to do what now?
  • 75. T E M P L A T E S G A L O R E Multiple templates per component node--teaser--event field--image--event image--event field--tags--event
  • 76. A N A L O G Y A L E RT Base styles vs BEM components
  • 77. A N A L O G Y A L E RT Base templates vs template suggestions
  • 78. A N A L O G Y A L E RT As overrides increase, value of base decreases
  • 79. D I S C O I N F E R N O Burn the mother down Components off the island Trouble getting
  • 80. D R I L L A B I L I T Y One template per component
  • 81. I T E M C O M P O N E N T S Includes Data Series with Data Items Tag list heading Article Teaser Tag Tag
  • 82. I T E M C O M P O N E N T S Separate templates for Data Series and Items?
  • 83. I T E M C O M P O N E N T S One template: use Data Series/Items attributes? <div class=“tags”> <h2 class=“tags__heading”>{{ tags.heading }}</h2> <ul {{ tags.Attributes.addClass(‘tags__list’ }}> {% for tag in tags %} <li {{ tag.Attributes.addClass(‘tags__item’ }}> <a class=“tags__item-link” href=“{{ tag.link }}”> {{ tag.text }} </a> </li> {% endfor %} </ul> </div>
  • 84. P R E S E N T E R S Replacing preprocess functions
  • 85. P R E P RO C E S S Raw data > Template variables
  • 86. P R E P RO C E S S Tied to PHP
  • 87. T W I G P R E S E N T E R S Raw data > Template variables
  • 88. T W I G P R E S E N T E R Presenter Logic Component Markup Raw data
  • 89. E X T E N S I B I L I T Y ? Modules, themes register mini-presenters?
  • 90. E X T E N S I B I L I T Y ? Include mini-presenters in main presenter? Presenter Mini-presenter Mini-presenter Mini-presenter
  • 91. C H I L D C O M P O N E N T S Self-rendering arrays vs. includes
  • 92. R E N D E R A R R A Y S Giant arrays of data: loads of context!
  • 93. R E N D E R A R R A Y S Decide how to render themselves
  • 94. R E N D E R A R R A Y S Pick their template from suggestions
  • 95. R E N D E R A R R A Y S Contain arbitrary elements
  • 96. E X P L I C I T I N C L U D E S Specify template and pass in variables
  • 97. T W I G B L O C K S ? Wrap render array variable in block? {%block content %} {{ content }} {% endblock
  • 98. T W I G B L O C K S ? External sources: explicitly include templates {%block content %} {{ include(’field’, {heading: ‘Tags’}) }} {{ include(’field’, {heading: ‘Image’}) }} {{ include(’field’, {heading: ‘CTA’}) }} {% endblock
  • 99. C O N F L I C T Frameworks, style guides don’t have site builders
  • 100. C O N F L I C T Site builder flexibility strength of Drupal
  • 101. A T T R I B U T E S Unique Drupal data structures
  • 102. T W I G E X T E N S I O N S Replicate outside Drupal?
  • 103. T H E M E T R E E Inheritance outside Drupal
  • 104. C O M P L E X O U T P U T Theme does not contain all output code
  • 105. C O M P L E X O U T P U T Output depends on inheritance chain Theme Base Theme Core Modules Contrib Modules
  • 106. R E G I S T R Y Is this needed for templates, inheritance?
  • 107. T W I G E X T E N D S Will this work without access to theme tree?
  • 108. L I B R A R I E S The when and where of CSS/JS
  • 109. A T T AC H L I B R A R Y ? Can attach to templates… sometimes
  • 110. A T T AC H L I B R A R Y ? Routes attach libraries
  • 111. A T T AC H L I B R A R Y ? Logic in preprocess attaches libraries
  • 112. C O N T E X T Can’t we just use blocks?
  • 113. D E F I N I N G C O N T E X T ? Specify context needed through YML?
  • 114. D E F I N I N G C O N T E X T ? Specify context needed through JSON?
  • 115. D E F I N I N G C O N T E X T ? How do we bubble up context?
  • 116. D E F I N I N G C O N T E X T ? Block plugins can handle context
  • 117. D E F I N I N G C O N T E X T ? Block plugins outside Drupal?
  • 118. I T ’ S C O M P L I C A T E D External reuse compelling but hard
  • 119. D RU P A L F I R S T ? Focus on component use in Drupal?
  • 120. E X T E R N A L R E U S E ? How much complexity does this add?
  • 121. E X T E R N A L R E U S E ? This is where the energy is!
  • 122. W E A R E F A M I L Y Component Theming Efforts You, your chunks and me
  • 123. C O M P O N E N T L I B R A R I E S Register component namespaces https://www.drupal.org/project/components
  • 124. D RU P A L 8 Z E N Presenters and namespaces https://www.drupal.org/project/zen
  • 125. P A T T E R N L A B 
 D RU P A L T W I G Drupal Twig Extensions https://github.com/pattern-lab/edition-php-drupal-standard
  • 126. P A T T E R N L A B 
 S T A RT E R 8 Phase2 https://www.phase2technology.com/blog/introducing-pattern-lab-starter-8/
  • 127. P A T T E R N B U I L D E R JSON Schemas and Paragraphs https://github.com/PatternBuilder/pattern-builder-drupal
  • 128. W I M ’ S P A T C H Register components with Drupal https://www.drupal.org/node/2702061
  • 129. D RU P A L T W I G S L AC K #Components chat and meetings https://drupaltwig-slack.herokuapp.com/
  • 130. C H U N K - Y M U S I C Component Vision for Theming Play that
  • 131. D E F I N E O N C E Reuse inside and outside Drupal
  • 132. P A T T E R N L I B R A R Y In sync with prod, default data
  • 133. E X T E N S I B L E D E F I N I T I O N S Core and contrib, modules and themes
  • 134. C L I E N T - S I D E R E U S E Enhance user experience
  • 135. W E B C O M P O N E N T S Improve performance with http2
  • 136. O U T S I D E I N Boost site building with components
  • 137. D E F I N E P AG E S e.g. Panels/Panels Everywhere
  • 138. S E C T I O N S A N D C O M B O S e.g. Mini-Panels
  • 139. I T E M S E R I E S e.g. Views and Entity Queues
  • 140. I T E M S e.g. Views, Display Modes, Panel Panes
  • 141. C O M P O N E N T L A Y O U T S Generic vs custom markup
  • 142. C O M P O N E N T E X T E N S I O N S Define base: Inherit defaults in variations
  • 143. C H U N K S Components Help move forward It’s raining
  • 144. T E S T Try out implementations!
  • 145. T A L K Join us on Slack!
  • 146. S P R I N T Give this a spin Sunday!
  • 147. Photo credit: Dread Pirate Jeff, “Disco Steve VS The Cat”, Flickr Creative Commons
  • 148. Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons Marc Drummond @MarcDrummond mdrummond IRC, drupal.org marcdrummond.com Front-end Developer, Lullabot