Présentation de l'API gateway pattern + GraphQL + outils Typescript.

1. Par Félix Billon

2. QUI SUIS-JE ?
Développeur web orienté front-end chez Dcube.
Blog dev web : shakedatcode.fr
@felix_billon

3. SOMMAIRE
1. API Gateway Pattern
2. GraphQl
3. TypeScript dans tout ça ?

4. MONOLITICS VS MICROSERVICES

5. MICROSERVICES : PROBLÈME...

6. API GATEWAY PATTERN

7. API GATEWAY PATTERN

8. API GATEWAY PATTERN : AVANTAGES
Moins d’aller-retour client/services.
Simplification du code client.
Centralisation des middlewares (authentification,
logging, controle du traffic, ...).
Le client doit connaitre un seul endpoint.

9. API GATEWAY PATTERN :
DÉSAVANTAGES
Ajout d'un nouveau composant.
Doit être HAUTEMENT disponible.
Doit connaître les endpoints des services.

10. GRAPHQL : EN BREF
Spécification !
By Facebook.
Open source depuis 2015.
Grosse communauté.
Beaucoup d'outils disponible : GraphiQL, GraphQL
Voyager, GraphQL Docs, ...

11. GRAPHQL : EN BREF

12. GRAPHQL : TYPE ET SCHÉMA
type Query {
user(id: Int): User
}
type Mutation {
createUser(firstName: String!, lastName: String!): User!
}
type User {
id: Int!
firstName: String!
lastName: String!
posts: [Post]
}
type Post {
id: Int!
title: String!
}

13. GRAPHQL : RESOLVER
export const resolvers = {
Query: {
user: (obj, args, context) => {
return users.find((user) => user.id === args.id);
}
},
Mutation: {
createUser: (root, args) => {
const newUser = {
id: users.length + 1,
firstName,
lastName
}
users.push(newUser);
return newUser;
}
},
User: {
posts(user) {
t t filt (( t) > t i d Of( t id) ! 1)

14. GRAPHQL : QUERY
Ressemble très fortement à du JSON.
{
user(id: "10") {
id
firstName
posts {
title
}
}
}
{
"data": {
"user": {
"id": 1,
"firstName": "Felix",
"posts": [
{
"title": "Paris TypeScript #1 was awesome"
},
{
"title": "BestOfWeb rocks"
}
]
}
}
}

15. GRAPHQL : DEEP DIVE
Subscription : permet de cabler un système de
PubSub.
Dataloader : optimisation des requêtes.
Introspection du graph.

16. GRAPHQL : CLIENT

17. TYPESCRIPT DANS TOUS ÇA ?
Génération automatique des annotations de types à
partir du schéma et des requêtes (apollo-codegen,
gql2ts, ts2gql, ...)
Language service (ts-graphql-plugin, graphql-
language-service, ...)

18. DEMO TIME