![56
Building it in the Real World
<div{{ attributes }}>
{% embed '@mytheme/components/hero/components.hero.twig' with {
'heading': label,
'items': content.field['#items'],
'content': content
} only
%}
{% block item -%}
{{ content.field[(loop.index0)] }}
{%- endblock item %}
{% endembed %}
</div>
mytheme/templates/block/block--entity-field--node--field-homepage-hero-media.html.twig](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-56-320.jpg)
![60
Building it in the Real World
{{ attach_library('mytheme/fun_facts') }}
{% set facts = [] %}
{% for item in content.field['#items'] %}
{% set fact = pre_render(content.field[(loop.index0)]) %}
{% if fact.field_title|default %}
{% set image = image_attr(fact.field_image) %}
{%
set fact_item = {
'title': fact.field_title['#items'][0].value,
'image': image
}
%}
{% set facts = facts|merge([fact_item]) %}
{% endif %}
{% endfor %}
{%
include '@mytheme/components/fun-fact/components.fun-fact.twig' with {
'heading': 'Fun Fact'|t,
'items': facts
} only
%}
mytheme/templates/block/block--entity-field--node--field-facts-module.html.twig](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-60-320.jpg)
![61
Building it in the Real World
<div class="fun-fact module-container" style="background-image: url('{{ items[0].image.src }}')">
<h2 class="fun-fact__heading">{{ heading }}</h2>
<div class="fun-fact__facts">
{% for fact in items -%}
<div class="fun-fact__fact content-container">
<div class="fun-fact__image">
{%
include '@mytheme/components/images/components.images.twig' with {
'src': fact.image.src,
'alt': fact.image.alt,
'sources': fact.image.sources,
'attributes': fact.image.attributes
} only
%}
</div>
<h4 class="fun-fact__title">{{ fact.title }}</h4>
</div>
{%- endfor %}
</div>
</div>
mytheme/lib/components/fun-fact/components.fun-fact.twig](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-61-320.jpg)
![76
Building it in the Real World
<div class="fun-fact module-container" style="background-image: url('{{ items[0].image.src }}')">
<h2 class="fun-fact__heading">{{ heading }}</h2>
<div class="fun-fact__facts">
{% for fact in items -%}
<div class="fun-fact__fact content-container">
<div class="fun-fact__image">
{%
include '@mytheme/components/images/components.images.twig' with {
'src': fact.image.src,
'alt': fact.image.alt,
'sources': fact.image.sources,
'attributes': fact.image.attributes
} only
%}
</div>
<h4 class="fun-fact__title">{{ fact.title }}</h4>
</div>
{%- endfor %}
</div>
</div>
mytheme/lib/components/fun-fact/components.fun-fact.twig](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-76-320.jpg)
![77
Building it in the Real World
{
"heading":"Fun Fact",
"items":[
{
"title":"Nullam quis risus eget urna mollis ornare vel eu leo.",
"image":{
"src":"../../lib/components/fun-fact/assets/fun-fact2.jpg",
"alt":"Fun fact image"
}
},
{
"title":"Sed posuere consectetur est at lobortis. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros. Sed posuere consectetur est at lobortis. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros.",
"image":{
"src":"../../lib/components/fun-fact/assets/fun-fact3.jpg",
"alt":"Fun fact image"
}
}
]
}
mytheme/lib/components/fun-fact/components.fun-fact.json](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-77-320.jpg)
![85
Building it in the Real World
{{ attach_library('mytheme/fun_facts') }}
{% set facts = [] %}
{% for item in content.field['#items'] %}
{% set fact = pre_render(content.field[(loop.index0)]) %}
{% if fact.field_title|default %}
{% set image = image_attr(fact.field_image) %}
{%
set fact_item = {
'title': fact.field_title['#items'][0].value,
'image': image
}
%}
{% set facts = facts|merge([fact_item]) %}
{% endif %}
{% endfor %}
{%
include '@mytheme/components/fun-fact/components.fun-fact.twig' with {
'heading': 'Fun Fact'|t,
'items': facts
} only
%}
mytheme/templates/block/block--entity-field--node--field-facts-module.html.twig](https://image.slidesharecdn.com/buildingdrupalsiteswithcomponents-160813145237/85/Building-Drupal-Sites-with-Components-85-320.jpg)
Building Drupal Sites with Components
- 1. with Components Building Drupal Sites Client or Event Logo
- 2. Intros DEREK “tachyon” REESE @derekreese /in/derekreese slideshare.net/derekreese I makes tools for artists to tell compelling stories with technology. I have been working with Drupal since Drupal 5. Senior Drupal Developer 2
- 3. About 3 Mediacurrent helps organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results they need. ● Single-source provider ● Specializing in Drupal since 2007 ● Headquartered in Atlanta, GA ● Team of 60+ Drupal Experts including development, design and strategy ● Clients include: Large Enterprise and high-profile global brands
- 4. Style Guide Agenda A Brief Overview of Components Finding the Solution Building it in the Real World4 3 2 1 4 Introducing the Problem The Future of Components5
- 5. A Brief Overview of Components1 5
- 6. A Crash Course in Visual Language 6
- 7. 7 “Digital media are any media that are encoded in a machine-readable format.” A Crash Course in Visual Language
- 8. Digital Media 8 Unlimited Number of forms Interpreted in a Large Amount of Ways A Crash Course in Visual Language
- 9. 9Credit: David Hiser, 1937; U.S. National Archives and Records Administration; Public Domain “The visual language is a system of communication using visual elements.”
- 10. 10 “Design is purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object.” A Crash Course in Visual Language
- 11. Visual Language 11 A Crash Course in Visual Language
- 12. Visual Language for Digital Media Design 12 A Crash Course in Visual Language
- 13. Atomic Design 13
- 14. Brad Frost Modular Design -> Atomic Design 14 A Crash Course in Visual Language Atomic Design
- 15. Atomic Design 15 Atoms tags, content, smallest attributes (colors etc.) Molecules Organisms Templates Pages A Crash Course in Visual Language <a href="http://mediacurrent. com">Atom</a>
- 16. Atomic Design 16 Atoms Molecules forms, paragraphs, menus, media items Organisms Templates Pages A Crash Course in Visual Language
- 17. Atomic Design 17 Atoms Molecules Organisms headers, footers, heroes, page bodies Templates Pages A Crash Course in Visual Language
- 18. Atomic Design 18 Atoms Molecules Organisms Templates layouts with context Pages A Crash Course in Visual Language
- 19. Atomic Design 19 Atoms Molecules Organisms Templates Pages specific instances of templates with real content A Crash Course in Visual Language
- 20. Atomic Design 20 Atoms Molecules Organisms Templates Pages http://atomicdesign.bradfrost.com/ A Crash Course in Visual Language
- 21. Components 21 Made of Atoms Correlate to Molecules, Organisms A Crash Course in Visual Language
- 22. Components in the World Wide Web 22
- 23. Search Form 23 A Crash Course in Visual Language
- 24. Menu 24 A Crash Course in Visual Language
- 25. Header 25 A Crash Course in Visual Language
- 26. Footer 26 A Crash Course in Visual Language
- 27. Hero 27 A Crash Course in Visual Language
- 28. Media Item 28 A Crash Course in Visual Language
- 29. <picture> <source media="all and (min-width: 1280px)" type="image/jpeg" sizes="100vw" data-srcset="/sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_xl_1600x700/public/hero-gallery3.jpg?itok=9FzyRG-p 1600w" srcset="/sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_xl_1600x700/public/hero-gallery3.jpg?itok=9FzyRG-p 1600w"> <source media="all and (min-width: 850px)" type="image/jpeg" sizes="100vw" data-srcset="/sites/demo.mcdev/files/styles/hero_l/public/hero-gallery3.jpg?itok=3FnTsIuM 1280w, /sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_xl_1600x700/public/hero-gallery3.jpg?itok=9FzyRG-p 1600w, /sites/demo.mcdev/files/styles/hero_l_x2/public/hero-gallery3.jpg?itok=IyzAytdb 2560w" srcset="/sites/demo.mcdev/files/styles/hero_l/public/hero-gallery3.jpg?itok=3FnTsIuM 1280w, /sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_xl_1600x700/public/hero-gallery3.jpg?itok=9FzyRG-p 1600w, /sites/demo.mcdev/files/styles/hero_l_x2/public/hero-gallery3.jpg?itok=IyzAytdb 2560w"> <source media="all and (min-width: 720px)" type="image/jpeg" sizes="100vw" data-srcset="/sites/demo.mcdev/files/styles/hero_l/public/hero-gallery3.jpg?itok=3FnTsIuM 1280w, /sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_l_x2/public/hero-gallery3.jpg?itok=IyzAytdb 2560w, /sites/demo.mcdev/files/styles/hero_m_x2_2600x1400/public/hero-gallery3.jpg?itok=J6moes0W 2600w" srcset="/sites/demo.mcdev/files/styles/hero_l/public/hero-gallery3.jpg?itok=3FnTsIuM 1280w, /sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj 1300w, /sites/demo.mcdev/files/styles/hero_l_x2/public/hero-gallery3.jpg?itok=IyzAytdb 2560w, /sites/demo.mcdev/files/styles/hero_m_x2_2600x1400/public/hero-gallery3.jpg?itok=J6moes0W 2600w"> <source media="(min-width: 0px)" type="image/jpeg" sizes="100vw" data-srcset="/sites/demo.mcdev/files/styles/hero_s_1300x550/public/hero-gallery3.jpg?itok=DzbqQ1Pb 1300w, /sites/demo.mcdev/files/styles/hero_s_x2_2600x1100/public/hero-gallery3.jpg?itok=1cXnmuU1 2600w" srcset="/sites/demo.mcdev/files/styles/hero_s_1300x550/public/hero-gallery3.jpg?itok=DzbqQ1Pb 1300w, /sites/demo.mcdev/files/styles/hero_s_x2_2600x1100/public/hero-gallery3.jpg?itok=1cXnmuU1 2600w"> <img alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et risus at orci dictum faucibus. P" typeof="foaf:Image" data-srcset="/sites/demo.mcdev/files/styles/hero_m_1300x700/public/hero-gallery3.jpg?itok=vIzdH2hj" class=" lazyloaded" Image 29 A Crash Course in Visual Language
- 31. Fields 31 A Crash Course in Visual Language
- 32. Blocks / Paragraphs / Menu Blocks 32 A Crash Course in Visual Language
- 33. Nodes & Node View Modes 33 A Crash Course in Visual Language
- 35. 35 Designers & Front End Developers Want to Design & Build Components Introducing the Problem Credit: Yoram E. Shamir, 1970’s; Public Domain
- 36. Designers & Front End Developers Want to Design & Build Components ...not worry about Drupal constraints 36 Introducing the Problem Credit: Yoram E. Shamir, 1970’s; Public Domain
- 37. Drupal Site Build with Components 37 Leads to duplicate work - matching Drupal theme templates to components Or Spending time writing CSS to visually match Drupal output to components Introducing the Problem
- 38. Drupal (Content Model) Components vs Design (Semantic) Components 38 Introducing the Problem .field--quote-text <div class=”block block--quote”> <div class=”field field--quote-text”>Lorem ipsum dolor samet.</div> <div class=”field field--quote-author”>Gratis verga</div> </div> .quote__text <div class=”quote”> <div class=”quote__text”>Lorem ipsum dolor samet.</div> <div class=”quote__author”>Gratis verga</div> </div>
- 39. Translating Data to Design 39 How to get Drupal Content into HTML/CSS/JS Atomic Components? Introducing the Problem
- 41. Creating Design Components 41 Start by working backwards Finding the Solution
- 42. Pattern Lab 42 Dave Olsen and Brian Muenzenmeyer, with occasional input from Brad Frost Finding the Solution
- 43. KSS 43 Kyle Kneath @kneath Knyle Style Sheets Documentation for CSS (SASS/SCSS etc.) http://warpspire.com/kss/ Finding the Solution // Media Item // // Media Item is used is various modules. // // Markup: components.media-item.twig // // Style guide: components.media-item .media-item { max-width: 550px; position: relative; }
- 44. KSS Node 44 John Albin https://github.com/kss-node/kss-node Kalastatic - Kalamuna https://github.com/kalamuna/kalastatic Finding the Solution
- 45. Drupal Content to KSS/Pattern Lab Components Creating a Translation Layer ● Needs to work with Twig Components ● Needs to work with Drupal ● Needs to fit in project budgets & timelines 45 Finding the Solution
- 46. Drupal Content to KSS/Pattern Lab Components Drupal Solution (out of the box with D8) Twig Includes Gives control to the design 46 Finding the Solution Copyright Sensio Labs
- 47. Synchronicities Drupalcon New Orleans Micah Godbolt & Redhat Teams John Albin Mediacurrent 47 Finding the Solution
- 48. MVP Model View Presenter Not Exclusive Taligent (Apple + HP + IBM} IBM Smalltalk Microsoft Apple 48 Finding the Solution MVC
- 49. MVP Model View Presenter Not Exclusive Taligent (Apple + HP + IBM} IBM Smalltalk Microsoft Apple 49 Finding the Solution MVC + MVP
- 50. Building it in the Real World4 50
- 51. Theme Driven Development Sound familiar? Additional Work Development -> Theming 51 Building it in the Real World
- 52. Theme Driven Development Sound familiar? Additional Work Development -> Theming Missing Ingredient: The Presenter Layer 52 Building it in the Real World
- 53. Immediate Value Add Downsides: ● Extra work ● Twig for Drupal 7 ● Removes control from Drupal UI Drupal 7 + KSS Styleguide 53 Building it in the Real World
- 54. Twig Includes Less Overall Work http://drupal.org/project/components Drupal 8 + KSS Styleguide + Presenter Layer 54 Building it in the Real World {% include '@mytheme/components/images/components.images.twig' with { 'src': item.image.src, 'alt': item.image.alt, 'attributes': item.image.attributes, 'sources': item.image.sources } only %}
- 55. + Keeps Drupal Render Inheritance + Passes control back to Drupal - Components Specifically for Drupal Drupal 8 + KSS + Twig Blocks 55 Building it in the Real World
- 56. 56 Building it in the Real World <div{{ attributes }}> {% embed '@mytheme/components/hero/components.hero.twig' with { 'heading': label, 'items': content.field['#items'], 'content': content } only %} {% block item -%} {{ content.field[(loop.index0)] }} {%- endblock item %} {% endembed %} </div> mytheme/templates/block/block--entity-field--node--field-homepage-hero-media.html.twig
- 57. 57 Building it in the Real World <div class="hero"> <div class="hero__slider slider--dots"> {% set item_class = 'hero__slider--item' %} {% for item in items -%} <div class="{{ item_class }}"> {% block item -%} {% include '@mytheme/components/hero-item/components.hero-item.twig' with { 'item': item } only %} {%- endblock item %} </div> {%- endfor %} </div> </div> mytheme/lib/components/hero/components.hero.twig
- 58. 58 Building it in the Real World <h1 class="hero__title">{{ item.title }}</h1> <div class="hero__slider--image"> {% include '@mytheme/components/images/components.images.twig' with { 'src': item.image.src, 'alt': item.image.alt, 'attributes': item.image.attributes, 'sources': item.image.sources } only %} </div> {% if item.url|default -%} <div class="hero__view-more-button"> <a href="{{ item.url }}" class="button">{{ item.viewmore }}</a> </div> {%- endif %} mytheme/lib/components/hero-item/components.hero-item.twig
- 59. Can use Twig Components As-is Still a WIP Not a good substitute for Core https://www.drupal.org/sandbox/cybtachyon/2744911 Drupal 8 + KSS + Twig Pre-Render Module 59 Building it in the Real World
- 60. 60 Building it in the Real World {{ attach_library('mytheme/fun_facts') }} {% set facts = [] %} {% for item in content.field['#items'] %} {% set fact = pre_render(content.field[(loop.index0)]) %} {% if fact.field_title|default %} {% set image = image_attr(fact.field_image) %} {% set fact_item = { 'title': fact.field_title['#items'][0].value, 'image': image } %} {% set facts = facts|merge([fact_item]) %} {% endif %} {% endfor %} {% include '@mytheme/components/fun-fact/components.fun-fact.twig' with { 'heading': 'Fun Fact'|t, 'items': facts } only %} mytheme/templates/block/block--entity-field--node--field-facts-module.html.twig
- 61. 61 Building it in the Real World <div class="fun-fact module-container" style="background-image: url('{{ items[0].image.src }}')"> <h2 class="fun-fact__heading">{{ heading }}</h2> <div class="fun-fact__facts"> {% for fact in items -%} <div class="fun-fact__fact content-container"> <div class="fun-fact__image"> {% include '@mytheme/components/images/components.images.twig' with { 'src': fact.image.src, 'alt': fact.image.alt, 'sources': fact.image.sources, 'attributes': fact.image.attributes } only %} </div> <h4 class="fun-fact__title">{{ fact.title }}</h4> </div> {%- endfor %} </div> </div> mytheme/lib/components/fun-fact/components.fun-fact.twig
- 62. Non-Drupal FE Devs Large Sites w/ Many Reusable Components Sharing components between Applications (Mobile App/Desktop/Web) When to use a Drupal Components Build 62 Building it in the Real World
- 63. Single Developer / Maintainer Scenarios Decoupled / REST Builds (for now) Small Budget / Low Client Investment Builds When not to use a Drupal Components Build 63 Building it in the Real World
- 64. 64 Building it in the Real World
- 65. HTML CSS / SCSS JS Component Issue 65 Building it in the Real World We need a Fun Facts component that allows us to show off fun facts about our site. User Stories Optional - user perspective Acceptance Criteria Fun facts component and JS function as per design & functional spec. Facts can be navigated via next and previous arrows. Technical Requirements Fun facts component directory created. Deliverables: Twig component, example JSON, and KSS + Drupal JS. Links Component: http://demo.dev/themes/custom/mytheme/styleguide /dist/section-components#fun-facts
- 66. Content Types & View Modes Blocks (Custom & Otherwise) Paragraphs Build Issue 66 Building it in the Real World We need a Fun Facts component that allows us to show off fun facts about our site. User Stories Optional - editor perspective Acceptance Criteria Paragraph / block created with appropriate fields, and embedded in node display. Demo content scripted. Technical Requirements Fields for Fact text and Image added to the content model. Demo content generated for review. Links Content Fields: http://demo.dev/admin/structure/types/manage/demo/fields
- 67. The Presenter Issue Twig Template Theme Issue 67 Building it in the Real World We need a Fun Facts component that allows us to show off fun facts about our site. Acceptance Criteria Paragraph / block in node display properly shows Fun Facts component. Technical Requirements Presenter twig created for node field and set to include Fun Facts component. Links Demo Content: http://demo.dev/demo-page#facts
- 68. CSS / JS Tweaks Stakeholder Approval Finalize Issue 68 Building it in the Real World We need a Fun Facts component that allows us to show off fun facts about our site. User Stories Include a summary of the final user stories here. Acceptance Criteria Client sign-off of component in context with example or real content. Links Demo Content: http://demo.dev/demo-page#facts
- 69. Let’s demo this! 69 Building it in the Real World
- 70. Design 70
- 71. Fun Fact Design 71 Building it in the Real World
- 72. Component 72
- 73. Theme Structure 73 Building it in the Real World themes > custom > mytheme > assets > lib > base > components > layout > utils _init.scss _shame.scss _mytheme.main.scss > css > fonts > js > node_modules > styleguide > builder > dist > templates .gitignore gulpfile.js package.json README.md mytheme.breakpoints.yml mytheme.info.yml mytheme.libraries.yml mytheme.theme
- 74. Fun Fact Component Structure 74 Building it in the Real World
- 75. 75 Building it in the Real World // Fun Fact // // Fun fact component // // Markup: components.fun-fact.twig // // Style guide: components.fun-fact .fun-fact { @include breakpoint(max-width $md) { @include opacity-overlay(0.85, $color-dark-blue); background-position: center; background-size: cover; min-height: 250px; padding-bottom: 80px; padding-top: 80px; } @include breakpoint($md) { background-image: none !important; min-height: 350px; overflow: hidden; } mytheme/lib/components/fun-fact/_fun-fact.scss .slick-list { overflow: visible !important; } .slick-arrow { font-size: 60px; left: auto; right: $content-container-padding-md; @include breakpoint(max-width $md) { display: none !important; } } .slick-prev { top: 130px; } .slick-next { top: 70px; } }
- 76. 76 Building it in the Real World <div class="fun-fact module-container" style="background-image: url('{{ items[0].image.src }}')"> <h2 class="fun-fact__heading">{{ heading }}</h2> <div class="fun-fact__facts"> {% for fact in items -%} <div class="fun-fact__fact content-container"> <div class="fun-fact__image"> {% include '@mytheme/components/images/components.images.twig' with { 'src': fact.image.src, 'alt': fact.image.alt, 'sources': fact.image.sources, 'attributes': fact.image.attributes } only %} </div> <h4 class="fun-fact__title">{{ fact.title }}</h4> </div> {%- endfor %} </div> </div> mytheme/lib/components/fun-fact/components.fun-fact.twig
- 77. 77 Building it in the Real World { "heading":"Fun Fact", "items":[ { "title":"Nullam quis risus eget urna mollis ornare vel eu leo.", "image":{ "src":"../../lib/components/fun-fact/assets/fun-fact2.jpg", "alt":"Fun fact image" } }, { "title":"Sed posuere consectetur est at lobortis. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.", "image":{ "src":"../../lib/components/fun-fact/assets/fun-fact3.jpg", "alt":"Fun fact image" } } ] } mytheme/lib/components/fun-fact/components.fun-fact.json
- 78. 78 Building it in the Real World (function ($) { 'use strict'; Drupal.behaviors.funFactSlider = { attach: function (context, settings) { /* triggers fun facts slider */ $(window).on('debouncedresize', function(e) { if (window.matchMedia('(min-width: 851px)').matches) { $('.fun-fact__facts').not('.slick-initialized').slick({ autoplay: false, dots: false, arrows: true, infinite: false, mobileFirst: true, prevArrow: "<a href='#'' class='slick-prev icon-carat-left'><span>Previous</span></a>", nextArrow: "<a href='#'' class='slick-next icon-carat-right'><span>Next</span></a>" }); } else { $('.fun-fact__facts').filter('.slick-initialized').slick('unslick'); } }).trigger('resize'); }, }; })(jQuery); mytheme/lib/components/fun-fact/fun-fact.drupal.js
- 79. Fun Fact Styleguide Entry 79 Building it in the Real World
- 80. Drupal Build 80
- 81. Fun Fact Paragraph Entity 81 Building it in the Real World
- 82. Drupal Theme 82
- 83. 83 Building it in the Real World name: My Theme description: Default theme for my components demo. type: theme core: 8.x version: VERSION base theme: false # libraries libraries: - mytheme/global-styles component-libraries: mytheme: paths: - lib # regions regions: header: Header primary_menu: 'Primary menu' page_top: 'Page top' page_bottom: 'Page bottom' content: Content mytheme/mytheme.info.yml
- 84. 84 Building it in the Real World global-styles: version: 1.x css: theme: css/mytheme.main.css: {} js: js/vusa-scripts.js: {} dependencies: - core/jquery - core/drupal - core/drupalSettings fun_facts: version: 1.x js: lib/components/fun-fact/fun-fact.js: {} dependencies: - mytheme/slick slick: version: 1.x js: styleguide/dist/kss-assets/slick.min.js: {} mytheme/mytheme.libraries.yml
- 85. 85 Building it in the Real World {{ attach_library('mytheme/fun_facts') }} {% set facts = [] %} {% for item in content.field['#items'] %} {% set fact = pre_render(content.field[(loop.index0)]) %} {% if fact.field_title|default %} {% set image = image_attr(fact.field_image) %} {% set fact_item = { 'title': fact.field_title['#items'][0].value, 'image': image } %} {% set facts = facts|merge([fact_item]) %} {% endif %} {% endfor %} {% include '@mytheme/components/fun-fact/components.fun-fact.twig' with { 'heading': 'Fun Fact'|t, 'items': facts } only %} mytheme/templates/block/block--entity-field--node--field-facts-module.html.twig
- 86. Final Drupal Result 86 Building it in the Real World
- 87. The Future of Components5 87
- 88. ● Component Libraries https://www.drupal.org/project/components ● Decoupled Blocks https://www.drupal.org/project/pdb ● Twig Pre-Render https://www.drupal.org/sandbox/cybtachyon/2744911 ● Web Components API https://www.drupal.org/project/web_components In Contrib 88 The Future of Components
- 89. Multiple Applications / Same Responsive Components: ● Website ○ Drupal ● Mobile App ○ Ionic + Angular2 ● Desktop App ○ Node.js In Development 89 The Future of Components
- 90. New Theme System Presenter Layer Graph QL Presenters Drupal Core 90 The Future of Components 9.0
- 91. 91 Building it in the Real World {% include '@mytheme/components/body/components.body.twig' with graphql( { media: node(id @nid) { title, image: field_image, media: field_featured_media { video: field_video_link, length: field_video_length, credit: field_credit, copy: field_body, } } }, {'@nid': node.nid} ) only %} Graph QL Presenter Example
- 92. + Cleaner + Nuke render arrays in 9.0 + Nuke form API + Standard & Easy + Keeps Twig presenters decoupled - Experimental renderer - Add GraphQL - Build full render system (preprocess) - Potential performance concerns (needs data requirement bubble-ability) - Need an experimental GUI for presenters GraphQL Presenters in Drupal Core 92 The Future of Components
- 93. New Base Theme using Blocks Presenter Strategy https://www.drupal.org/node/2759849 Drupal Core 93 The Future of Components
- 94. Isolating Regions, Blocks etc. Reusable & Embeddable Drupal Components https://blog.radiumz.org/en/post/27/my-road-drupal-and-gsoc https://summerofcode.withgoogle.com/projects/#6580831237701632 Drupal Web Components Google Summer of Code Project 94 The Future of Components
- 95. React Angular 2 Web Components with modern JS Frameworks 95 The Future of Components Riot.js Polymer
- 96. The Clock In Browsers 96 The Future of Components <clock format="simple" />