1.
Web Applications
of the Future
ConFrontJS | Roy Derks

2.
Who is this for?
@gethackteam

3.
Do you know what
a “date” is?
@gethackteam

4.
@gethackteam

5.
@gethackteam

6.
@gethackteam

7.
@gethackteam

8.
@gethackteam

9.
@gethackteam

10.
That’s why you need
type systems! ✅ ❌
@gethackteam

11.
A little bit about
myself first…
@gethackteam

12.
Roy Derks
@gethackteam

13.
What do you already know
about TypeScript? .
@gethackteam

14.
TypeScript is a typed superset of
JavaScript
That compiles to plain
JavaScript
And uses the latest ECMAScript
features
@gethackteam

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.
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.
TypeScript is a typed superset of
JavaScript
That compiles to plain
JavaScript
And uses the latest ECMAScript
features
@gethackteam

18.
@gethackteam

19.
Readable for the browser
@gethackteam

20.
TypeScript is a typed superset of
JavaScript
That compiles to plain
JavaScript
And uses the latest ECMAScript
features
@gethackteam

21.
@gethackteam

22.
You know what else has types?
@gethackteam

23.
You know what else has types?
GraphQL!
@gethackteam

24.
If you aren’t familiar with
GraphQL .
@gethackteam

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.
@gethackteam

27.
Ask what you need, get exactly that
@gethackteam

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.
@gethackteam

30.
Define nested relationships
@gethackteam

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.
@gethackteam

33.
@gethackteam

34.
And they aren’t too different
@gethackteam

35.
@gethackteam

36.
Both have basic “scalar” types
@gethackteam

37.
@gethackteam

38.
Can relate to other types
@gethackteam

39.
@gethackteam

40.
And have required/optional flags
@gethackteam

41.
So how can we combine
TypeScript and GraphQL?
@gethackteam

42.
By using
@gethackteam

43.
A CLI tool that generates
TypeScript types from a
GraphQL schema.
@gethackteam

44.
Remember both the type
definitions?
@gethackteam

45.
@gethackteam

46.
The GraphQL schema is used to
generate TypeScript types
@gethackteam

47.
@gethackteam

48.
Generate TypeScript types
@gethackteam

49.
@gethackteam

50.
@gethackteam

51.
Map basic TypeScript types
to scalar types of GraphQL
@gethackteam

52.
@gethackteam

53.
Keep relation to
non-scalar types
@gethackteam

54.
How does this work?
@gethackteam

55.
GraphQL Code Generator
@gethackteam

56.
GraphQL Code Generator
Use a wizard to setup
@gethackteam

57.
Or define your own settings
@gethackteam

58.
GraphQL Code Generator
@gethackteam

59.
GraphQL Code Generator
Generates TypeScript types
@gethackteam

60.
Opens the door to end-to-end
type safety
@gethackteam

61.
You can automatically generate
React components
@gethackteam

62.
And can also use it server-side
@gethackteam

63.
So should I start converting to
TypeScript right away? 🧐
@gethackteam

64.
@gethackteam

65.
But definitely start using a
type system!!
@gethackteam

66.
Want to learn more?
Search: Roy Derks@gethackteam
https://www.typescriptlang.org/docs/
https://graphql.org/learn/
https://graphql-code-generator.com/