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.
Par Félix Billon
QUI SUIS-JE ?
Développeur web orienté front-end chez Dcube.
Blog dev web : shakedatcode.fr
@felix_billon
SOMMAIRE
1. API Gateway Pattern
2. GraphQl
3. TypeScript dans tout ça ?
MONOLITICS VS MICROSERVICES
MICROSERVICES : PROBLÈME...
API GATEWAY PATTERN
API GATEWAY PATTERN
API GATEWAY PATTERN : AVANTAGES
Moins d’aller-retour client/services.
Simplification du code client.
Centralisation des mi...
API GATEWAY PATTERN :
DÉSAVANTAGES
Ajout d'un nouveau composant.
Doit être HAUTEMENT disponible.
Doit connaître les endpoi...
GRAPHQL : EN BREF
Spécification !
By Facebook.
Open source depuis 2015.
Grosse communauté.
Beaucoup d'outils disponible : ...
GRAPHQL : EN BREF
GRAPHQL : TYPE ET SCHÉMA
type Query {
user(id: Int): User
}
type Mutation {
createUser(firstName: String!, lastName: Strin...
GRAPHQL : RESOLVER
export const resolvers = {
Query: {
user: (obj, args, context) => {
return users.find((user) => user.id...
GRAPHQL : QUERY
Ressemble très fortement à du JSON.
{
user(id: "10") {
id
firstName
posts {
title
}
}
}
{
"data": {
"user"...
GRAPHQL : DEEP DIVE
Subscription : permet de cabler un système de
PubSub.
Dataloader : optimisation des requêtes.
Introspe...
GRAPHQL : CLIENT
TYPESCRIPT DANS TOUS ÇA ?
Génération automatique des annotations de types à
partir du schéma et des requêtes (apollo-codeg...
DEMO TIME
Upcoming SlideShare
Loading in …5
×

Typescript + Graphql = <3

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

  • Be the first to comment

  • Be the first to like this

Typescript + Graphql = <3

  1. 1. Par Félix Billon
  2. 2. QUI SUIS-JE ? Développeur web orienté front-end chez Dcube. Blog dev web : shakedatcode.fr @felix_billon
  3. 3. SOMMAIRE 1. API Gateway Pattern 2. GraphQl 3. TypeScript dans tout ça ?
  4. 4. MONOLITICS VS MICROSERVICES
  5. 5. MICROSERVICES : PROBLÈME...
  6. 6. API GATEWAY PATTERN
  7. 7. API GATEWAY PATTERN
  8. 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. 9. API GATEWAY PATTERN : DÉSAVANTAGES Ajout d'un nouveau composant. Doit être HAUTEMENT disponible. Doit connaître les endpoints des services.
  10. 10. GRAPHQL : EN BREF Spécification ! By Facebook. Open source depuis 2015. Grosse communauté. Beaucoup d'outils disponible : GraphiQL, GraphQL Voyager, GraphQL Docs, ...
  11. 11. GRAPHQL : EN BREF
  12. 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. 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. 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. 15. GRAPHQL : DEEP DIVE Subscription : permet de cabler un système de PubSub. Dataloader : optimisation des requêtes. Introspection du graph.
  16. 16. GRAPHQL : CLIENT
  17. 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. 18. DEMO TIME

×