Typed UIs

Horia Radu - software dev @ [e-spres-oh]

Jungle

what's the end point to do X?

UI

API

/foo/bar

what's the payload?

{ "mega": "response", ... }

response?

{ "random": "stuff", ... }

Swagger

UI

API

Swagger

UI

API

• explorer UI
• try endpoints
• document payloads & responses

• http://petstore.swagger.io/

Swagger

• JSON definition file

UI dev

UI

what's the payload?

response?

UI dev + Typescript

• types
• compile time checks

UI dev + Typescript

• types
• compile time checks

I gotta create classes for everything??

swagger-codegen

swagger.json

swagger-codegen

types.ts

swagger-codegen - angular

$ swagger-codegen generate \
  -i http://petstore.swagger.io/v2/swagger.json \
  -l typescript-angular2 \
  -o ./angular-app/src/swagger/

getPet() vs. getPetWithHttpInfo()

swagger-codegen - react

$ swagger-codegen generate \
  -i http://petstore.swagger.io/v2/swagger.json \
  -l typescript-fetch \
  -o ./react-app/src/swagger/

• create react app with TS (wmonk/create-react-app-typescript)
• no easy access to headers
• not as good as angular-ts

?

Thanks