Introduction to GraphQL for beginners

1. GraphQL
Martin Pham - CTO Fornace Srl
🤩
Real-time programming

2. A loooong
story
between
client and
server
Who works on server-side applications? How
many Server APIs you've created until now 🤩?
Have you ever written API documentations? and
update it frequently?
And client-side developers, how many times you
worked with Remote APIs? Tell me how you were
working with undocumented APIs 😱
And how you handle the slow connection / or
even offline?

3. A E
B
C
D
API
CHALLENGES
D.
User doesn't want to wait
1 second to see the
update. He wants now,
NOW, NAOHHH 😟
Instant response
E.
Easy to understand, easy to
consume. Develop with smiles,
not with tears.
Developer friendly
B.
User would like to see all notes
he created on cloud, even when
he's on an airplane. He also
want to add some notes and
sync it with cloud later.
Connectivity
A.
A User has relationship with his
preferred Store, which has
relationship with its City, which
has relationship with other
Users who live in this City,
which ... blabla...
Data relationships
C.
We have a LiveGame today, how we could adjust
our system to fit 100.000 concurrent users?
Scalable

4. A E
B
C
D
REQUIREMENTS
D.
REALTIME
COLLABORATIONS
Instant response
E.
IMPLEMENTATIONS &
DOCUMENTATIONS
Developer friendly
B.
OFFLINE SUPPORT,
WITH RE-SYNC
ABILITY
Connectivity
A.
FLEXIBLE
RELATIONSHIP
QUERY
Data relationships
C.
FLEXIBLE INFRASTRUCTURES
Scalable

5. WHAT WE ARE DOING?
REST
REPRESENTATIONAL STATE TRANSFER
Using API endpoints, each endpoint serves
different purpose.
SSE
SERVER-SENT EVENTS
Client keeps a long request to server, and
check every time server issues messages.

6. REST & SSE
-F*cking simple 😎.
-Hell of 1000 endpoints.
-Missing or Not up-to-date
documentations.
-SSE lacking support,
polyfills are very bad.

7. A E
B
C
D
SO?
D.
REALTIME
COLLABORATIONS
Instant response
E.
IMPLEMENTATIONS &
DOCUMENTATIONS
Developer friendly
B.
OFFLINE SUPPORT,
WITH RE-SYNC
ABILITY
Connectivity
A.
FLEXIBLE
RELATIONSHIP
QUERY
Data relationships
C.
FLEXIBLE INFRASTRUCTURES
Scalable
NOT SUPPORTED
IT HURTS
NOT STABLE
WE'RE ALL LAZY
SPAGHETTI CODE

8. We need
something

9. Facebook
We were having the same problems.
Then some lazy developers created GraphQL
for fun, and now it's serving 2.7 billion people.
Wanna try?
WHERE PEOPLE WASTE THEIR TIME

10. GraphQL
-Don't be fool by QL - query language
-Designed for API
-Query, mutation and realtime subscribe
-Self documented
-Don't worry, much more simple 🥰

11. Definition
-GraphQL Schema
-Ball object has x, y, z and size
-Query balls will return list of Ball
-Query addBall with ballData (type Ball) as
param, will return Boolean

12. Definition
-Easy to learn, easy to work.
-Everything has Type: Enum, String, Int,
Object,...
-Built-in Type validation.
-Mark deprecations easily.
-Provide directives for dynamic queries.
-From Schema to Code without pain.

13. Query &
Mutate data
-What you ask is What you get
-What you design is What you document

14. Subscription
- Realtime updates made simple

15. Resolver
- Define handler for every node of query

16. Apollo
GraphQL
Even easier for GraphQL works

17. A E
B
C
D
SO?
D.
REALTIME
COLLABORATIONS
Instant response
E.
IMPLEMENTATIONS &
DOCUMENTATIONS
Developer friendly
B.
OFFLINE SUPPORT,
WITH RE-SYNC
ABILITY
Connectivity
A.
FLEXIBLE
RELATIONSHIP
QUERY
Data relationships
C.
FLEXIBLE INFRASTRUCTURES
Scalable
OF COURSE!
YEAH!
EASY
SURE!
YOU WILL LOVE IT

18. DevTools
-Interactive playground to test GraphQL queries
-Apollo server & client libraries
-React friendly
-Native support for all client platforms
-Huge community support
Hooks supported!

19. Let's get our hands dirty
We create a React application, let users
play with balls. All ball data will be
saved on server.
(not wet)
All balls are provided from Pornhub

21. Gaio Giulio Cesare
GraphQL helped me to dominate
Roman politics, to become one of the
greatest military minds in history, and
to sleep with Cleopatra 😻
FULL STACK DEVELOPER

22. Thank you!