Use two tools: Swagger and dAPI for happy team, fast and predictable development. dAPI: https://github.com/dragosionita/dapi A http server that merge requests between a dev server and a swagger file. Swagger: 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.

1. The new way to
write a front-end
software.
- PART 2 -

2. Swagger with dAPI
Happy team, fast and predictable development

3. 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

4. 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

5. 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
0h (start)
10m - 6h
1h - 12h
1h - 12h
1h - 6h
20m - 1h
3.5h - 37h

6. 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
0h (start)
10m - 6h
1h - 12h
1h - 12h
1h - 6h
20m - 1h
3.5h - 37h

7. How it works in general today a "feature development" process?
timeline
back-end
front-end

8. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env

9. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …

10. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck

11. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong

12. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
working hard

13. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
working hard

14. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
$#%#$ this API is wrong
‘please’ add X/Y
sorry please also add X/C

15. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
$#%#$ this API is wrong
‘please’ add X/Y
sorry please also add X/C

16. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
$#%#$ this API is wrong
‘please’ add X/Y
sorry please also add X/C
working hard
new version of Angular?
hmmm
$_@#@!@$%^%ck
FE is done?
ok … we will wait you.
Uhh BBC ….

17. How it works in general today a "feature development" process?
timeline
back-end
front-end
prepare env
prepare env
coffee
API end-points
REST?
okkkk …
nooooo
oui!
of course …
working hard
new version of Laravel?
hmmm
$_@#@!@$%^%ck
no API? :(
Uhh BBC has a new web site?
IMDB is awesome
I’m the best at P-Pong
$#%#$ this API is wrong
‘please’ add X/Y
sorry please also add X/C
working hard
new version of Angular?
hmmm
$_@#@!@$%^%ck
FE is done?
ok … we will wait you.
Uhh BBC ….
DONE!

18. How it works a "feature development" process with Swagger + dAPI?
timeline
back-end
front-end
prepare env
prepare env

19. How it works a "feature development" process with Swagger + dAPI?
timeline
back-end
front-end
prepare env
prepare env
Swagger

20. How it works a "feature development" process with Swagger + dAPI?
timeline
back-end
front-end
prepare env
prepare env
Swagger
working hard
new version of Laravel?
why this query?
no API? dAPI will help me
working hard
new version of Angular?
Webpack or GULP?

21. How it works a "feature development" process with Swagger + dAPI?
timeline
back-end
front-end
prepare env
prepare env
Swagger
working hard
new version of Laravel?
why this query?
no API? dAPI will help me
working hard
new version of Angular?
Webpack or GULP?
DONE!

22. How it works a "feature development" process with Swagger + dAPI?
timeline
back-end
front-end
prepare env
prepare env
Swagger
working hard
new version of Laravel?
why this query?
no API? dAPI will help me
working hard
new version of Angular?
Webpack or GULP?
DONE!OR
coffee
socialisation
ping-pong
unit tests
benchmarks
learning

23. How it works a "feature development" process with Swagger + dAPI?
Swagger
THE 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.

24. How it works a "feature development" process with Swagger + dAPI?
Swagger
THE 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 <

25. How it works a "feature development" process with Swagger + dAPI?
dApi
MY 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.

26. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP

27. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1

28. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
200 application/json

29. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
200 application/json
GET /api/feature2

30. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
200 application/json
GET /api/feature2
404 ———————

31. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
200 application/json
GET /api/feature2
404 ———————
BE DEV
Wait FE,
this end-point is in progress

32. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
swagger.yaml

33. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
swagger.yaml

34. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
swagger.yaml
GET /api/feature1

35. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
swagger.yaml
GET /api/feature1
200 application/json

36. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature1
swagger.yaml
GET /api/feature1
200 application/json
200application/json

37. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml

38. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml
GET /api/feature2

39. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml
GET /api/feature2
404

40. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml
GET /api/feature2
404
There is this route: /api/feature2 ?

41. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml
GET /api/feature2
404
There is this route: /api/feature2 ?
Yes, on GET, you respond with 200
with the following content: {…}

42. How it works a "feature development" process with Swagger + dAPI?
dApi
MY MOST POPULAR APIs COMBINATOR (MOCKS + DEV API)
https://github.com/dragosionita/dapi
HOW IT WORKS?
DEV API Server
Front-end APP
GET /api/feature2
swagger.yaml
GET /api/feature2
404
200application/json
There is this route: /api/feature2 ?
Yes, on GET, you respond with 200
with the following content: {…}

43. 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
0h (start)
10m - 6h
1h - 12h
1h - 12h
1h - 6h
20m - 1h
3.5h - 37h

44. How it works a "feature development" process with Swagger + dAPI?
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
0h (start)
10m - 6h
1h - 12h
1h - 12h
1h - 6h
20m - 1h
3.5h - 37h
1h - 12h
1.5h - 13h

45. Thanks for
watching!
Ionita Dragos Cristian
Business Software Frontend
https://www.linkedin.com/in/
dragos-ionita-8ab20756
- and wait for a demo -