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

▶
exploring drupal 8 frontend landscape through polymer
SMART_READER_LITE
LIVE PREVIEW

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

May 19, 2023 322 likes •777 views

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

slide-1
SLIDE 1

Drupalcon New Orleans

~Saket & Piyuesh

Exploring Drupal 8 FrontEnd Landscape through Polymer

slide-2
SLIDE 2

Drupalcon New Orleans

History of Web

slide-3
SLIDE 3

Drupalcon New Orleans

Front End World

  • We have a plethora of

tools, frameworks, languages, abstractions etc.

slide-4
SLIDE 4

Drupalcon New Orleans

Choice Paralysis

slide-5
SLIDE 5

Drupalcon New Orleans

slide-6
SLIDE 6

Drupalcon New Orleans

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

slide-7
SLIDE 7

Drupalcon New Orleans

slide-8
SLIDE 8

Drupalcon New Orleans

HTML Template Shadow DOM Custom Elements HTML Imports

native client-side templating scoping, composition define new HTML/DOM loading web components

slide-9
SLIDE 9

Drupalcon New Orleans

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

slide-10
SLIDE 10

Web Components

( - Low level APIs )

slide-11
SLIDE 11

Drupalcon New Orleans

slide-12
SLIDE 12

Drupalcon New Orleans

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

slide-13
SLIDE 13

Drupalcon New Orleans

READY FOR PRODUCTION

slide-14
SLIDE 14

Drupalcon New Orleans

Over 1.3M pages

slide-15
SLIDE 15

Drupalcon New Orleans

Let’s create an Element

slide-16
SLIDE 16

Drupalcon New Orleans

slide-17
SLIDE 17

Drupalcon New Orleans

<site-message></site-message>

slide-18
SLIDE 18

site-message.html

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

slide-19
SLIDE 19

site-message.html

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

Import all of our

dependencies

slide-20
SLIDE 20

site-message.html

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

A container for our

element definition

slide-21
SLIDE 21

site-message.html

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

Local DOM is the DOM an elements is in charge of creating and managing

slide-22
SLIDE 22

site-message.html

<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> <link rel=“import” href=“../polymer/polymer.html”> Hey user! Something happened!

slide-23
SLIDE 23

Drupalcon New Orleans

<header> <div> // header html </div> </header> <site-message></site-message> <content> <div> // content </div> </content>

slide-24
SLIDE 24

Drupalcon New Orleans

site-message.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' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer. html”>

<header> <div> // header html </div> </header> <site-message> <span class=“message”>

Success! Your first component! </span>

</site-message> <content> <div> // content </div> </content> index.html

slide-25
SLIDE 25

Drupalcon New Orleans

slide-26
SLIDE 26

<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: { shown: { type: Boolean, value: false, notify: true } }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”>

site-message.html

Properties make your element configurable

slide-27
SLIDE 27

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

Bind attributes to the

state of a property

site-message.html

slide-28
SLIDE 28

Drupalcon New Orleans

Results

slide-29
SLIDE 29

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>

slide-30
SLIDE 30

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>

slide-31
SLIDE 31

Drupalcon New Orleans

Elements

Building blocks for a better web

slide-32
SLIDE 32

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/

slide-33
SLIDE 33

Drupalcon New Orleans

Drupal Theme

slide-34
SLIDE 34

Drupalcon New Orleans

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

slide-35
SLIDE 35

Drupalcon New Orleans

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

slide-36
SLIDE 36

Drupalcon New Orleans

Populate all those elements in the elements.html in the elements folder

slide-37
SLIDE 37

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>

slide-38
SLIDE 38

Drupalcon New Orleans

Add elements.html in theme’s html.html.twig file in the <head> tag

<link rel="import" href="elements/elements.html">

slide-39
SLIDE 39

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

slide-40
SLIDE 40

Drupalcon New Orleans

GULP INTEGRATION

slide-41
SLIDE 41

Drupalcon New Orleans

Browser Support

With the polyfills, Polymer works in these browsers:

slide-42
SLIDE 42

Drupalcon New Orleans

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

slide-43
SLIDE 43

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
slide-44
SLIDE 44

So How Was It? - Tell Us What You Think

Evaluate this session - https://events.drupal.

  • rg/neworleans2016/sessions/exploring-drupal-8-frontend-landscape-through-

polymer

Thanks!