Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going GraphQL First

jnwng
April 20, 2017

Going GraphQL First

Presented at Real World React on 4/20/2017, this was a talk about GraphQL, its benefits for client developers, and how GraphQL makes it easier to build product!

jnwng

April 20, 2017
Tweet

More Decks by jnwng

Other Decks in Technology

Transcript

  1. Going GraphQL First
    Real World React | 4/20/2017

    View Slide

  2. Jon Wong
    @jnwng
    Frontend Infrastructure
    at Coursera

    View Slide

  3. View Slide

  4. APIs are hard

    View Slide

  5. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    Some issues with data at Coursera
    5
    Backends can easily break clients

    API contracts are not automatically enforced on the client or server

    API Discoverability

    Finding the right REST endpoint is difficult. Knowing the expected
    request and response formats is even harder.


    View Slide

  6. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    Some issues with data at Coursera
    6
    It’s hard for backend devs to build the perfect API
    Either you end up building a view-specific API

    or modular endpoints that need to be joined on the client.
    Performance

    Traversing through five entities requires five round-trips.

    View Slide

  7. What is GraphQL?

    View Slide

  8. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    8
    query {
    course(slug: "machine-learning") {
    name
    instructors {
    fullName
    university {
    name
    }
    }
    }
    }
    Its a language (with a specification)
    {
    data: {
    course: {
    name: "Machine Learning",
    instructors: [{
    fullName: "Andrew Ng",
    university: {
    name: "Stanford Univ."
    }
    }]
    }
    }
    }

    View Slide

  9. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    9
    Here’s how it works on the server
    query {
    course(
    slug: ‘machine-learning’
    ) {
    name
    instructors {
    fullName
    university {
    name
    }
    }
    }
    }
    CourseResolver
    InstructorResolver
    UniversityResolver
    /api/courses/:slug
    /api/instructors/:id
    /api/universities/:id
    REST
    APIs

    View Slide

  10. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    10
    All data is available in one place
    Clients don’t know (or care) about where data actually comes from
    All data is typed
    No longer will you have to guess what is provided by an endpoint.
    GraphQL enforces typing of all data.
    Its a single entry point for all your data

    View Slide

  11. Why do we love GraphQL?
    11

    View Slide

  12. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    12
    You get exactly what you want, and only what you want
    Request exactly the data you need for your product.
    GraphQL is declarative
    Worry about what your product needs, not how it gets there.
    Data usage evolves with the product
    Data declarations are composable, just like React.

    Use the same mental model!
    Inverting API control back to client developers

    View Slide

  13. Let me show you.
    13

    View Slide

  14. View Slide

  15. View Slide

  16. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }

    View Slide

  17. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }


    View Slide

  18. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }



    View Slide

  19. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }
    profile {
    photo
    }




    View Slide

  20. query CoursePage {

    course(slug: “machine-learning”) {

    title
    description
    }
    }
    university {
    name
    logo
    }
    instructor {
    name
    title
    }
    profile {
    photo
    }
    {course.title}
    {course.description}
    university={course.university}

    />
    instructor={course.instructor}
    />




    View Slide

  21. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    21
    Every field in your query is validated
    All fields (even traversals between different models) are validated while writing
    code.
    Editor autocompletion against available backend data
    Modern editors can now autocomplete against server-side fields, so there’s no
    more guessing as to whether or not something exists.
    Code generation of static types for query allows validation of actual data
    usage, not just existence.
    We can generate Typescript and Flow bindings to ensure correct type usage at
    compile time.
    Providing schemas to client-side code

    View Slide

  22. https://github.com/apollographql/eslint-plugin-graphql
    Linting

    View Slide

  23. https://github.com/jimkyndemeyer/js-graphql-intellij-plugin
    IDE Support

    View Slide

  24. https://github.com/apollographql/apollo-codegen/blob/master/test/flow/codeGeneration.js
    Flow / Typescript Support

    View Slide

  25. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    25
    GraphQL is product-centric
    Think less about where your data comes from, and more about using that
    data.
    Query complexity should match product complexity
    Anything beyond this is a warning sign that something is wrong,

    and that more work can be delegated to the server.
    Schema-first development
    Client developers and backend developers can work in parallel once a
    schema is developed.
    Think about your product!

    View Slide

  26. Getting Started with
    GraphQL

    View Slide

  27. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    27
    Run your GraphQL server in the browser
    Your React application can use GraphQL today by building GraphQL
    resolvers in the client.
    Create a GraphQL server that delegates to existing endpoints.
    Packages like graphql-server make it super simple to build servers
    that can consume your downstream services.
    Backend-as-a-service
    Scaphold and Graphcool both provide GraphQL backends in the cloud
    Trying GraphQL out

    View Slide

  28. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    28
    Caching
    Clients like Relay Modern and Apollo deal with caching out of the box,
    making it simple to build performant React / GraphQL applications.
    Drop-in support for GraphQL
    Clients makes it straightforward to make the best use of GraphQL
    throughout your application.
    Performance optimizations
    Instead of sending a seemingly endless query to the server,

    just send an ID instead.
    Using a GraphQL client

    View Slide

  29. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    29
    We often don’t have the luxury of building from scratch.
    Trying to convince client and server developers to stop what
    they’re doing and use GraphQL is difficult.
    Opt for incremental adoption where possible.
    GraphQL clients make it easy to drop-in support
    Avoid disruption of backend services
    The GraphQL server is separate from the services it consumes, and
    allows backend developers to continue to provide business value.
    Innovate in place

    View Slide

  30. Chapter 1:
    Issues We’ve Had
    Chapter 2:
    What is GraphQL?
    Chapter 3:
    Why We Love
    GraphQL
    Chapter 4:
    Getting Started
    with GraphQL
    30
    GraphQL.org
    The homepage of GraphQL is beautiful and contains a ton of in-
    depth materials on the in’s and out’s of GraphQL.
    LearnGraphQL.com
    Interactive GraphQL lessons to learn the various parts of the
    syntax.
    Apollo, GraphQL Slack
    Join the Apollo and GraphQL slacks for the latest about GraphQL.
    Resources

    View Slide

  31. Thanks!
    Jon Wong

    @jnwng

    View Slide