10 minutes demo for API Meetup Tokyo #9 -Summer of Lab- (28 Aug, 2015)

1. Design-Driven
API Development
Sokichi Fujita

2. Generation of
API Description Languages

3. Swagger

4. RAML

5. API-Blueprint

6. API Description Languages
• XML
• WADL, RADL, WSDL2
• JSON
• Swagger, I/O Docs
• YAML
• Swagger, RAML
• Markdown
• API-Blueprint
Popular in GitHub, NPM, …

7. Why

8. Server
Code
API
Document
SDKs
Specification
Document
Samples
Mock Server
API Console
Test code
Manually developed resources
as a reference

9. Server
Code
API
Document
SDKs
Samples
Mock Server
API Console
Test code
Manually developed resources
It is incorrect
or
doesn’t exist
Sometimes,

10. 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, …

11. Design-Driven
Development

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

13. Demo

14. Demo
• Hacker News API
• Swagger-Node
• Hacker News Client
• React, Swagger-js, Electron

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

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

18. filename of the controllers
name of the controller

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

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