Moving a production API from REST & Microservices to GraphQL

GraphQL has many advantages over RESTful APIs. A lot of companies start thinking about migration paths for adopting GraphQL, which not only come with technological but also with organisational challenges!
Karol Wyszynski and Bogdan Nedelcu from Lokalleads (http://www.lokalleads.com/) will tell us about their adventure migrating a backend infrastructure composed of several microservices around a Java web application to GraphQL. Among other topics, they will talk about why (and when) GraphQL is a good choice, how exactly their migration was carried out and the effects it had for their team on a technological and organisational level.

Transcript

1. GraphQL in Production
   Lokalleads GmbH
   Hackescher Markt 4
   10178 Berlin
   Germany
   

   View Slide

2. About us
   16.10.17 2
   Karol Wyszynski
   Co-Founder & CTO
   karol.wyszynski@lokalleads.de
   LinkedIn:
   www.linkedin.com/in/karol-wyszynski
   Bogdan Nedelcu
   Software-Developer
   bogdan.nedelcu@lokalleads.de
   

   View Slide

3. 16.10.17 3
   Lokalleads
   

   View Slide

4. Lokalleads
   16.10.17 4
   B2B Service provider for craftsman with > 800 customers
   - Real-time calculator for complex quotation
   - Lead channel tracking(phone, email, showrooms)
   - Online Marketing SaaS
   

   View Slide

5. Lokalleads
   16.10.17 5
   Founded in 2013
   - 35+ employees
   - 8 applications
   - 7 developers
   - 4 programing languages
   

   View Slide

6. The Journey to GraphQL
   6
   1. Why: Motivation
   2. How: Transition
   3. How: Challenges
   4. What: Result
   

   View Slide

7. 7
   Motivation
   

   View Slide

8. Motivation – Legacy Infrastructure
   16.10.17 8
   Frontend
   Backend
   Frontend
   Backend
   Frontend
   Java Php Java Ruby Java ReactJS
   Frontend Frontend Frontend
   Backend Backend Backend
   

   View Slide

9. Motivation - Legacy Application Stack
   16.10.17 9
   - Mostly MVC(Spring/Rails) with REST Endpoints
   - Server-Side rendered HTML with Ajax calls
   - One React JS Front End Client
   

   View Slide

10. Motivation - Requirements
    16.10.17 10
    - Complex UI
    - Public API
    - Faster Development
    - Reduce integration effort
    - Reduce project onboarding
    - Performance
    

    View Slide

11. Motivation - Solutions?
    16.10.17 11
    Complex UI
    - Experience with React.JS for over a year
    - Future Implementation in most of the clients
    - Developer team React knowledge
    

    View Slide

12. Motivation - Solutions?
    16.10.17 12
    Public API
    - Pure REST standard is hard to implement
    - Unique URI´s, request methods has to have a meaning(PUT or POST?)
    - Need a Gateway for security and performance
    /product or /products
    PUT or POST
    which Content-Type ?
    

    View Slide

13. Motivation - Solutions?
    16.10.17 13
    Integration effort
    - Deficient tolling: Postman
    - Documentation
    

    View Slide

14. Motivation - Solutions?
    16.10.17 14
    Faster Development
    - Parallelize front-end and backend development
    - Communication and Transparency
    

    View Slide

15. Motivation - Solutions?
    16.10.17 15
    Better Performace
    - Network road-trips
    - Reduce payload
    

    View Slide

16. Motivation – Solution
    16.10.17 16
    Frontend
    Java
    Frontend
    Php
    Frontend Frontend Frontend Frontend
    Java Ruby Node
    GraphQL API
    Node
    

    View Slide

17. Motivation – Technical Risk
    16.10.17 17
    Non industrial Standard API
    • Fastest growing community
    • Strong reference implementation by Facebook
    

    View Slide

18. Motivation – Technical Risk
    16.10.17 18
    Lack of experience
    - Hired Professional Support for inital setup
    - Team Training
    

    View Slide

19. Motivation – Technical Risk
    16.10.17 19
    • REST as a supplement
    All usecases covered?
    

    View Slide

20. 16.10.17 20
    Transition
    

    View Slide

21. 16.10.17 21
    

    View Slide

22. Transition: Incremental Adoption
    06.07.17 lokalleads 22
    lokalleads
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    GraphQL
    Frontend
    Backend
    

    View Slide

23. Transition: Client App Based
    06.07.17 lokalleads 23
    lokalleads
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    Frontend
    Backend
    GraphQL
    

    View Slide

24. Transition: Client Requirements
    06.07.17 lokalleads 24
    lokalleads
    - Concurrent request
    - Different data sources
    - Reactive: On user action more requests
    

    View Slide

25. Transition: Development Process
    Schema Design Backend && Frontend Production
    

    View Slide

26. Transition: GraphQL Schema
    Prefer building a Graph-QL schema that describes
    how clients use the data,
    rather than mirroring the legacy database schema.
    

    View Slide

27. Transition: GraphQL Schema
    

    View Slide

28. Transition - Mock Data
    REST responses were used as mock data.
    

    View Slide

29. Transition: Development Process
    Schema Design Production
    Development
    

    View Slide

30. Transition: Client App Based
    View 1 View 1 View 1 View 1 View 1
    GraphQL Server
    Resolver2 Resolver 2 Resolver1
    

    View Slide

31. Transition - GraphiQL
    

    View Slide

32. Transition - Apollo Client
    

    View Slide

33. Transition - Voyager
    

    View Slide

34. Transition: Development Process
    Schema Design Production
    Backend && Frontend
    

    View Slide

35. Transition: Production Tips
    

    View Slide

36. Transition: Production Tips
    

    View Slide

37. Challenges: Thinking in Graphs
    06.07.17 lokalleads 37
    In the REST implementation data is modeled in terms of
    network services.
    /campaigns
    /campaigns_and_metrics
    /campaigns_and_statistics
    

    View Slide

38. Challenges: Thinking in Graphs
    06.07.17 lokalleads 38
    With GraphQL, you model your business domain as a graph.
    /campaigns
    /campaigns_and_metrics
    /campaigns_and_statistics
    

    View Slide

39. Challenges: Thinking in Graphs
    06.07.17 lokalleads 39
    

    View Slide

40. Challenges - Thinking in Graphs
    06.07.17 lokalleads 40
    

    View Slide

41. Challenges - Schema Agreement
    06.07.17 lokalleads 41
    - Development starts with the
    Schema
    - Hard types force the team to agree
    before hand
    

    View Slide

42. 06.07.17 lokalleads 42
    Result
    

    View Slide

43. Results - Release Speed
    2Xrelease speed***.
    - Parallelized workflow
    - Better Tooling
    - Frontend team Autonomy
    

    View Slide

44. Results: Release Speed
    2Xless onboarding time.
    - Clean API
    - Tooling
    - Hard Typed
    

    View Slide

45. Results: Release Speed
    2Xless time documenting.
    - Code as Documentation
    - GraphiQL as API inspector
    

    View Slide

46. Results: Release Speed
    10Xdev happiness.
    - Tooling
    - YPWNT
    

    View Slide

47. 06.07.17 lokalleads 47
    Many Thanks!
    

    View Slide