Exploring Drupal 8 FrontEnd Landscape through Polymer ~Saket & - PowerPoint PPT Presentation

Exploring Drupal 8 FrontEnd Landscape through Polymer ~Saket & Piyuesh Drupalcon New Orleans

History of Web Drupalcon New Orleans

Front End World - We have a plethora of tools, frameworks, languages, abstractions etc. Drupalcon New Orleans

Choice Paralysis Drupalcon New Orleans

Drupalcon New Orleans

They all share this notion of components, but they do it differently and don’t work together. Drupalcon New Orleans

Drupalcon New Orleans

Custom Elements define new HTML/DOM HTML Template native client-side templating Shadow DOM scoping, composition HTML Imports loading web components Drupalcon New Orleans

Traditional HTML With Web Components Hello DrupalCon! <input type="text" name="textbox" value=" Hello DrupalCon!"> <search-textbox text-placeholder="Search this site" search-icon="search.png"> </search-textbox> <div class="search"> <input type="text" name="textbox" placeholder="Search this site"> <input type="button" name="search"> </div> Drupalcon New Orleans

Web Components ( - Low level APIs )

Drupalcon New Orleans

Applications Existing Frameworks Web Components built with Polymer (or not) Web Platform Drupalcon New Orleans

READY FOR PRODUCTION Drupalcon New Orleans

Over 1.3M pages Drupalcon New Orleans

Let’s create an Element Drupalcon New Orleans

Drupalcon New Orleans

<site-message></site-message> Drupalcon New Orleans

site-message.html <link rel=“import” href=“../polymer/polymer.html”> <dom-module id=“site-message"> <template> </template> <script> Polymer({ is: ‘site-message' }); </script> </dom-module>

site-message.html <link rel=“import” href=“../polymer/polymer.html”> <dom-module id=“site-message"> <template> Import all of our </template> dependencies <script> Polymer({ is: ‘site-message' }); </script> </dom-module>

site-message.html <link rel=“import” href=“../polymer/polymer.html”> <dom-module id=“site-message"> <template> </template> A container for our <script> Polymer({ element definition is: ‘site-message' }); </script> </dom-module>

site-message.html <link rel=“import” href=“../polymer/polymer.html”> <dom-module id=“site-message"> <template> </template> Local DOM is the DOM <script> an elements is in charge of Polymer({ creating and managing is: ‘site-message' }); </script> </dom-module>

site-message.html <link rel=“import” href=“../polymer/polymer.html”> Hey user! Something happened! <dom-module id=“site-message"> <template> <style> .alert { background: green; color: white; } </style> <div class=“alert”> Hey user! Something happened! </div> </template> <script> Polymer({ is: ‘site-message' }); </script> </dom-module>

<header> <div> // header html </div> </header> <site-message></site-message> <content> <div> // content </div> </content> Drupalcon New Orleans

site-message.html index.html <link rel=“import” href=“../polymer/polymer. <header> html”> <div> <dom-module id=“site-message"> // header html <template> <style> </div> .alert { background: green; color: </header> white; } <site-message> </style> <span class=“message”> <div class=“alert”> Success! Your first component! <content select=“.message”></content> </span> </div> </site-message> </template> <script> <content> Polymer({ <div> is: ‘site-message' // content }); </div> </script> </content> </dom-module> Drupalcon New Orleans

Drupalcon New Orleans

site-message.html <link rel=“import” href=“../polymer/polymer.html”> <dom-module id=“site-message"> <template> <style> .alert { background: green; color: white; } </style> <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘site-message', Properties make your properties: { element configurable shown: { type: Boolean, value: false, notify: true } }); </script> </dom-module>

site-message.html <dom-module id=“site-message"> Bind attributes to the <template> … state of a property <div class=“alert” hidden="{{!shown}}"> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘site-message’, properties: { shown: { type: Boolean, value: false, notify: true } }

Results Drupalcon New Orleans

<header> <div> // header html </div> </header> <site-message> <span class=“message”> Success! Your first component! </span> </site-message> <content> <div> // content </div> </content> Drupalcon New Orleans

<header> <div> // header html </div> </header> <site-message shown> <span class=“message”> Success! Your first component! </span> </site-message> <content> <div> // content </div> </content> Drupalcon New Orleans

Elements Building blocks for a better web Drupalcon New Orleans

So adding a new feature in the site is just adding a pre-existing element available. https://customelements.io/ https://elements.polymer-project.org/ Drupalcon New Orleans

Drupal Theme Drupalcon New Orleans

Add a ‘elements’ directory in your theme’s root folder, to keep all the custom elements. Drupalcon New Orleans

If you want to use contributed custom elements, include it in your bower.json Drupalcon New Orleans

Populate all those elements in the elements.html in the elements folder Drupalcon New Orleans

Add webcomponents.js polyfill in theme’s html. html.twig file in the <head> tag <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script> Drupalcon New Orleans

Add elements.html in theme’s html.html.twig file in the <head> tag <link rel="import" href="elements/elements.html"> Drupalcon New Orleans

html.html.twig webcomponents-lite.js elements.html

GULP INTEGRATION Drupalcon New Orleans

Browser Support With the polyfills, Polymer works in these browsers: Drupalcon New Orleans

See Are We Componentized Yet? and caniuse.com for more information on native browser support for web components. Drupalcon New Orleans

Resources Try it out yourself: https://nola.qed42.net Codebase: https://github.com/qed42/nola_dcp16 Read more about Polymer : https://www.polymer-project.org ● http://webcomponents.org/ ● https://customelements.io/ ● Polycasts by Rob Dodson ● Drupalcon New Orleans

So How Was It? - Tell Us What You Think Evaluate this session - https://events.drupal. org/neworleans2016/sessions/exploring-drupal-8-frontend-landscape-through- polymer Thanks!