landscape through polymer exploring drupal 8 frontend (1).pdf · drupalcon new orleans front end...
TRANSCRIPT
![Page 1: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/1.jpg)
Drupalcon New Orleans
~Saket & Piyuesh
Exploring Drupal 8 FrontEnd Landscape through Polymer
![Page 2: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/2.jpg)
Drupalcon New Orleans
History of Web
![Page 3: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/3.jpg)
Drupalcon New Orleans
Front End World
- We have a plethora of tools, frameworks,
languages, abstractions etc.
![Page 4: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/4.jpg)
Drupalcon New Orleans
Choice Paralysis
![Page 5: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/5.jpg)
Drupalcon New Orleans
![Page 6: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/6.jpg)
Drupalcon New Orleans
They all share this notion of components, but they do it differently and don’t work
together.
![Page 7: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/7.jpg)
Drupalcon New Orleans
![Page 8: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/8.jpg)
Drupalcon New Orleans
HTML TemplateShadow DOM
Custom Elements
HTML Imports
native client-side templating
scoping, composition
define new HTML/DOM
loading web components
![Page 9: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/9.jpg)
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!
![Page 10: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/10.jpg)
Web Components( - Low level APIs )
![Page 11: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/11.jpg)
Drupalcon New Orleans
![Page 12: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/12.jpg)
Drupalcon New Orleans
Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
![Page 13: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/13.jpg)
Drupalcon New Orleans
READY FORPRODUCTION
![Page 14: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/14.jpg)
Drupalcon New Orleans
Over 1.3M pages
![Page 15: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/15.jpg)
Drupalcon New Orleans
Let’s create an Element
![Page 16: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/16.jpg)
Drupalcon New Orleans
![Page 17: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/17.jpg)
Drupalcon New Orleans
<site-message></site-message>
![Page 18: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/18.jpg)
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”>
![Page 19: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/19.jpg)
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 ourdependencies
![Page 20: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/20.jpg)
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 ourelement definition
![Page 21: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/21.jpg)
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 DOMan elements is in charge of creating and managing
![Page 22: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/22.jpg)
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!
![Page 23: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/23.jpg)
Drupalcon New Orleans
<header> <div> // header html </div></header><site-message></site-message><content> <div> // content </div></content>
![Page 24: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/24.jpg)
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
![Page 25: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/25.jpg)
Drupalcon New Orleans
![Page 26: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/26.jpg)
<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 yourelement configurable
![Page 27: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/27.jpg)
<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 thestate of a property
site-message.html
![Page 28: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/28.jpg)
Drupalcon New Orleans
Results
![Page 29: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/29.jpg)
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>
![Page 30: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/30.jpg)
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>
![Page 31: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/31.jpg)
Drupalcon New Orleans
ElementsBuilding blocks for a better web
![Page 32: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/32.jpg)
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/
![Page 33: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/33.jpg)
Drupalcon New Orleans
Drupal Theme
![Page 34: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/34.jpg)
Drupalcon New Orleans
Add a ‘elements’ directory in your theme’s root folder, to keep all the custom elements.
![Page 35: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/35.jpg)
Drupalcon New Orleans
If you want to use contributed custom elements, include it in your bower.json
![Page 36: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/36.jpg)
Drupalcon New Orleans
Populate all those elements in the elements.html in the elements folder
![Page 37: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/37.jpg)
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>
![Page 38: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/38.jpg)
Drupalcon New Orleans
Add elements.html in theme’s html.html.twig file in the <head> tag
<link rel="import" href="elements/elements.html">
![Page 39: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/39.jpg)
html.html.twig
webcomponents-lite.js
elements.html
![Page 40: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/40.jpg)
Drupalcon New Orleans
GULP INTEGRATION
![Page 41: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/41.jpg)
Drupalcon New Orleans
Browser Support
With the polyfills, Polymer works in these browsers:
![Page 42: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/42.jpg)
Drupalcon New Orleans
See Are We Componentized Yet? and caniuse.com for more
information on native browser support for web components.
![Page 43: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/43.jpg)
Drupalcon New Orleans
Resources
Try it out yourself: https://nola.qed42.netCodebase: 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
![Page 44: Landscape through Polymer Exploring Drupal 8 FrontEnd (1).pdf · Drupalcon New Orleans Front End World - We have a plethora of tools, frameworks, languages, abstractions etc](https://reader033.vdocuments.site/reader033/viewer/2022042810/5f9d16a6eb3fc55065687012/html5/thumbnails/44.jpg)
So How Was It? - Tell Us What You ThinkEvaluate this session - https://events.drupal.
org/neworleans2016/sessions/exploring-drupal-8-frontend-landscape-through-polymer
Thanks!