Web components, polymer and aligning drupal's destiny

courses.institution.edu/{course}

blogs.institution.edu/{course}

discuss.institution.edu/{course}

studio.institution.edu/{course}

NGDL
E
Image ©2015 Buttercups Training, used with permission.

Polymer helps us build web components

Not pattern lab (but similar concept)

Not Angular or React (again, similar concepts)

<awesome-explosion>
</awesome-explosion>

<awesome-explosion size=“tiny”>
<awesome-explosion size=“small”>
<awesome-explosion size=“big”>
<awesome-explosion size=“epic”>

<awesome-explosion color=“blue”>
<awesome-explosion color=“yellow”>
<awesome-explosion color=“red”>
<awesome-explosion color=“purple”>

<awesome-explosion size=“big” color=“red”>
</awesome-explosion>

Ok, but what uses Web Components?

Google Earth built on web components

YouTube.com/new built on web components

ELMS:LN is loaded with Web Components

Cons of this approach
• Browser Support

Pros of this approach
• Separation of concerns ✅
• “Headless” theming ✅
• Unidirectional data flow ✅
• Component architecture ✅
• Design Documentation ✅
• Framework Interoperability 😱

FRAMEWORK
INTEROPERABILITY
• Drupal ✅
• GravCMS ✅
• Home grown ✅
• Static generators ✅
• Joomla ✅
• Wordpress 😱

LRN Web Components for Teaching & Learning

Web components module bridges Drupal

Render articles through a hero component

Create the elmsln-hero web component

Place the component in scope of drupal

Turn on the web components module

Render content through elmsln-hero
viewmode

Drupal + web components = ♥️

Webcomponents: One Page App integration

Place “app” in a module/apps directory

Add ”app_integration” to manifest.json

How the App knows to talk to Drupal

Seeing the XHR via source-path

3 little Drupal functions away from pure PHP

Relevant links:
• https://www.webcomponents.org/
• https://www.drupal.org/project/webcomponents
• https://www.polymer-project.org/
• https://drupal.psu.edu/blog
• https://www.elmsln.org/

Web components, polymer and aligning drupal's destiny

Related slideshows

More Related Content

Web components, polymer and aligning drupal's destiny

Editor's Notes