Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. I <3 APIs
    San Jose, October 2015
    API first?
    @mikermcneil

    View full-size slide

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

    View full-size slide

  3. Mike McNeil
    @mikermcneil
    github.com/mikermcneil

    View full-size slide

  4. Mike McNeil
    Founder/CEO Treeline (YC W15)
    creator & BDFL of

    View full-size slide

  5. the leading open-source
    MVC framework for Node.js

    View full-size slide

  6. demo
    For a deeper dive, google:
    “Sails.js Platzi”

    View full-size slide

  7. 1. No REST For The Weary
    2. Upside Down
    3. Everyday APIs

    View full-size slide

  8. REST
    No
    for the weary.
    1.

    View full-size slide

  9. A good starting point
    for building any cloud API.
    REST

    View full-size slide

  10. REST CRUD
    ===
    For our purposes:

    View full-size slide

  11. Create
    Read
    Update
    Delete

    View full-size slide

  12. first version (late 2011)

    View full-size slide

  13. custom app-specific adapters

    (LDAP / Active Directory / etc)
    ~20 other community adapters

    View full-size slide

  14. A noun-centric ontology
    works great for building
    databases.

    View full-size slide

  15. Never works for 100%
    of any app.
    CRUD

    View full-size slide

  16. Search the store.

    View full-size slide

  17. search({  
       query:  ‘shoes’  
    });
    Search the store.

    View full-size slide

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

    View full-size slide

  19. login({  
       username:  ‘mikermcneil’  
       password:  ‘c4tP4rTy’  
    });
    Log in.

    View full-size slide

  20. Session.create({  
       userId:  User.find({  
           username:’mikermcneil’  
           password:  ‘c4tP4rTy  
       }).id  
    })
    Log in.

    View full-size slide

  21. So do we use CRUD?

    View full-size slide

  22. Because half the time,
    we don’t actually know what
    we’re supposed to be building.

    View full-size slide

  23. 2. Upside Down

    View full-size slide

  24. API first?
    API centric, UI first.

    View full-size slide

  25. We need to flip things
    upside down

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 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?!

    View full-size slide

  29. “Traditional”
    Development Process
    1.Design data model
    2.Implement custom server code
    3.Start implementing custom UI code
    c. 2005

    View full-size slide

  30. “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

    View full-size slide

  31. “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

    View full-size slide

  32. “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

    View full-size slide

  33. “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

    View full-size slide

  34. “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

    View full-size slide

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

    View full-size slide

  36. It’s ok if the backend
    starts off… fake.

    View full-size slide

  37. 3. Everyday APIs

    View full-size slide

  38. We don’t design most of
    the APIs we use.

    View full-size slide

  39. Human
    Client Devices
    Cloud

    View full-size slide

  40. Human
    Client Devices
    Cloud

    View full-size slide

  41. Human
    Client Devices
    Cloud

    View full-size slide

  42. Human
    Client Devices
    Cloud
    custom UI code
    custom server code

    View full-size slide

  43. Every time we write a function,
    we’re designing an API.

    View full-size slide

  44. We're just giving you functions
    that return functions that you
    do things with.
    Doug Wilson
    Lead Maintainer, Express

    View full-size slide

  45. )
    }
    (
    function {

    View full-size slide

  46. )
    }
    (
    function {
    a b c
    , ,

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. )
    }
    (
    function {
    console.log(
    a
    b
    c
    return a b c ;
    + +
    exits
    inputs
    throw new Error();
    if (Math.random()>0.5) {
    }
    behavior

    View full-size slide

  51. 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)
    *
    *
    *

    View full-size slide

  52. The
    Node Machine
    Project

    View full-size slide

  53. Like Swagger
    for
    node-machine.org/spec
    JavaScript functions.

    View full-size slide

  54. Like Swagger
    for
    node-machine.org/spec
    middleware.

    View full-size slide

  55. Like Swagger
    for
    node-machine.org/spec
    Node modules.

    View full-size slide

  56. Machinepacks
    node-machine.org/spec

    View full-size slide

  57. node-machine.org
    sailsjs.org

    View full-size slide

  58. Questions?
    @mikermcneil
    node-machine.org

    View full-size slide

  59. 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)

    View full-size slide