Swagger + dAPI = happiness

The new way to write a front-end

software.- PART 2 -

Swagger with dAPIHappy team, fast and predictable development

How it works in general today a "feature development" process?

Business requirement (new feature)

process

PO (prioritisation, resources management, …)

AGILE MANIFESTO - Scrum framework (iteration, tickets, daily stand-up, …)

Back-end development (databases, PHP, Magento, Laravel, API, …)

API tests (manual tests, automatic tests, stress tests, …)

Front-end development (API understanding, Angular, UI/UX, …)

Feature tests (manual tests, automatic tests, stress tests, …)

Business review

DONE



proc

ess







Business review

DONE

0h (start)

10m - 6h

1h - 12h

1h - 12h

1h - 6h

20m - 1h

3.5h - 37h


timeline

back-end

front-end


timeline

back-end

front-end

prepare env

prepare env


timeline

back-end

front-end

prepare env

prepare env

coffeeAPI end-points

REST?okkkk …nooooo

oui!of course …


timeline

back-end

front-end

prepare env

prepare env



oui!of course …

working hardnew version of Laravel?

hmmm$_@#@!@$%^%ck


timeline

back-end

front-end

prepare env

prepare env



oui!of course …


hmmm$_@#@!@$%^%ck

no API? :(Uhh BBC has a new web site?

IMDB is awesomeI’m the best at P-Pong


timeline

back-end

front-end

prepare env

prepare env



oui!of course …


hmmm$_@#@!@$%^%ck



working hard


timeline

back-end

front-end

prepare env

prepare env



oui!of course …


hmmm$_@#@!@$%^%ck



$#%#$ this API is wrong‘please’ add X/Y

sorry please also add X/C


timeline

back-end

front-end

prepare env

prepare env



oui!of course …


hmmm$_@#@!@$%^%ck





working hardnew version of Angular?

hmmm$_@#@!@$%^%ck

FE is done?ok … we will wait you.

Uhh BBC ….


timeline

back-end

front-end

prepare env

prepare env



oui!of course …


hmmm$_@#@!@$%^%ck





working hardnew version of Angular?

hmmm$_@#@!@$%^%ck

FE is done?ok … we will wait you.

Uhh BBC ….

DONE!

How it works a "feature development" process with Swagger + dAPI?

timeline

back-end

front-end

prepare env

prepare env


timeline

back-end

front-end

prepare env

prepare env

Swagger


timeline

back-end

front-end

prepare env

prepare env

Swagger


why this query?

no API? dAPI will help meworking hard

new version of Angular?Webpack or GULP?


timeline

back-end

front-end

prepare env

prepare env

Swagger


why this query?



DONE!


timeline

back-end

front-end

prepare env

prepare env

Swagger


why this query?



DONE!ORcoffee

socialisationping-pongunit tests

benchmarkslearning


SwaggerTHE WORLD'S MOST POPULAR API FRAMEWORK http://swagger.io

Swagger is a powerful open source framework backed by a large ecosystem of tools that helps you design, build, document, and consume your RESTful APIs.

http://swagger.io


SwaggerTHE WORLD'S MOST POPULAR API FRAMEWORK http://swagger.io

HOW IT WORKS?If you're an API provider and want to use Swagger to describe your APIs - there are several approaches available:

A top-down approach where you would use the Swagger Editor to create your Swagger definition and then use the integrated Swagger Codegen tools to generate server implementation.

A bottom-up approach where you have an existing REST API for which you want to create a Swagger definition. Either you create the definition manually (using the same Swagger Editor mentioned above), or if you are using one of the supported frameworks (JAX-RS, node.js, etc), you can get the Swagger definition generated automatically for you. If you're doing JAX-RS have a look at the example at https://github.com/swagger-api/swagger-core/wiki/Swagger-Core-JAX-RS-Project-Setup-1.5.X.

> read more on swagger.io <

http://swagger.io

http://swagger.io


dApiMY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)https://github.com/dragosionita/dapi

A http server that merge requests between a dev server and a swagger file.

https://github.com/dragosionita/dapi



HOW IT WORKS?

DEV API ServerFront-end APP




HOW IT WORKS?


GET /api/feature1




HOW IT WORKS?


GET /api/feature1

200 application/json




HOW IT WORKS?


GET /api/feature1


GET /api/feature2




HOW IT WORKS?


GET /api/feature1


GET /api/feature2

404 ———————




HOW IT WORKS?


GET /api/feature1


GET /api/feature2

404 ———————

BE DEV

Wait FE, this end-point is in progress




HOW IT WORKS?


swagger.yaml




HOW IT WORKS?


GET /api/feature1

swagger.yaml




HOW IT WORKS?


GET /api/feature1

swagger.yaml

GET /api/feature1




HOW IT WORKS?


GET /api/feature1

swagger.yaml

GET /api/feature1

200 application/json20

0 ap

plic

atio

n/js

on




HOW IT WORKS?


GET /api/feature2

swagger.yaml




HOW IT WORKS?


GET /api/feature2

swagger.yaml

GET /api/feature2




HOW IT WORKS?


GET /api/feature2

swagger.yaml

GET /api/feature2

404




HOW IT WORKS?


GET /api/feature2

swagger.yaml

GET /api/feature2

404

There is this route: /api/feature2 ?




HOW IT WORKS?


GET /api/feature2

swagger.yaml

GET /api/feature2

404


Yes, on GET, you respond with 200 with the following content: {…}




HOW IT WORKS?


GET /api/feature2

swagger.yaml

GET /api/feature2

40420

0 ap

plic

atio

n/js

on


Yes, on GET, you respond with 200 with the following content: {…}




proc

ess







Business review

DONE

0h (start)

10m - 6h

1h - 12h

1h - 12h

1h - 6h

20m - 1h

3.5h - 37h



proc

ess







Business review

DONE

0h (start)

10m - 6h

1h - 12h

1h - 12h

1h - 6h

20m - 1h

3.5h - 37h

1h - 12h

1.5h - 13h

Thanks for watching!

Ionita Dragos Cristian Business Software Frontend https://www.linkedin.com/in/

dragos-ionita-8ab20756

- and wait for a demo -

https://www.linkedin.com/in/

Swagger + dAPI = happiness

Software

Transcript of Swagger + dAPI = happiness