Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Typescript + Graphql = <3

356 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×