Design Driven API Development
-
Upload
sokichi-fujita -
Category
Technology
-
view
7.284 -
download
0
Transcript of Design Driven API Development
![Page 1: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/1.jpg)
Design-Driven API DevelopmentSokichi Fujita
![Page 2: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/2.jpg)
Generation of API Description Languages
![Page 3: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/3.jpg)
Swagger
![Page 4: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/4.jpg)
RAML
![Page 5: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/5.jpg)
API-Blueprint
![Page 6: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/6.jpg)
API Description Languages
• XML • WADL, RADL, WSDL2
• JSON
• Swagger, I/O Docs
• YAML
• Swagger, RAML
• Markdown
• API-Blueprint
Popular in GitHub, NPM, …
![Page 7: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/7.jpg)
Why
![Page 8: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/8.jpg)
Server Code
API Document SDKs
Specification Document
Samples
Mock Server
API Console
Test code
Manually developed resources
as a reference
![Page 9: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/9.jpg)
Server Code
API Document SDKs
Samples
Mock Server
API Console
Test code
Manually developed resources
It is incorrect or
doesn’t exist
Sometimes,
![Page 10: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/10.jpg)
To avoid publishing un-updatable APIs
• Publishing or updating API are not so hard,
• if you can ignore lots of related resources.
• e.g. SDKs, Documents, Tests, Clients, …
![Page 11: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/11.jpg)
Design-Driven Development
![Page 12: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/12.jpg)
Server Code
API Document SDKs
API Schema
generate/validate
SamplesAPI ConsoleMock Server
Non-manually developed resources
codegenswagger-UIswagger-node
swagger-spec
swagger-editor
swagger-js
![Page 13: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/13.jpg)
Demo
![Page 14: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/14.jpg)
Demo
• Hacker News API
• Swagger-Node
• Hacker News Client
• React, Swagger-js, Electron
![Page 15: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/15.jpg)
Swagger-nodeElectron
*.yaml
Swagger Editor
Express
express-swagger
controller
React
Swagger-js
- component DidMount etc.
state
render
(Dynamically JS SDK)
Cheerio
https://news.ycombinator.com
![Page 16: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/16.jpg)
Server : Swagger-Node
swagger project create [project name]
swagger project edit
1. Generate a template for express | hapi | restify | sails
2. Write API specs
vim api/controller/[controller file name].js
3. Just write controllers that meet the API specs
![Page 17: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/17.jpg)
![Page 18: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/18.jpg)
filename of the controllers
name of the controller
![Page 19: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/19.jpg)
Client : Swagger-js
var swagger = new SwaggerClient({ url: "http://localhost:8080/swagger.yaml", success: function() { swagger.apis.hackernews.fetch( {page:api}, {responseContentType: 'application/json'}, function(res) { :
}); }});
Dynamically Swagger SDK for JavaScript
![Page 20: Design Driven API Development](https://reader031.fdocuments.us/reader031/viewer/2022022200/58a346401a28ab62248b59b5/html5/thumbnails/20.jpg)
Client : Swagger-js with React
var self = this;var swagger = new SwaggerClient({ url: "http://localhost:8080/swagger.yaml", success: function() { swagger.apis.hackernews.fetch( {page:api}, {responseContentType: 'application/json'}, function(res) { self.setState({data:res.obj}); }); }});
at componentDidMount