GraphQL Magic with Angular

Slide 1

Slide 1 text

kuncevic.dev GraphQL Magic by ALIAKSEI KUNCEVIČ talk #25 v 1.0 (02/20/2020) with Angular

Slide 2

Slide 2 text

kuncevic.dev TOC ✅ Productivity ✅ Codegeneration ✅ Frontend + backend ✅ Integration

Slide 3

Slide 3 text

kuncevic.dev ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic

Slide 4

Slide 4 text

kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular Workshop

Slide 5

Slide 5 text

kuncevic.dev @kuncevic SPEAKER 20+ Angular-related talks ﬁrst talk at #graphqlsydney Since 2016

Slide 6

Slide 6 text

kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 7

Slide 7 text

kuncevic.dev Productivity

Slide 8

Slide 8 text

kuncevic.dev There are different deﬁnitions of productivity

Slide 9

Slide 9 text

kuncevic.dev Do more with less

Slide 10

Slide 10 text

kuncevic.dev

Slide 11

Slide 11 text

kuncevic.dev Building a web app?

Slide 12

Slide 12 text

kuncevic.dev

Slide 13

Slide 13 text

kuncevic.dev I don't know the backend requirements yet but I know how the frontend looks like and I want start building today

Slide 14

Slide 14 text

kuncevic.dev start:build:now

Slide 15

Slide 15 text

kuncevic.dev Let's fake the backend

Slide 16

Slide 16 text

kuncevic.dev Fake API ✅ Auto generate data ✅ Mock the responses ✅ Runs locally ✅ Work ofﬂine

Slide 17

Slide 17 text

kuncevic.dev GraphQL Faker

Slide 18

Slide 18 text

kuncevic.dev GraphQL Faker

Slide 19

Slide 19 text

kuncevic.dev This approach works well in case of greenﬁeld projects and prototyping

Slide 20

Slide 20 text

kuncevic.dev Faker Proxy

Slide 21

Slide 21 text

kuncevic.dev This approach works well with existing GraphQL backends

Slide 22

Slide 22 text

kuncevic.dev Demo

Slide 23

Slide 23 text

kuncevic.dev You've got the GraphQL API

Slide 24

Slide 24 text

kuncevic.dev

Slide 25

Slide 25 text

kuncevic.dev Let's build the frontend

Slide 26

Slide 26 text

kuncevic.dev Angular (v9)

Slide 27

Slide 27 text

kuncevic.dev

Slide 28

Slide 28 text

kuncevic.dev Code generators

Slide 29

Slide 29 text

kuncevic.dev

Slide 30

Slide 30 text

kuncevic.dev Deﬁnition/Schema ✅ SQL => DTO ✅ JSON => DTO

Slide 31

Slide 31 text

kuncevic.dev Convert/Transform Format A => Format B

Slide 32

Slide 32 text

kuncevic.dev But remember!

Slide 33

Slide 33 text

kuncevic.dev Do not ever modify auto-generated code!

Slide 34

Slide 34 text

kuncevic.dev What was auto-generated in Vegas stays in Vegas

Slide 35

Slide 35 text

kuncevic.dev The source of truth ✅

Slide 36

Slide 36 text

kuncevic.dev It depends on your approach ✅ Database first ✅ API first ✅ GraphQL first ✅ {{XYZ}} first

Slide 37

Slide 37 text

kuncevic.dev

Slide 38

Slide 38 text

kuncevic.dev GraphQL schema as the source of truth

Slide 39

Slide 39 text

kuncevic.dev graphql-code-generator

Slide 40

Slide 40 text

kuncevic.dev Generates code for any technology from GraphQL

Slide 41

Slide 41 text

kuncevic.dev How it works?

Slide 42

Slide 42 text

kuncevic.dev The process ✅ Fetch GraphQL schema ✅ Generate code

Slide 43

Slide 43 text

kuncevic.dev npm scripts ✅ npm i graphql @graphql-codegen/cli -D ✅ npm run generate -- --conﬁg introspect.yml ✅ npm run generate -- --conﬁg generate.yml

Slide 44

Slide 44 text

kuncevic.dev Introspect conﬁg

Slide 45

Slide 45 text

kuncevic.dev Generate conﬁg

Slide 46

Slide 46 text

kuncevic.dev Demo

Slide 47

Slide 47 text

kuncevic.dev Final Steps

Slide 48

Slide 48 text

kuncevic.dev Apollo Client

Slide 49

Slide 49 text

kuncevic.dev Apollo Client Platforms ✅ Angular ✅ React ✅ Ember ✅ Vue ✅ Meteor ✅ Web Components ✅ iOS/Android ✅ and more

Slide 50

Slide 50 text

kuncevic.dev Custom GraphQL Module

Slide 51

Slide 51 text

kuncevic.dev Finish ✅ GraphQL fake ✅ GraphQL code generation ✅ Apollo client ✅ Angular integration

Slide 52

Slide 52 text

kuncevic.dev

Slide 53

Slide 53 text

kuncevic.dev Links Summary ✅ GraphQL Fake https://github.com/APIs-guru/graphql-faker GraphQL Code Generator https://github.com/dotansimha/graphql-code-generator Apollo Client https://www.apollographql.com/docs/angular Angular https://angular.io Frontend Watch https://frontendwatch.com

Slide 54

Slide 54 text

kuncevic.dev Th nk you! @kuncevic