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
Docs
Tutorials
Newsletters
Books
Blogs
Courses
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 ?
