Since the community wants to make it easier to build decoupled apps, in front of Drupal, we need an easy way for developers to do it.

This post is loosely based on https://github.com/firebase/polymerfire, which integrates Firebase with Polymer

Why

• To make it easy for developers to connect to Drupal without any knowledge.
• All components work without any custom javascript, only html and css is needed.
• Can be cached offline (app and data, both read and write)
• Works on desktop/mobile
• Works on Chrome, Firefox, Safari, Edge

Components

Drupal app

<drupal-app
  url="https://drupal.org/"
  api-key="eiQezleFsV2WddFBAhF">

Set ups the basics to connect to a Drupal backend.

Drupal login

Based on https://customelements.io/convoo/login-fire/

<drupal-login id="auth" user="{{user}}" signedIn={{signedIn}} email-password></drupal-login>

Renders a form so a user can login with username/password, if the user is already authenticated the session is refreshed.

Drupal entity

<drupal-entity uuid="uuid" fields="" data="{{node}}" />

<template node="{{node}}">
  <article>
    <h1>[[node.title]]</h1>
    [[node.body]]
  </article>
</template>

Fetches an entity from the backend with the given uuid, the user can specify a list of fields that needs to be returned.

Drupal views

<drupal-view 
  path="/my-view/[[optional-parameter]]"
  limit=10
  pager|no-pager
  data="{{items}}" 
>

<ul>
  <template is="dom-repeat" items="{{items}}" as="node">
    <li>[[node.title]]</li>
  </template>
</ul>

Fetches a list of entities

Drupal entity query

<drupal-query 
  path="/api/node/[[optional-parameter]]"
  limit=10
  pager|no-pager
  data="{{items}}" 
>

<ul>
  <template is="dom-repeat" items="{{items}}" as="node">
    <li>[[node.title]]</li>
  </template>
</ul>

Fetches a list of entities

Form components

To make it easy for developers to add input/edit screens, we need components for common widgets as well, for example <drupal-autocomplete> or <drupal-entity-reference>

GraphQL

https://www.drupal.org/project/graphql might be used to make it easier to integrate polymer with the standard REST drupal backend, so a developer can use GraphQL to query the Drupal backend and adjust the query.