Upload
felixbillon
View
189
Download
0
Embed Size (px)
Citation preview
Par Félix Billon
QUI SUIS-JE ?Développeur web orienté front-end chez Dcube.
Blog dev web : shakedatcode.fr
@felix_billon
SOMMAIRE1. API Gateway Pattern2. GraphQl3. TypeScript dans tout ça ?
MONOLITICS VS MICROSERVICES
MICROSERVICES : PROBLÈME...
API GATEWAY PATTERN
API GATEWAY PATTERN
API GATEWAY PATTERN : AVANTAGESMoins d’aller-retour client/services.Simplification du code client.Centralisation des middlewares (authentification,logging, controle du traffic, ...).Le client doit connaitre un seul endpoint.
API GATEWAY PATTERN :DÉSAVANTAGES
Ajout d'un nouveau composant.Doit être HAUTEMENT disponible.Doit connaître les endpoints des services.
GRAPHQL : EN BREFSpécification !By Facebook.Open source depuis 2015.Grosse communauté.Beaucoup d'outils disponible : GraphiQL, GraphQLVoyager, GraphQL Docs, ...
GRAPHQL : EN BREF
GRAPHQL : TYPE ET SCHÉMAtype 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!}
GRAPHQL : RESOLVERexport 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)
GRAPHQL : QUERYRessemble 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" } ] } }}
GRAPHQL : DEEP DIVESubscription : permet de cabler un système dePubSub.Dataloader : optimisation des requêtes.Introspection du graph.
GRAPHQL : CLIENT
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, ...)
DEMO TIME