2013 - 2016

Amazee Labs ⚔️ Decoupled

October 2016:

Client:

Let's build 12 Websites with the same Backend

Amazee Labs:

www.gaultmillau.ch
www.beobachter.ch

www.handelszeitung.ch

www.bilanz.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

Example

query {
  route(path: "/node/1") {
    entity {
      entityLabel
      entityType
      entityId
      entityOwner {
        entityBundle
        entityChanged
        entityCreated
        entityId
        entityLabel
        entityType
        entityPublished
        entityUuid
      }
      entityLanguage {
        id
      }
    }
  }
}

{
  "data": {
    "route": {
      "entity": {
        "entityLabel": "Hello Drupal UserGroup",
        "entityType": "node",
        "entityId": "1",
        "entityOwner": {
          "entityBundle": "user",
          "entityChanged": "2018-01-18T14:49:52+0000",
          "entityCreated": "2018-01-18T14:49:52+0000",
          "entityId": "1",
          "entityLabel": "admin",
          "entityType": "user",
          "entityPublished": false,
          "entityUuid": "60bbb1a1-df11-429f-b969-71738c620944"
        },
        "entityLanguage": {
          "id": "en"
        }
      }
    }
  }
}

• Learn GraphQL: http://graphql.org/learn/
• Expose Content via Entities or Views
• Use GraphiQL
  • Comes with graphql module, access at /graphql/explorer
  • ctrl+space is your best friend

Usage

Configure to your needs

Configure to your needs

GraphQL Module

• Used in Production
• 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/drupal-graphql/drupal-decoupled-app

demo time

📽

Hint: local decoupled app