Michael Schmid - CTO

Brandon Williams - Developer

2013 - 2016

Amazee Labs ⚔️ Decoupled

October 2016:

Let's build 12 Websites with the same Backend

Amazee Labs:

launched today:

www.gaultmillau.ch

Amazee Labs:

by Facebook

• started in 2012
• public in 2015

demo time

📽

Hint: SWAPI REST vs SWAPI GraphQL

GraphQL

• get exactly what you need
• multiple resources in one
• Fragments, Variables, etc. 
• Any Schema possible
• Mutations
• Versionless
• Strongly Typed

Drupal GraphQL Module

• Full GraphQL support

I’ve been using GraphQL for <24 hours, AMA

ProNoobtips

Installation

• Use Composer
• 8.x-2.x — For quickly getting data, experimenting (not production)
• 8.x-3.x — For better developer experience and “future proof,” maintainable

• Learn GraphQL first (http://graphql.org/learn/)
• Use GraphiQL
  • Comes with graphql module, access at /graphql/explorer
  • ctrl+space is your best friend
    

Usage (Basic)

8.x-2.x

{
  nodeQuery(title:"Test article") {
    nid
    status
    renderedOutput
    uid {
      entity {
        uid
        name
      }
    }
  }
}

{
  "data": {
    "nodeQuery": [{
      "nid": 1,
      "title": "Test article",
      "status": true,
      "renderedOutput": "<article class=\"node node--type-article..."
      "uid": {
        "entity": {
          "uid": 1,
          "name": "admin"
        }
      }
    }]
  }
}

8.x-3.x

{
  root {
    nodeById(id:1) {
      entityId
      entityType {
        Label
      }
    }
  }
}

{
  "data": {
    "root": {
      "nodeById": {
        "entityId": "1",
        "entityType": {
          "label": "Content"
        }
      }
    }
  }
}

Usage (Advanced, 8.x-3.x)

• Write a custom module to expose custom schema
• OOP architecture
• Look at the example module included with GraphQL
• Look at the graphql_demo module in https://github.com/fubhy/drupal-decoupled-app

I’ve been using GraphQL for <24 hours, and I have a functioning Drupal, GraphQL, React app!

GraphQL Module

• Used in Production
• Will come with default schema
• You can bring own schema
• Content and Config Entities
• Full Drupal Cache & Cache Tag support
• Mutations

React:      Frontend Library

Apollo:    GraphQL Client 

Redux:     Predictable state container

SEO! Accessibility!

Isomorphic Javascript

1. Browser requests first page
2. Nodejs on Serverside renders the Page with API requests
3. Sends HTML over to Browser
4. Browser morphs into full JS App
5. Requests go to API directly

demo time

📽

Hint: prod site isomorphic

Performance!

Multiple Requests in one

• React, Apollo and Redux keep internal cache of everything
• GraphQL has multiple Resources in one Request

demo time

📽

Hint: prod site map & footer

Hosting?

and now
all together 

everything you need

https://github.com/fubhy/drupal-decoupled-app

demo time

📽

Hint: local decoupled app