Gotta make a move to a theme system that's right for me. Components keep me movin', keep me groovin' with some energy. At MidCamp we talked about it, talked about it, talked about it it, talked about it, At Drupal Con talked about, talked about, Talked about design components. Gotta move on, From data-model templates, Gotta move on, From style guide markup duplication, Gotta move on A-won't you take me to... Chunky Town? Won't you take me to... Chunky Town. Won't you take me to... Chunky Town? Won't you take me to... Chunky Town. Chunks, Mega Chunks, Chunks, Super Chunks, Chunks, Inside Chunks. Won't you take me to... Chunky Town? At DrupalCon New Orleans, Dries Buytaert mentioned component-based theming as a potential future initiative for Drupal. This idea had been discussed at MidCamp, and further hashed out at DrupalCon. Some initial efforts have been made to prototype how we could get started with real component-based markup in Drupal theming. Currently, Drupal's theme system consists primarily of templates that are tightly tied to Drupal's data structures. While much of front-end development revolves around design components—breaking a design into smaller and smaller chunks—it can often take several template overrides to create the markup for one component. That causes difficulties in integrating Drupal with style guides or pattern libraries based around components, such as Pattern Lab or KSSNode. Markup often needs to be duplicated, once in Drupal's templates, and again in the templates that drive a style guide. Moving Drupal to a theme system based around components could have numerous benefits, from improving style guide integration to making it easier for site builders to build sites outside-in to making it easier to reuse templates both server-side and client-side. In this session we'll discuss why component-based theming matters, the current state of this discussion, and how you can help take Drupal's theme system to Chunk-y Town.

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

11. BANNER
FEATURES
BODY
RELATED
FOOTER
SOCIAL
COPYRIGHT

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