O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Typescript + Graphql = <3

341 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×