DDA with GraphQL and React

Modern web applications rely heavily on the REST API backends. Monoliths are being further broken down into individual microservices to speed up development & deployment, to make frequent releases hassle free.

With the number of client devices accessing the API services increasing exponentially, we run into issues such as each client requesting for new changes and API teams getting into what we call the “version hell” and maintenance nightmares.

Clients, in most of the cases, need to invoke multiple APIs and join resources for different use-cases and soon we run into issues of under/over delivering data in most of the cases. We have traditionally solved this problem with orchestration layers, designed to deliver exactly the data required for the view.

But can we do better? Yes, and the answer to that is Demand Driven Architecture!

Who uses it? Facebook, Netflix and others!

Topics we explore:

1. Need for Demand driven architecture.
2. Principles of demand driven architecture
3. Introduction to GraphQL and core concepts
4. Architecting your application – example using React & GraphQL
5. Libraries involved to help make this happen!

Transcript

1. Demand Driven Architecture (DDA) with GraphQL & React S E P T E M B E R 9 , 2 0 1 7 - M E E T U P
2. Rakesh Menon @rakeshmenon13
3. 3 Key Takeaways from this session • Need for Demand Driven Architecture (DDA) • Principles of DDA • Understand GraphQL and core concepts • Architecture best practices • Hands on with GraphQL server (Express) and client (React)
4. 4 Evolution
5. 5 Evolution cycle mutations selection inheritance
6. 6 Yesterday Client Monolithic Application (Server-side)
8. 8 Today Web Apps REST APIs Data Source 1 Mobile Apps IoT devices Data Source 3 Data Source 2
10. 10 What changed?
11. 11 Image source: Flickr user adactio
12. 12 • Unpredictable requirement changes – New Endpoints • Overfetching / Underfetching of data • Versioning Hell Problems with REST APIs
13. 13 Web API v1 Mobile Tablet API v3 API v2 Web Mobile Tablet Web Mobile Tablet
14. 14 • Unpredictable requirement changes – New Endpoints • Overfetching / Underfetching of data • Versioning Hell • API Documentation Problems with REST APIs
16. 16 • Server teams decide what the client should be consuming • Team challenges: • Client teams request changes • Different teams - different requirements Supply Driven Architecture
18. 18 Demand Driven Architecture (or DDA)
19. 19 • Jargon coined by Kovas Boguta and David Nolen in QCon 2015 • Client demands the data & shape instead of service making assumptions of what the client needs. What’s that now?
20. 20 Principles of Demand Driven Architecture
21. 21 Demand
22. 22 Composition
23. 23 Interpretation
24. 24 • Falcor by Netflix (2011) • GraphQL by Facebook (2012) Implementations
25. 25 GraphQL
26. 26 • Related to Open Graph API • Graph database query language • Client-side state management • Limited to JS / NodeJS • Limited to React ecosystem What is it NOT?
27. 27 GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Specification: http://facebook.github.io/graphql/
29. 29 query MyProduct { product(id: 123) { name description picture { width height url } } } { "data": { "product": { "name": "Delicious Cake", "description": "Just taste it!”, "picture": { "width": 150, "height": 150, "url": http://... } } } }
30. 30 Sneak peek!
32. 32 • Created in 2012 • Open-sourced in 2015 – announced in React Conf 2015 • Battle-tested @ Facebook and Production Ready! History
33. 33 GraphQL operations
34. 34 • Query (Read) • Mutation (Write) • Subscription (Observe) GraphQL operations
35. 35 Let’s try it out!
36. 36 • Shared definition • Graphs as a conceptual model • Introspection • Data Typing • Developer Experience (GraphiQL) • Community! Differentiators
37. 37 Tomorrow’s stack! Web Apps GraphQL Layer External APIs Mobile Apps IoT devices Any datasource Databases
38. 38 Best Practices
39. 39 Think in graphs, not endpoints
41. 41 Think data models, not view models
42. 42 Thin interface
43. 43 Incremental adoption
44. 44 Think like the client!
45. 45 Have a client, duh!
46. 46 Server-Side Implementations graphql-php graphql-dotnet Scala Java JavaScript Ruby Python
47. 47 Brands using GraphQL
49. 49 Let’s build a GraphQL server!
50. 50 Let’s build a GraphQL server!
51. 51 React & GraphQL
52. 52 React.js in 2 minutes?
53. 53 Library for creating user interfaces (The “V” in MVC)
54. 54 Renders UI Responds to events Composable
55. 55 Re-render with every update (Virtual DOM)
57. 57 Let’s build a React app using GraphQL!
60. 60 Questions