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

Compose Software Like Nature Would

Ahmed Omran
September 15, 2017

Compose Software Like Nature Would

Inspired by biology background I combine some ideas from functional and OO programming into a talk about software design.

Ahmed Omran

September 15, 2017
Tweet

More Decks by Ahmed Omran

Other Decks in Programming

Transcript

  1. Compose software
    like nature would
    @this_ahmed

    View full-size slide

  2. Feature Request

    View full-size slide

  3. Big Ball of Mud

    View full-size slide

  4. software as a living organism

    View full-size slide

  5. Earth: 4.5 billion YA

    View full-size slide

  6. Monads: 3.5 billion YA

    View full-size slide

  7. stromatolites

    View full-size slide

  8. The Machinery of Life

    David S. Goodsell

    View full-size slide

  9. cell membrane
    boundaries

    View full-size slide

  10. easily replaced

    View full-size slide

  11. messages = colony

    View full-size slide

  12. Bacterial colony

    View full-size slide

  13. –Alan Kay
    “I thought of objects being like biological cells and/
    or individual computers on a network, only able to
    communicate with messages…”

    View full-size slide

  14. Components: modules,
    objects, functions, etc.
    Messages: functions,
    properties, events, etc.
    Components with boundaries
    Compose with messages

    View full-size slide

  15. • easier to reason about (fits in your head)

    • easier to change (can be re-written)

    • easier to test (confidence when changing)

    View full-size slide

  16. import myModule from ‘file.js';
    // file.js
    export default function() {
    return something;
    }
    Boundaries

    View full-size slide

  17. Data
    Fetch
    Data
    Filter
    Line
    Graph
    data-fetch.js
    data-filter.js
    line-graph.js

    View full-size slide

  18. Data
    Fetch
    Data
    Filter
    Bar
    Graph
    change
    data-fetch.js
    data-filter.js
    bar-graph.js

    View full-size slide

  19. Data
    Fetch
    Data
    Filter
    Line
    Graph
    /project
    |-- data-fetch.js
    |-- data-filter.js
    |-- line-graph.js
    … 1000 other files
    What does system do?

    View full-size slide

  20. Multicellular: 1.5 billion YA

    View full-size slide

  21. stove-pipe sponge

    View full-size slide

  22. Mesh
    Data
    Fetch
    Data
    Filter
    Line
    Graph

    View full-size slide

  23. project
    └── dashboard
    └── sales-widget
    ├── data-fetch.js
    ├── data-filter.js
    ├── index.js
    └── line-graph.js

    View full-size slide

  24. sales-widget/index.js
    // import or inject components
    // compose our components
    const sales = dataFetch(“/sales");
    const planSales = dataFilter(sales, plan);
    lineGraph(planSales);

    View full-size slide

  25. side-effects

    View full-size slide

  26. Nervous System: ~600
    million YA

    View full-size slide

  27. push side-effects to the edges of our
    program

    View full-size slide

  28. Data
    (e.g. fetch api)
    “Nerve Net”
    draw
    (e.g. chart.js)

    View full-size slide

  29. Functional Core

    View full-size slide

  30. pure functions
    const increment = (n) => { n + 1; };

    View full-size slide

  31. mutable data
    const array = [3,1,2];
    array[0] // 3
    array.sort(); // somewhere else
    array[0] // 1

    View full-size slide

  32. immutable data
    const array = Object.freeze([3,1,2]);
    array[0] // 3
    array.sort(); // TypeError: Cannot assign to
    read only property '1' ...
    array[0] // 3

    View full-size slide

  33. let newArr = [ ...prevArr ];
    let newObj = { ...prevObj };
    copy data

    View full-size slide

  34. Data
    Filter
    Data
    Shaper
    Line
    Graph
    Options
    Data
    (e.g. fetch api)
    Functional
    Core
    “Nerve Net”
    draw
    (e.g. chart.js)

    View full-size slide

  35. Data
    Filter
    Data
    Shaper
    Line
    Graph
    Options
    Data
    (e.g. fetch api)
    Functional
    Core
    “Nerve Net”
    draw
    (e.g. chart.js)
    Date
    Filter
    TrendLine
    Gary Bernhardt, Boundaries

    View full-size slide

  36. Cambrian Explosion: ~541
    million YA

    View full-size slide

  37. Run and Tumble
    mit.edu

    View full-size slide

  38. Run and Tumble to Better Design
    small
    components
    compose with
    messages
    push side-effects
    to boundaries
    functional core name things

    View full-size slide

  39. Resources
    • Gary Bernhardt - Boundaries: https://
    www.destroyallsoftware.com/talks/boundaries

    • Dan North - Software that Fits in Your Head: https://
    www.youtube.com/watch?v=4Y0tOi7QWqM

    • Rich Hickey - Simple Made Easy: https://www.infoq.com/
    presentations/Simple-Made-Easy

    • Jessica Kerr - Functional Principles for OO Development:
    https://www.youtube.com/watch?v=tq5SQ4W3gRI

    View full-size slide

  40. Compose software
    like nature would
    @this_ahmed

    View full-size slide