Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigating your transition to GraphQL with GraphQL first development

2,280 views

Published on

Presented by Danielle Man and Sashko Stubailo from the Apollo team at Meteor, at GraphQL Summit 2016 on 10/26/2016.

We've seen countless examples of how GraphQL makes it easier to organize, maintain, and use APIs. If you’re building with it today, over a year after it was initially released, you can benefit from the experience of many teams that came before you. You can also leverage the wide array of tools built by the community to make it easier to adopt GraphQL alongside technologies you’re already using. In this talk, we’ve distilled lessons and architectural patterns from top companies, the open source community, and our own production apps to help you embark on your GraphQL journey.

Published in: Technology
  • It doesn't matter how long ago you broke up, these methods will make your Ex crawling back! See how at here. ➤➤ http://t.cn/R50e2MX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Navigating your transition to GraphQL with GraphQL first development

  1. 1. Navigating Your Transition to GraphQL A GraphQL-first approach to improving your API Sashko Stubailo Tech Lead Apollo Open Source Danielle Man Developer Apollo Services
  2. 2. Who are we? • We build and maintain tools for the GraphQL community • Excited about the developer experience enabled by GraphQL • We went from 0 to GraphQL in two production apps, talked to many people who did the same • We build new apps and features fast with a GraphQL-first workflow apollodata.com github.com/apollostack
  3. 3. Announced and open-sourced July 2015 Production ready, new site September 2016 Great tools, best practices, efficient workflow The future Initial design at Facebook 2012 Looking back…
  4. 4. GraphQL First Development Post User Comment 1. Design API schema Contract between frontend and backend with a shared schema language 2. Build UI and backend Parallelize with mocking, develop component-based UIs with GraphQL containers 3. Run in production Static queries make loading predictable, schema tells you which fields are being used query Human
  5. 5. Design your schema1
  6. 6. • Database schema is not always relevant to frontend developers • Apps are getting more complex, not all of your data is in a database! D B S C H E M A
  7. 7. • Contract between frontend and backend • Declares relationships across backend data sources • Incrementally adopt - get the API you always wanted! # A comment submitted by a user type Comment { # The SQL ID of this comment id: Int! # The GitHub user who posted the comment postedBy: User! # The text of the comment content: String! # The repository which this comment is about repoName: String! } G R A P H Q L S C H E M A
  8. 8. GraphQL requests Backend fetches
  9. 9. Incremental GraphQL Adoption Data-Layer Redesign Combine Queries Simplify Development Thousands of active users Galaxy
  10. 10. Client Elastic Search MongoDB Amazon Dynamo DB C L I E N T A W S Galaxy Server Apollo Client GraphQL Server
  11. 11. GraphQL from the Beginning Schema Contract Parallelize Development Schema Ownership? Built from scratch in under 3 months Optics
  12. 12. B A C K E N D F R O N T E N D Design for different types of apps Don’t overfit to specific features Computed fields live on the server Components ask for exactly what they need Generic Backend-for-
  13. 13. Streamline your Workflow 2
  14. 14. B U I L D I N G A P P S Product Design Engineering
  15. 15. R E A L I T Y
  16. 16. I D E A L
  17. 17. Change database Rewrite mocked data for all endpoints using it Change schema Update one resolver P E R - E N D P O I N T P E R - R E S O L V E R Rest Mocking GraphQL Mocking
  18. 18. Component- First Development
  19. 19. 1. Painlessly adapted to schema changes 2. Connected front-end to back-end in under 2 days 3. Developed full app in less than 3 months O U R E X P E R I E N C E
  20. 20. graphql-tools 20 contributors - thanks @DxCx, @sebastienbarre, @nicolaslopezj Implement a Node.js GraphQL schema using the schema language directly, with support for all GraphQL features github.com/apollostack/graphql-tools
  21. 21. graphql-tools One-step data mocking based on schema types, customizable as much as you need. Instrumental to GraphQL First development workflow. github.com/apollostack/graphql-tools
  22. 22. graphql-tools github.com/apollostack/graphql-tools Find new workflows Managing GraphQL Development At Scale - Nick Nance Develop new features together Pull request by @itajaja
  23. 23. Load Data with Queries 3
  24. 24. GraphQL clients Plain fetch Simple Predictable No UI consistency and performance features Caching client Some work required to set up and learn Easy to update the UI Manage data in one place Great dev tools GET
  25. 25. Incremental adoption for the client Compatible Works with your existing client- side infrastructure Un-opinionated Design your own schema, fit into your existing data model Component-first Use GraphQL just one component at a time, test and reuse components Post User Comment
  26. 26. Static queries for perf and security • Use fragments for static composition. • Queries sent to the server are predictable, and can be optimized. • Data requirements of app can be fully analyzed at build time. • Better security with persisted queries. Write your data requirements so that tooling can separate them from your UI code
  27. 27. Code generation for result types Write GraphQL queries Get static typing based on schema • Fully featured in Apollo-iOS today • Community working on TypeScript and Flow on apollo-codegen • Work with the easy to learn GraphQL query language, get all of the benefits of native integration github.com/apollostack/apollo-ios github.com/apollostack/apollo-codegen Big thanks to @rricard for working on TS and Flow!
  28. 28. Apollo Client 0.5 dev.apollodata.com Out today, big thanks to over 100 contributors, especially @jbaxleyiii, @rricard, @johnthepink, @abhiaiyer91, @kamilkisiela
  29. 29. Apollo Client 0.5 • 100% GraphQL spec support: if you can type it in GraphiQL, it will work. • Fully featured: Queries, mutations, fragments, optimistic UI, pagination, and more. • Tooling friendly: Redux dev tools, static analysis, and persisted queries. • Compatible: Use it with React, React Native, Angular 1, Angular 2, Vue.js, etc. • Flexible and customizable: Fits into any architecture, customizable caching. • Futuristic: Subscriptions and custom resolvers, ideas coming from the community. The best part is — it’s just GraphQL.
  30. 30. GraphQL client conclusions Use a caching client Get better UI consistency and avoid loading data you already have. Incremental adoption and compatibility Important as you move older apps over to GraphQL, and if your tech choices change. Static queries Predictable loading, better dev tools, clearer server insights, eventually move to persisted queries for performance and security.
  31. 31. Monitor in Production 4
  32. 32. 1. Understand endpoint usage 2. Measure endpoint timing 3. Monitor server load W H A T D O Y O U W A N T ? …….. Performance
  33. 33. 1. Know exactly what fields are used and how 2. Measure field resolver performance 3. Detect breaking schema changes …….. W H A T C A N Y O U G E T ? Performance
  34. 34. apollodata.com/optics Execution traces Field latencies Field usage Optics
  35. 35. GraphQL-First workflow Design your schema Implement UI and backend in parallel Get fine-grained production understanding
  36. 36. Sashko Stubailo Apollo Open Source @stubailo Danielle Man Apollo Services @danimman Huge thanks to the open source community! Know anyone who wants to work on GraphQL technology full time? We’re hiring!

×