GraphQL is getting more and more popular for developing web services. The traditional approach is to upgrade your backend service and then connect your frontend to it. We did it the other way around, starting with frontend and adding the backend later. This talk is about why and how we did it, so you can do it too.

1. Vladimir Guguiev
Implementing GraphQL - Without a Backend

2. 70k Videos
TBs of Data per Day
2 * 10^9 Minutes of Videos Streamed per Year

3. Data Fetching Sucks

4. GET /cats/:id
Returns a cat

5. RESTful API
Movies Endpoint
Categories
Endpoint
Users Endpoint
Web App Native App

6. sort-of-REST API

8. https://goo.gl/TfLnRF

9. GitHub GraphQL API Explorer
https://goo.gl/2nQbaK

10. Benefits for the Frontend

11. Co-location of a component and its data needs
Data Query
Presentation

12. Faster feature development

13. Smart GraphQL Clients (Apollo, Relay, etc)
• Normalized client-side caching
• Optimistic UI updates
• Server-side rendering made easy
• Auto-polling
• Real-time subscriptions

14. GraphQL Adoption

16. Client-first GraphQL
GraphQL Schema
Web App
REST API Gateway
Server
Browser

17. GraphQL Schema resolves data from existing REST API

18. Configure Apollo GraphQL to use “client-side” schema

19. Use GraphQL in components

20. Next Steps...

21. Moving GraphQL Schema to a standalone server
GraphQL Schema
Web App
REST API Gateway
Server
Client
Native App
Mobile apps can
start using GraphQL
Same schema running
on a NodeJS server

22. Replace REST API Gateway with GraphQL API
GraphQL API Gateway
Web App
Microservice 1
Server
Client
Native App
Microservice 2 Database

23. Gradual
Adoption

24. Don’t be afraid to try

25. GraphQL on the Client - Example App - https://github.com/wzrdzl/client-side-graphql
Amazing GraphQL Tutorials for Different Languages -
https://www.howtographql.com/
GraphQL Specification - https://facebook.github.io/graphql/

26. Thank you
Questions and comments
@wzrdzl
@wzrdzl
tech.showmax.com
@ShowmaxDevs