Won't You Take Me to Chunk-y Town: Component-based theming and the future of Drupal front-end development
2 likes575 views
The document discusses the concept of component theming in Drupal front-end development, emphasizing the importance of encapsulation, reuse, and communication between components. It highlights challenges within Drupal's existing structures and suggests solutions for defined contexts, templates, and data handling. The presentation aims to encourage collaboration among developers and designers, improving user experience and performance in web development using components.
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
- 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