The document discusses the evolution of software architecture, transitioning from Agile to Lean MVC, and further to Elm Architecture or React+Redux. It emphasizes the use of GraphQL as a query language that facilitates efficient data fetching from various databases like MongoDB and PostgreSQL, without the common issues of over-fetching or under-fetching. The document concludes with a practical guide to building a GraphQL server using Node.js and Express.

1. LET ME TELL YOU
A STORY

3. AGILE?
#1: WHAT COMES AFTER

4. AFTER AGILE COMES…
LEAN

5. MVC?
#2: WHAT COMES AFTER

6. AFTER MVC COMES….
ELM ARCHITECTURE OR REACT+REDUX

7. REST?
#3: WHAT COMES AFTER

8. GRAPHQL

9. WHY WE NEED IT?

10. MONOLITHIC MICROSERVICESCOMPONENTS

11. 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”}

15. MEET GRAPHQL

16. DATABASE LAYER
MONGODB, POSTGRESQL, MYSQL, ETC.
GRAPHQL
DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS DIFFERENT CLIENT APPS

17. GET /users/Jane/friends
[1, 2, 3]
GET /friends/{ID}
{name: “…”, locationID: 1}
GET /location/{ID}
{name: “Depok”}

18. 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 }

19. GRAPHQL SERVER
THE FUN PART BEGIN

20. 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

21. DEMO TIME!

22. SOME CONCLUSION
END IS NEAR

23. GRAPHQL IS A QUERY
LANGUAGE, NOT A NEW
DATABASE

24. EASY TO WRITE QUERY

25. THE QUERIES DESCRIBE
THE SHAPE OF THE
RESPONSE

26. NO OVER-FETCHING
NO UNDER-FETCHING

27. QUERYING OBJECTS,
CONNECTIONS, NESTING,
IN SINGLE ROUND TRIP
TO AND FROM SERVER

28. FUTURE REFERENCES
LEARN MORE
▸ GraphQL Introduction
▸ Exploring GraphQL video
▸ Learn GraphQL by Kadira
▸ Your First GraphQL Server
▸ Intro To GraphQL

29. https://github.com/rizafahmi/jakartajs-graphql-server
https://hacktiv8.com/
riza@hacktiv8.com
@rizafahmi22
https://jakartajs-join.herokuapp.com/

30. THOUGHTS?