Vue

+
GraphQL

Carlos Rufo / 13-08-2019 / Vue Hong Kong #1

๐Ÿ‘‹ , I'm Carlos!

๐Ÿ’ป Polyglot Engineer

๐Ÿ‡ญ๐Ÿ‡ฐ @GraphQLHongKong organizer

๐Ÿ“น @VueSchool_io instructor

๐Ÿš€ api.spacex.land author

ย 

@swcarlosrj

Agenda

  • Intro to GraphQL ๐ŸŒ (20')

  • Vue ๐Ÿš€
    GraphQL Clients (20')

  • ๐Ÿ‘ฉโ€๐Ÿš€ Q&A ๐Ÿ‘จโ€๐Ÿš€ (15')

Intro to
GraphQL ๐ŸŒ

Why ๐Ÿค”

  • Efficiency

  • Type System

  • Predictability

  • Documentation

  • Tooling

Efficiency

  • Overfetching

  • Underfecthing

โš ๏ธ Common issues in current APIs

Overfetching

Ask for what you need,
get exactly that ๐ŸŽ†

"Fetch more data
that the client
actually needs"

Overfetching

Save resources,
respond faster โšก๏ธ

Efficiency

๐Ÿคฉ Desktop ~ 100% ย 

๐Ÿ˜ง Mobile ~ 60%

๐Ÿ˜ฑ Watch ~ 20%

Reusability

๐Ÿ˜ƒ /desktop/launches

๐Ÿคจ /mobile/launches

๐Ÿ˜ค /watch/launches

Underfetching

Ask for nested resources,
get all of that ๐ŸŽ‡

"Fetch not enough data that the client
actually needs"

Underfetching

Handle data
in your ๐Ÿ“ฑ,
instead over the ๐ŸŒ!

REST

๐Ÿคฉ /launches - 1 HTTP/DB

๐Ÿ˜ง /rocket/:id - 'N' HTTP/DB
๐Ÿ˜ญ Client parse functions

GraphQL

๐Ÿ˜ƒ /graphql - 1 HTTP/'N' DB

๐Ÿ˜Ž No client parse functions

Type System

Predictability

Explore your API โœจ

Docs

  • Auto-Generated

  • Typed

  • Up-to-Date

ย 

It'd be ๐Ÿ”ฅ

Tooling

Move faster with
powerful dev tools ๐Ÿ•น

  • In-browser API IDE

  • Auto-Gen Types

  • IDEs extensions

How ๐Ÿง

๐Ÿ”œ Live
Codingย 

What ๐Ÿคฉ

  • Specification

  • Query Language

  • Features

  • History

  • Learn

Specification

It's not a library,
nor a framework

Is a language-agnostic
specification for your API!

Query Language

It's not a library,
nor a framework

Is a Graph QL
for your API!

Features

๐Ÿ’ช Strongly Typed

๐Ÿ”Ž Introspection

๐Ÿ“ Queries, Mutations & Subscriptions

๐ŸŒ Transport agnostic

โ™ป๏ธ Efficient & Reusable

โšก๏ธ Product development

History

๐Ÿ˜… Several clients support need

๐Ÿค” Rethink app data-fetching

๐Ÿ’ก "Write once, run anywhere"

Learn

Confs

GQL Asia ๐Ÿ‡ฎ๐Ÿ‡ณ Apr 12-13ย 

GQL Conf ๐Ÿ‡ฉ๐Ÿ‡ช Jun 20-21

GQL HK ๐Ÿ‡ญ๐Ÿ‡ฐ Sept 29

GQL Summit ๐Ÿ‡บ๐Ÿ‡ธ Oct 29-31

Tutorials

How To GraphQL

Newsletters

GraphQL Weekly

Blogs

Open GraphQL

ย 

Thanks ๐Ÿ˜„

so much!

Hoping to ย ย  ย  ย  ย  ย  ย  ย  seeing y'all

ย 

ย 

@ GraphQL ๐Ÿ‡ญ๐Ÿ‡ฐ Hong Kong

Vue ๐Ÿš€
GraphQL Clients

๐Ÿš€ Live
Coding

Design

๐Ÿ‘ฉโ€๐Ÿš€ Q&A ๐Ÿ‘จโ€๐Ÿš€

Thanks for coming ๐Ÿ˜„

Vue + GraphQL
Vue Hong Kong #1

See you atย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย ?