Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Driven API Development

7,992 views

Published on

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

Published in: Technology

Design Driven API Development

  1. 1. Design-Driven API Development Sokichi Fujita
  2. 2. Generation of API Description Languages
  3. 3. Swagger
  4. 4. RAML
  5. 5. API-Blueprint
  6. 6. API Description Languages • XML • WADL, RADL, WSDL2 • JSON • Swagger, I/O Docs • YAML • Swagger, RAML • Markdown • API-Blueprint Popular in GitHub, NPM, …
  7. 7. Why
  8. 8. Server Code API Document SDKs Specification Document Samples Mock Server API Console Test code Manually developed resources as a reference
  9. 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. 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. 11. Design-Driven Development
  12. 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. 13. Demo
  14. 14. Demo • Hacker News API • Swagger-Node • Hacker News Client • React, Swagger-js, Electron
  15. 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. 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
  17. 17. filename of the controllers name of the controller
  18. 18. 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
  19. 19. 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

×