Moving a production API from REST & Microservices to GraphQL

Slide 1

Slide 1 text

GraphQL in Production Lokalleads GmbH Hackescher Markt 4 10178 Berlin Germany

Slide 2

Slide 2 text

About us 16.10.17 2 Karol Wyszynski Co-Founder & CTO [email protected] LinkedIn: www.linkedin.com/in/karol-wyszynski Bogdan Nedelcu Software-Developer [email protected]

Slide 3

Slide 3 text

16.10.17 3 Lokalleads

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Motivation

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

16.10.17 20 Transition

Slide 21

Slide 21 text

16.10.17 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Transition: Development Process Schema Design Backend && Frontend Production

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Transition: GraphQL Schema

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Transition: Development Process Schema Design Production Development

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Transition - GraphiQL

Slide 32

Slide 32 text

Transition - Apollo Client

Slide 33

Slide 33 text

Transition - Voyager

Slide 34

Slide 34 text

Transition: Development Process Schema Design Production Backend && Frontend

Slide 35

Slide 35 text

Transition: Production Tips

Slide 36

Slide 36 text

Transition: Production Tips

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Challenges: Thinking in Graphs 06.07.17 lokalleads 39

Slide 40

Slide 40 text

Challenges - Thinking in Graphs 06.07.17 lokalleads 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

06.07.17 lokalleads 42 Result

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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