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.

Web Applications of the Future with TypeScript and GraphQL

118 views

Published on

Type systems like TypeScript are the next thing when developing JavaScript applications. They make sure that your props are passed in the correct form and shape throughout your application. Together with GraphQLs query language based on types, you can create the web application of the future!

The code can be found here https://github.com/royderks/ts-react-graphql

Published in: Technology
  • Be the first to comment

Web Applications of the Future with TypeScript and GraphQL

  1. 1. Web Applications of the Future ConFrontJS | Roy Derks
  2. 2. Who is this for? @gethackteam
  3. 3. Do you know what a “date” is? @gethackteam
  4. 4. @gethackteam
  5. 5. @gethackteam
  6. 6. @gethackteam
  7. 7. @gethackteam
  8. 8. @gethackteam
  9. 9. @gethackteam
  10. 10. That’s why you need type systems! ✅ ❌ @gethackteam
  11. 11. A little bit about myself first… @gethackteam
  12. 12. Roy Derks @gethackteam
  13. 13. What do you already know about TypeScript? . @gethackteam
  14. 14. TypeScript is a typed superset of JavaScript That compiles to plain JavaScript And uses the latest ECMAScript features @gethackteam
  15. 15. superset. [′sü·pər‚set] (computer science) A programming language that contains all the features of a given language and has been expanded or enhanced to include other features as well. - the internet @gethackteam
  16. 16. superset. [′sü·pər‚set] (computer science) A programming language that contains all the features of a given language and has been expanded or enhanced to include other features as well. - the internet @gethackteam
  17. 17. TypeScript is a typed superset of JavaScript That compiles to plain JavaScript And uses the latest ECMAScript features @gethackteam
  18. 18. @gethackteam
  19. 19. Readable for the browser @gethackteam
  20. 20. TypeScript is a typed superset of JavaScript That compiles to plain JavaScript And uses the latest ECMAScript features @gethackteam
  21. 21. @gethackteam
  22. 22. You know what else has types? @gethackteam
  23. 23. You know what else has types? GraphQL! @gethackteam
  24. 24. If you aren’t familiar with GraphQL . @gethackteam
  25. 25. GraphQL is a query language for APIs That offers a single endpoint for multiple resources And is based on a type system @gethackteam
  26. 26. @gethackteam
  27. 27. Ask what you need, get exactly that @gethackteam
  28. 28. GraphQL is a query language for APIs That offers a single endpoint for multiple resources And is based on a type system @gethackteam
  29. 29. @gethackteam
  30. 30. Define nested relationships @gethackteam
  31. 31. GraphQL is a query language for APIs That offers a single endpoint for multiple resources And is based on a type system @gethackteam
  32. 32. @gethackteam
  33. 33. @gethackteam
  34. 34. And they aren’t too different @gethackteam
  35. 35. @gethackteam
  36. 36. Both have basic “scalar” types @gethackteam
  37. 37. @gethackteam
  38. 38. Can relate to other types @gethackteam
  39. 39. @gethackteam
  40. 40. And have required/optional flags @gethackteam
  41. 41. So how can we combine TypeScript and GraphQL? @gethackteam
  42. 42. By using @gethackteam
  43. 43. A CLI tool that generates TypeScript types from a GraphQL schema. @gethackteam
  44. 44. Remember both the type definitions? @gethackteam
  45. 45. @gethackteam
  46. 46. The GraphQL schema is used to generate TypeScript types @gethackteam
  47. 47. @gethackteam
  48. 48. Generate TypeScript types @gethackteam
  49. 49. @gethackteam
  50. 50. @gethackteam
  51. 51. Map basic TypeScript types to scalar types of GraphQL @gethackteam
  52. 52. @gethackteam
  53. 53. Keep relation to non-scalar types @gethackteam
  54. 54. How does this work? @gethackteam
  55. 55. GraphQL Code Generator @gethackteam
  56. 56. GraphQL Code Generator Use a wizard to setup @gethackteam
  57. 57. Or define your own settings @gethackteam
  58. 58. GraphQL Code Generator @gethackteam
  59. 59. GraphQL Code Generator Generates TypeScript types @gethackteam
  60. 60. Opens the door to end-to-end type safety @gethackteam
  61. 61. You can automatically generate React components @gethackteam
  62. 62. And can also use it server-side @gethackteam
  63. 63. So should I start converting to TypeScript right away? 🧐 @gethackteam
  64. 64. @gethackteam
  65. 65. But definitely start using a type system!! @gethackteam
  66. 66. Want to learn more? Search: Roy Derks@gethackteam https://www.typescriptlang.org/docs/ https://graphql.org/learn/ https://graphql-code-generator.com/

×