$30 off During Our Annual Pro Sale. View Details »

I Love APIs

Mike McNeil
October 13, 2015

I Love APIs

Coverage:
https://www.forbes.com/sites/danwoods/2015/10/19/dont-get-ubered-apis-hold-key-to-digital-transformation/?sh=50112fea182c#:~:text=One%20recommendation%20that,deep%20experience.

Goal:
Minimize technical debt, code changes, and rewrites. Show stakeholders and customers the developing or fully-implemented UI as early as possible.

How:
Fake the backend. Then when the UI code is completely done, make the backend real.

Mike McNeil

October 13, 2015
Tweet

More Decks by Mike McNeil

Other Decks in Design

Transcript

  1. API first? ©2015 Apigee Corp. All Rights Rese The views

    expressed in this presentation are those of the presenter, and not necessarily those of Apigee Corporation or the presenter’s employer.
  2. Product.find({      or:  [          {

     name:  {contains:  ’shoes’}},          {  description:  {contains:  ’shoes’}}      ]   }); //  …also  search  recipes //  …also  search  comments  then  for  each  one,  look  up   //  the  containing  product  or  recipe… Search the store. //  …then  rank  results..  oh  wait  but  actually  this  should  all   be  in  an  index  of  some  kind
  3. Session.create({      userId:  User.find({          username:’mikermcneil’

             password:  ‘c4tP4rTy      }).id   }) Log in.
  4. omated tests for code write documentation for write code manually

    test code deploy co discover bug remember how code wo fix code manually test code discover that automated tests fail now update automated tests ation redeploy co design
  5. omated tests for code write documentation for write code manually

    test code deploy co discover bug remember how code wo fix code manually test code discover that automated tests fail now update automated tests ation redeploy co design
  6. How we think as product designers: 1. User interface design

    2. Interaction design 3. Cross fingers (development starts) … 4. Oh crap, one more thing I forgot to mention… 5. Can I see a preview? 6. AHHH WHAT IS THIS?!
  7. “Traditional” Development Process 1.Design data model 2.Implement custom server code

    3.Start implementing custom UI code 4.AHHHHHHH WTF IS THIS??! 5.Change the data model, change server code, change UI code, change API docs (but you probably don’t have any) c. 2005
  8. “NoSQL” Development Process 1.Implement custom server code 2.Implement custom UI

    code 3.Stumble upon (then maybe even document!) your cloud API 4.Stumble upon your data model c. 2011
  9. “NoSQL” Development Process 1.Implement custom server code 2.Implement custom UI

    code 3.AHHHHHHH WTF IS THIS??! 4.Change server code, change UI code 5.Stumble upon & document your cloud API 6.Stumble upon your data model c. 2011
  10. “API-Centric” Development Process 1.Implement custom code for each UI 2.Implement

    fake server code 3.Stumble upon your cloud API 4.Implement real server code 5.Stumble upon your data model
  11. “API-Centric” Development Process 1.Implement custom code for each UI 2.Implement

    fake server code 3.AHHHHHHH WTF IS THIS??! (one or more of the UIs changed) 4.Change UI code 5.Stumble upon your cloud API 6.Now implement real server code 7.Stumble upon your data model
  12. Goal: Minimize technical debt, code changes, and rewrites. How: Show

    stakeholders and customers the developing or fully-implemented UI as early as possible.
  13. We're just giving you functions that return functions that you

    do things with. Doug Wilson Lead Maintainer, Express
  14. ) } ( function { a b c , ,

    console.log(“hi”);
  15. ) } ( function { a b c , ,

    console.log(“hi”); return a b c ; + +
  16. ) } ( function { a b c , ,

    console.log(“hi”); return a b c ; + + if (Math.random()>0.5) { } throw new Error();
  17. ) } ( function { console.log( a b c return

    a b c ; + + exits inputs throw new Error(); if (Math.random()>0.5) { } behavior
  18. a b c exits inputs Output: number Output: Error error

    success Description: Sorry, you got unlucky. First number Second number Third number (e.g. 7) (e.g. 2) (e.g. 3) (e.g. 1) DESCRIPTION: Add the 3 provided numbers together. MORE INFO URL: http://example.com/docs/math/add FRIENDLY NAME: Add numbers PACKAGE: machinepack-math (v3.2.9) * * *
  19. The Machine Specification Branching and convergence Lamda functions as arguments

    Type validation and coercion (recursive) Automatically generated documentation machine-­‐as-­‐script machine-­‐as-­‐action (what’s new)