Michael Schmid

CTO Amazee

2013 - 2016

Amazee Labs ⚔️ Decoupled

October 2016:

Let's build 12 Websites with the same Backend

Amazee Labs:

www.gaultmillau.ch
www.beobachter.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

• 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)

Example

{
  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

 

GraphQL Module

• Used in Production
• Comes 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

(ServerSide rendering)

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