Evolve your development workflow

Guillaume Chau

Vue.js Core Team

We need better tools to build great apps

Why?

Mobile World

Latency

Bandwidth

Processing power

Realtime data

Today's apps are complex

MongoDB

MySQL

Oracle

ERP

CRM

Vue

Angular

React

Micro-services

Redis

Android

iOS

Legacy custom apps

AWS

JavaScript

Java

Team Communication needs

Frontend Team

Backend Team

DataBase Team

Other Service Team

Mobile World

Today's apps are complex

Team Communication needs

Why?

GraphQL solves problems
Apollo adds value
Vue makes it approachable

1
2
3

GraphQL solves problems

1

What is GraphQL?

Schema definition language

Query language

Community of tools

Strong typing

type Message {
  id: ID!
  content: String
  user: User
  date: Int
}

type User {
  id: ID!
  name: String
  email: String
  avatarUrl: String
}

type Query {
  messages: [Message]
}

Strong typing

Help prevent errors

Improve the debugging experience

More explicit API (auto Docs)

Query only the data you need

{
  messages {
    id
    content
    user {
      id
      name
    }
  }
}

{
  "data": {
    "messages": [
      {
        "id": "0",
        "content": "Are you enjoying the conference?",
        "user": {
          "id": "0",
          "name": "Anne"
        }
      },
      {
        "id": "1",
        "content": "Absolutely!",
        "user": {
          "id": "1",
          "name": "Yoan"
        }
      }
    ]
  }
}

Query only the data you need

Reduce transfer size

No waterfall requests

Get predictable data shape

Clear and simple structure

Version-less

Add new fields

Deprecate old ones

Strong typing

Query language

Simpler architecture

Version-less

GraphQL

Apollo adds value

2

What is Apollo?

Server tools

Feature-rich client

Strong community

Principles

By the community, for the community

Simplicity

Performance

Apollo Client

Query

Mutation

Subscription (Web socket)

.gql

Observable

query

Normalized Cache

Apollo Devtools

Apollo Server

Apollo Launchpad

https://launchpad.graphql.com/qmq0lmkj9p

Like JSFiddle but for a GraphQL API

Prototype a GraphQL schema in minutes

Schema Stitching

Apollo Server

Apollo Client

Even more tools

Apollo

Vue makes it approachable

3 vue-apollo

github.com/Akryum/vue-apollo

Quick onboarding

import Vue from 'vue'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const provider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
  provide: provider.provide(),
  // ...
})

Developer Experience

Automatic creation & teardown

Reactive parameters

Automatic updates

Simpler code

Colocate Data & Components

query {
  user (id: $id) {
    id
    name
    email
    avatar
  }
}

query {
  user (id: $id) {
    id
    name
    email
    avatar
  }
}

Apollo Components

<ApolloQuery
  :query="require('../graphql/HelloWorld.gql')"
  :variables="{ name }"
>
  <template slot-scope="{ result: { loading, error, data } }">
    <!-- Loading -->
    <div v-if="loading" class="loading apollo">Loading...</div>

    <!-- Error -->
    <div v-else-if="error" class="error apollo">An error occured</div>

    <!-- Result -->
    <div v-else-if="data" class="result apollo">{{ data.hello }}</div>

    <!-- No result -->
    <div v-else class="no-result apollo">No result :(</div>
  </template>
</ApolloQuery>

Apollo Components

<ApolloMutation
  :mutation="require('@/graphql/userLogin.gql')"
  :variables="{
    email,
    password,
  }"
  @done="onDone"
>
  <template slot-scope="{ mutate, loading, error }">
    <!-- Form -->
    <input v-model="email" type="email">
    <input v-model="password" type="password">
    <button :disabled="loading" @click="mutate()">Click me</button>

    <!-- Error -->
    <p v-if="error">An error occured: {{ error }}</p>
  </template>
</ApolloMutation>