Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LET ME TELL YOU
A STORY
AGILE?
#1: WHAT COMES AFTER
AFTER AGILE COMES…
LEAN
MVC?
#2: WHAT COMES AFTER
AFTER MVC COMES….
ELM ARCHITECTURE OR REACT+REDUX
REST?
#3: WHAT COMES AFTER
GRAPHQL
WHY WE NEED IT?
MONOLITHIC MICROSERVICESCOMPONENTS
REST
NEED SOME REST
List of Jane’s friends
+ Their names
+ Their locations
GET /users/Jane/friends [1, 2, 3]
GET /friends/...
MEET GRAPHQL
DATABASE LAYER
MONGODB, POSTGRESQL, MYSQL, ETC.
GRAPHQL
DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS
GET /users/Jane/friends
[1, 2, 3]
GET /friends/{ID}
{name: “…”, locationID: 1}
GET /location/{ID}
{name: “Depok”}
QUERY RESULT
1 {
2 person(personID: 4) {
3 name,
4 birthYear,
5 homeworld {
6 name
7 },
8 filmConnection {
9 films {
10 ti...
GRAPHQL SERVER
THE FUN PART BEGIN
BUILD GRAPHQL SERVER
PRE-REQUISITE
$ mkdir graphql-server
$ cd graphql-server
$ npm init -f
$ npm install —save express
$ ...
DEMO TIME!
SOME CONCLUSION
END IS NEAR
GRAPHQL IS A QUERY
LANGUAGE, NOT A NEW
DATABASE
EASY TO WRITE QUERY
THE QUERIES DESCRIBE
THE SHAPE OF THE
RESPONSE
NO OVER-FETCHING
NO UNDER-FETCHING
QUERYING OBJECTS,
CONNECTIONS, NESTING,
IN SINGLE ROUND TRIP
TO AND FROM SERVER
FUTURE REFERENCES
LEARN MORE
▸ GraphQL Introduction
▸ Exploring GraphQL video
▸ Learn GraphQL by Kadira
▸ Your First Graph...
https://github.com/rizafahmi/jakartajs-graphql-server
https://hacktiv8.com/
riza@hacktiv8.com
@rizafahmi22
https://jakarta...
THOUGHTS?
GraphQL Story: Intro To GraphQL
GraphQL Story: Intro To GraphQL
GraphQL Story: Intro To GraphQL
GraphQL Story: Intro To GraphQL
Upcoming SlideShare
Loading in …5
×

GraphQL Story: Intro To GraphQL

7,208 views

Published on

Introduction to GraphQL presented in JakartaJS May meetup 2016 in collaboration with detikom and Tech In Asia.

Published in: Technology

GraphQL Story: Intro To GraphQL

  1. 1. LET ME TELL YOU A STORY
  2. 2. AGILE? #1: WHAT COMES AFTER
  3. 3. AFTER AGILE COMES… LEAN
  4. 4. MVC? #2: WHAT COMES AFTER
  5. 5. AFTER MVC COMES…. ELM ARCHITECTURE OR REACT+REDUX
  6. 6. REST? #3: WHAT COMES AFTER
  7. 7. GRAPHQL
  8. 8. WHY WE NEED IT?
  9. 9. MONOLITHIC MICROSERVICESCOMPONENTS
  10. 10. REST NEED SOME REST List of Jane’s friends + Their names + Their locations GET /users/Jane/friends [1, 2, 3] GET /friends/{ID} {name: “…”, locationID: 1} GET /location/{ID} {name: “Depok”} GET /users/Jane/friends [1, 2, 3] GET /friends/{ID} {name: “…”, locationID: 1} GET /location/{ID} {name: “Depok”}
  11. 11. MEET GRAPHQL
  12. 12. DATABASE LAYER MONGODB, POSTGRESQL, MYSQL, ETC. GRAPHQL DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS
  13. 13. GET /users/Jane/friends [1, 2, 3] GET /friends/{ID} {name: “…”, locationID: 1} GET /location/{ID} {name: “Depok”}
  14. 14. QUERY RESULT 1 { 2 person(personID: 4) { 3 name, 4 birthYear, 5 homeworld { 6 name 7 }, 8 filmConnection { 9 films { 10 title 11 } 12 } 13 } 14 } 1 { 2 "data": { 3 "person": { 4 "name": "Darth Vader", 5 "birthYear": "41.9BBY", 6 "homeworld": { 7 "name": "Tatooine" 8 }, 9 "filmConnection": { 10 "films": [ 11 { 12 "title": "A New Hope" 13 }, 14 { 15 "title": "The Empire Strikes Back" 16 }, 17 { 18 "title": "Return of the Jedi" 19 }, 20 { 21 "title": "Revenge of the Sith" 22 } 23 ] 24 } 25 } 26 } 27 }
  15. 15. GRAPHQL SERVER THE FUN PART BEGIN
  16. 16. BUILD GRAPHQL SERVER PRE-REQUISITE $ mkdir graphql-server $ cd graphql-server $ npm init -f $ npm install —save express $ npm install —save babel-preset-es2015 $ npm install —save graphql express-graphql
  17. 17. DEMO TIME!
  18. 18. SOME CONCLUSION END IS NEAR
  19. 19. GRAPHQL IS A QUERY LANGUAGE, NOT A NEW DATABASE
  20. 20. EASY TO WRITE QUERY
  21. 21. THE QUERIES DESCRIBE THE SHAPE OF THE RESPONSE
  22. 22. NO OVER-FETCHING NO UNDER-FETCHING
  23. 23. QUERYING OBJECTS, CONNECTIONS, NESTING, IN SINGLE ROUND TRIP TO AND FROM SERVER
  24. 24. FUTURE REFERENCES LEARN MORE ▸ GraphQL Introduction ▸ Exploring GraphQL video ▸ Learn GraphQL by Kadira ▸ Your First GraphQL Server ▸ Intro To GraphQL
  25. 25. https://github.com/rizafahmi/jakartajs-graphql-server https://hacktiv8.com/ riza@hacktiv8.com @rizafahmi22 https://jakartajs-join.herokuapp.com/
  26. 26. THOUGHTS?

×