WarsawJS

We talk about JavaScript. Each month in Warsaw, Poland.

Swagger
the front-end perspective

Piotr Błaszczak @MyFlowPL
myflowpl.github.io/talk-swagger

Piotr Błaszczak

full-stack web developer

9 years of experience in web development

Skills

JavaScript & NodeJs/PHP & RDBMS/NoSQL/Graph Databases

Work

Agenda

Swagger & API contracts
Contract-first development
Tools
Swagger + TypeScript + Angular2 example

API Contracts

Simple representation of your RESTful API
It's good to know the rules
Single source of truth
Language agnostic
Tons of tools

Swagger

Swagger Syntax - Json or Yaml
JSON Schema draft v4

Endpoint

Parameters

Responses

Model Definitions

More

Documentation
Plugins
Community Tools

Contract-first Development

design + collaborate (swagger-editor, generators)
build (codegen, swagger-node, validators, etc.)
test (CI, stubs, fake data)
documentation (generate from contract)
update & refactor (typescript, automated tests)

Tools

swagger-editor
swagger-js
swagger-ui
swagger-node
swagger-parser
swagger-codegen

Editor

UI

UI

SwaggerJS

Swagger-node

Swagger-codegen

Codegen Stubs

Codegen Documentation

Swagger + TypeScript + Angular2

Lets generate some code

java -jar swagger-codegen-cli-2.2.2-SNAPSHOT.jar generate -i swagger-petstore.json -o src/app/api -l typescript-angular2

Generated Code

Endpoints requests

api/api/PetsApi.ts

Model definition

api/model/Pet.ts

Make api call

TS hints

HTML hints

Refactoring

CI Automation

jenkins & gitflow
most api changes fails on tests
front-end test with no backend

Front-end Job

Center for Information Technology

Centralny Ośrodek Informatyki

coi.gov.pl/kariera.html

Thank You !!!

Piotr Błaszczak

        pedro.blaszczak@gmail.com
        github.com/MyFlowPL
        @MyFlowPL
        FB/piotr.blaszczak

See you next month at WarsawJS

SlackMap - Open Slackline Database

SlackMap Github Repository

Questions & Comments