SlideShare a Scribd company logo
1 of 69
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
APIs: semi-permeable, osmotic interfaces
Dawn Ahukanna, Design Principal and Front-end Architect
1
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
APIs: Semi-permeable, osmotic interfaces
2
APIs can be modelled using the
metaphor of semipermeable
interaction boundaries between
the intended High-Fidelity human-
centered interfaces and the
interpretation into a coded
implementation.
Moving beyond “red-lining” static
images, will discuss approaches and
recommendations to consider the
human developers and operators
experiences with APIs, with
membrane layers.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Agenda
• Introduction
• Definitions
• Membrane metaphor for
API space
• Empirical example
• Interface membrane layers
• System membrane layers
• Q&A
3
V
i
e
w
m
o
d
e
l
C
o
n
t
e
n
t
m
o
d
e
l
Controller
V
i
e
w
p
a
r
t
i
c
l
e
View
Pattern
Pattern
Pattern
Template
Page
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 4
Hi
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Dawn Ahukanna
5
Design Principal and Front-End Architect
dawnahukanna
I’m a Computational Designer.
Computational Designers are creative
people applying their mastery and
knowledge of how people, software,
hardware, data, network and systems all
interact as one closed system, with an
operating, open system environment.
dahukanna dawnahukanna
www.ibm.com/design/community/Dawn/
Working as a Design Principal in IBM. Helping
clients in partnership with business partners
to simplify IT management and operations
using preventive maintenance, analytics and
Deep Learning probabilistic insights.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 6
Definitions
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 7
Application Programming Interface · API
(Definition):
Application programming interface (API) is a mechanism for two or
more computer software programs to connect, communicate,
transport, transfer and transform transported objects, to create a
function capable of doing some work.
——
APIs are usually specified individually, without suggested sequencing
and dependencies.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 8
Semipermeable membrane
(Definition):
Semipermeable membrane is a biological or synthetic layer that
allows only certain molecules (objects) to pass through.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 9
Osmosis
(Definition):
Osmosis is a process where molecules of a liquid pass thorough a
semipermeable membrane. From a less concentrated solution to a
more concentrated one.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 10
Osmosis
(Definition):
Osmosis is a process where molecules of a liquid pass thorough a
semipermeable membrane. From a less concentrated solution to a
more concentrated one.
Initial state
Semipermeable
membrane
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 11
Osmosis
(Definition):
Osmosis is a process where molecules of a liquid pass thorough a
semipermeable membrane. From a less concentrated solution to a
more concentrated one.
Initial state Final state
Semipermeable
membrane
Net movement of
water particles or
objects to equalise
“concentration”
attribute
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 12
Cognitive Dissonance
(Definition):
Cognitive dissonance is a psychological term describing the mental
conflict that occurs when a person holds two beliefs that contradict
each other.
——
Some perspectives may seem to contradict each other, when they are
really flattened planer orientations of the spectrum of possible values
in a space e.g. hot is the opposite of cold. Something can be hot and
cold at the same instant, depending on where you measure.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 13
Assumption
(Definition):
Assumption is a statement or thing that is accepted as true or certain
of occurring, without proof.
——
I’m on a mission and recommend using presumptions instead: a
statement or thing that is accepted as true or certain of occurring, on
the basis of probability. The nature of probability is that is takes into
account all variables active at the point in time the probability of
occurrence was assessed.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 14
Membrane
Metaphors for
API space
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
3D-cube
Think and model each challenge that
your solving as a flattened 3-D
space. Each flattened section is a
semi-permeable membrane that
only allows certain “molecule”
objects to pass through.
15
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Title Text
Body Level One
Body Level Two
Body Level Three
Body Level Four
Body Level Five
16
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Title Text
Body Level One
Body Level Two
Body Level Three
Body Level Four
Body Level Five
60
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 17
– Brain Eno,
Musician and Music Producer
“The things you tend to dismiss as mistakes
perhaps you should take more seriously.
They weren’t what you intended, but that
does not make them wrong.”
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 18
– Brain Eno,
Musician and Music Producer
“The things you tend to dismiss as mistakes
perhaps you should take more seriously.
They weren’t what you intended, but that
does not make them wrong.”
- or complexity, maybe “it’s complicated”?
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Complicated membrane
19
Complicated
Consisting of many interconnected
parts or elements.
Also, complicated is past tense.
Therefore regardless of number and
intricacies of the parts, all factors are
known. The known unknowns are
accounted for by stated and
validated assumptions.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Plane or planer area membrane
20
Complicated Plane
From mathematics, a plane is a flat,
2 dimensional surface that can
extend to infinity.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Boundary membrane
21
Complicated Plane
Boundary
From mathematics, the limits of a
planer area or a dividing line.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Dimensions membrane
22
Complicated Planes
Boundary
Dimensions
From mathematics or physics, the
the minimum number of coordinates
required to specify a point within
that space.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © 2022
Complexity membrane
23
Complicated Planes
Boundary
Dimensions
Complexity
From mathematics, involving
numbers containing both a real
(known) and an imaginary (unknown)
part.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 24
Interface membrane
Complicated Planes
Boundary
Dimensions
Interface
Complexity
A point where 2 or more system,
organisations, people meet and
interact.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Flattening or abstracting to simplify
25
The same set of square units than compose a
cubed space could be unfolded in a different,
valid number of ways that results in the same
3-D shape but in dissimilar looking 2-D shapes.
Expressed mathematically:
Area = length x breadth and Volume = length x
breadth x height are the same value.
But the planer arrangement is a different
orientation.
Which arrangement of interface or membrane
category distinction is important for your
purpose or context?
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 26
Flattening or abstracting to simplify
The same set of square units than compose a
cubed space could be unfolded in a different,
valid number of ways that results in the same
3-D shape but in dissimilar looking 2-D shapes.
Expressed mathematically:
Area = length x breadth and Volume = length x
breadth x height are the same value.
But the planer arrangement is a different
orientation.
Which arrangement of interface or membrane
category distinction is important for your
purpose or context?
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 27
Flattening or abstracting to simplify
The same set of square units than compose a
cubed space could be unfolded in a different,
valid number of ways that results in the same
3-D shape but in dissimilar looking 2-D shapes.
Expressed mathematically:
Area = length x breadth and Volume = length x
breadth x height are the same value.
But the planer arrangement is a different
orientation.
Which arrangement of interface or membrane
category distinction is important for your
purpose or context?
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 28
Flattening or abstracting to simplify
The same set of square units than compose a
cubed space could be unfolded in a different,
valid number of ways that results in the same
3-D shape but in dissimilar looking 2-D shapes.
Expressed mathematically:
Area = length x breadth and Volume = length x
breadth x height are the same value.
But the planer arrangement is a different
orientation.
Which arrangement of interface or membrane
category distinction is important for your
purpose or context?
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 29
Empirical example
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 30
Planer interfaces
Would usually use the planer or
flattening practice of “red-
lining” static screen images to
indicate interactions,
connections, transfer and
dimensions within the interface
membrane and other system
membranes (APIs).
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 31
Planer interfaces
Would usually use the planer or
flattening practice of “red-
lining” static screen images to
indicate interactions,
connections, transfer and
dimensions within the interface
membrane and other system
membranes (APIs).
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Planer interface interactions
32
Each line defines a one
dimensional pathway of
interaction between two screen
planes where everything occurs
perfectly and there are no
exceptions.
Design “spaghetti” interaction
interfaces.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Planer interface interactions
33
One of the additional challenges
is threading the system level
interaction membranes (APIs)
that are not documented in this
diagram, to indicate API call
sequencing and dependencies
e.g. when and how to use
security token generation, usage
and expiration.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 34
Interface
Membrane
Layers
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 35
Particles or
Elements (added)
Colours
Fonts & styling
Backgrounds
Borders
…
Atoms
Buttons
Dropdown
…
Molecules
Combined atoms e.g.
Header avatar ==
Layout +
Image for avatar +
Label for welcome +
Text for avatar name
Compound (added)
Combined molecules
Organism
Combined compounds
Templates
Layouts
includiing grids
for organisms,
compounds,
molecules,
atoms and
particles with
placeholder
content.
Pages or Screens
Specific instances
of templates, with
representative
content replacing
placeholder text
Composition: Covered by defined Carbon guidelines, components UX and workflow patterns Placement and flow
Atomic Design System
Composable layers: containing the composites for particles, atoms, molecules, compounds and organisms Membrane:
modified by me
invented by Brad Frost
Composition: Covered by defined Design guidelines, components, UX and workflow patterns
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 36
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 37
V
i
e
w
m
o
d
e
l
C
o
n
t
e
n
t
m
o
d
e
l
Controller
V
i
e
w
p
a
r
t
i
c
l
e
View
Pattern
Pattern
Pattern
Template
Page
Data integration API
App Interaction API
App Communication API
External system integration API
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 38
Scenario
Going through the interface layers, starting farthest away
from the final destination, the screen.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 39
Content layer (Data and State)
Data supplied or sourced from an API/Database/
service, etc. for evaluating, processing, transforming
and eventually displaying on the page via a component.
Could leverage services for system and/or user
security, data integration, data caching, data storage
and interaction state management.
For example:
1. Content supplied from a data connection,
communication, transport, transfer and transform API
request.

{
"updatedTime": 1516788000000,
"data": {
"next": [16,48,16,0,0,36,52,68],
"previous": [16,156,94,0,0,12,12,12],
"time": [1516834800000,1516921200000,1517007600000,1517094000000,1517180400000,1517266800000,1517353200000,1517392800000]
}
}
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 40
Content Controller layer (Logic)
Logic, functionality, artificial intelligence and so on that
processes, transforms and stores the Content Model
source data before supplying it to a view.
For example:
1. Format the data.
2. Derive values from the raw data.
3. Transform numbers to strings
e.g. Transform and format 1516788000000 to January
23 2018.
Source: 1516834800000 (epoch time) validated and data formatted as English date MMM DD YYYY,
based on either default(static-fixed) or user formatting (dynamic-real time) preferences.
Transformed and Formatted Output:January 23 2018
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 41
View Model layer (State and Content)
The data and it’s interaction state are stored in a view
model. This can be sent to one or more components for
eventual display.
For example:
1. Store the transformed and formatted date label or
date value in a view model.
Could leverage services for system and/or user
security/access, data caching, data storage and
interaction state management.
View model data value: January 23 2018
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 42
View Particle layer (Basic building blocks)
The styling, layout, interactions and state representing a display building block at the lowest level.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 43
View Particle layer (Basic building blocks)
“January 23 2018”
The styling, layout, interactions and state representing a display building block at it’s lowest level.
For example:
1. Retrieve the relevant view model, that has prepared the date for display within a component.
2. Format with specified typography, style the bounding box background and boundary. component,
and apply view layout and styling overrides.
2. Apply icons, apply themes and other styling elements.
Particles are basic UI building blocks for things like typography, colours, etc.
These are all view particles:
View model data value:
January 23 2018
“January 23 2018”
Controller Function: [Format date value with
relevant and specified Typography, colours, etc]
+ =
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 44
View Style and Interaction layer
Views (atomic components) and nested-views (molecular components) made up of view
building blocks that includes content/data, define the behaviour of interaction and styling
related to items that make up components.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 45
View Style and Interaction layer
Views (atomic components) and nested-views (molecular components) made up of view
building blocks that includes content/data, define the behaviour of interaction and styling
related to items that make up components.
For example: Format, background, borders, behaviour and layout of -
1. Primary and secondary buttons
2. Checkboxes
3. Textboxes
4. Text Areas

5. Text Strings
Design System supplies a number of foundational components.
January 23 2018
January 23 2018 + + =
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 46
Composite layer (Modular Components)
Composite
Atomic components in specific and validated combinations to create composable
views or molecules.
For example:
Assemble configured and styled components to create reusable units.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 47
Composite layer (Modular Components)
+
=
Composite
Component one (Atom) Component two (Atom)
Modular component one
(Molecule)
Atomic components in specific and validated combinations to create composable
views or molecules.
For example:
Assemble configured and styled components to create reusable units.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 48
Composite layer (Multi-Modular Components)
Composite
Molecular components in specific and validated combination to create page
building blocks composed of display views + functional logic/service + styling or
organisms.
For example:
Assemble configured and styled page building blocks to create reusable units.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 49
Composite
Molecular components in specific and validated combination to create page
building blocks composed of display views + functional logic/service + styling or
organisms.
For example:
Assemble configured and styled page building blocks to create reusable units.
Composite layer (Multi-Modular Components)
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 50
Template layer (Layout)
Defines the sections/grid/layout of the page, including
responsive behaviour and contained components e.g. 

Layout and positioning of sections for Header,
Navigation, UI Shell, sidebar, main content area, footer,
etc.
Composite
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 51
Template layer (Layout)
Composite
Defines the sections/grid/layout of the page, including
responsive behaviour and contained components e.g. 

Layout and positioning of sections for Header,
Navigation, UI Shell, sidebar, main content area, footer,
etc.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 52
Page layer (Screen Instance)
Composite
Aggregates, calculates and generates, in real-time, all
the previous layers and displays the final resulting
assembled page.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 53
Aggregates, calculates and generates, in real-time, all
the previous layers and displays the final resulting
assembled page.
Page layer (Screen Instance)
IBM IoT Building Insights
Enterprise - All Buildings
Running
Priority Buildings
Select Date
05 / 04 / 2018 02
High
03
Medium
15
All
As of July 31 (1:00 PM) in [location]
Data Outage
Last 24 Hours
10%
All Buildings
Occupancy
As of Sep 31 (12:00 PM) in your local timezone
Footfall Prediction
5,000
Next 48 Hours
3,500
Last 48 Hours
As of July 31 (1:00 PM) in [location]
Energy Usage
Last 30 Days
800 kWh
Last 12 Months
10%
As of July 31 (1:00 PM) in [location]
Energy Wastage
Last 30 Days
200 Energy Usage
20%
kWh
kWh
As of July 31 (1:00 PM) in [location]
Energy Prediction
Next 48 Hours
4.5MWh
Last 48 Hours
600 kWh
Energy
As of Jul 31 (1:00 PM) in [location]
Footfall per Hour
Demographics
Age (AVG)
Age (AVG)
34
47
Women
Men
Last hour
10
Same Hour Last Week
40,000
256,000 216,000
IBM IoT Building Insights
EGgL C
Top Priorities
Time
Date
Priorities
Very_High consumption in
EGLC3_MAINMETER
05/16/2018 04.00pm
Very_High consumption in
EGLC3_MAINMETER
05/16/2018 04.15pm
Medium_consumption in
EGLC3_MAINMETER
05/16/2018 02.00am
Medium_consumption in
EGLC3_MAINMETER
05/16/2018 03.00pm
Medium_consumption in
EGLC3_MAINMETER
05/16/2018 05.00pm
Normal_consumption in
EGLC3_MAINMETER
05/16/2018 05.30am
Normal_consumption in
EGLC3_MAINMETER
05/16/2018 05.10pm
Normal_consumption in
EGLC3_MAINMETER
05/16/2018 03.00pm
Priority Buildings
Select Date
05 / 04 / 2018 02
High
03
Medium
15
All
60%
75 F
Enterprise All Buildings / EGL C /
Occupancy
As of Sep 31 (12:00 PM) in your local timezone
Footfall Prediction
5,000
Next 48 Hours
3,500
Last 48 Hours
As of Jul 31 (1:00 PM) in [location]
Footfall per Hour
Demographics
Age (AVG)
Age (AVG)
34
47
Women
Men
Last hour
10
Same Hour Last Week
40,000
256,000 216,000
As of July 31 (1:00 PM) in [location]
Unusual Usage
Hours
4
Last 24 Hours
Normal Hours Unsual Hours
As of July 31 (1:00 PM) in [location]
Energy Comparison
EGL C Enterprise Average
300 4.5
0 100 200 300 400 500 600 700 800 900 1000 1100 1200
kWh
Last 30 Days
kWh MWh
Energy
As of July 31 (1:00 PM) in [location]
Energy Prediction
Next 48 Hours
4.5MWh
Last 48 Hours
600
As of July 31 (1:00 PM) in [location]
Energy Usage
Last 30 Days
800 kWh
Last 12 Months
10%
As of July 31 (1:00 PM) in [location]
Energy Wastage
Last 30 Days
200 Energy Usage
20%
kWh
As of July 31 (1:00 PM) in [location]
Data Outage
Last 24 Hours
10%
As of Sep 31 (12:00 PM) in your local timezone
Footfall by Floor
Occupancy
34
26
74
106
30
50
52
Footfall
last hour
21
22
23
24
25
26
27
Floor
Composite
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 54
V
i
e
w
m
o
d
e
l
C
o
n
t
e
n
t
m
o
d
e
l
Controller
V
i
e
w
p
a
r
t
i
c
l
e
View
Pattern
Pattern
Pattern
Template
Page
Data integration API
App Interaction API
App Communication API
External system integration API
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 55
System
Membrane
Layers
56
Internet of Things (IoT) Sensors
(Sub-meters, Occupancy Sensors, etc)
Building Management System (BMS)/
Legacy Systems
Gateway & Connectivity Layer
IoT Connection Service
Extensibility Capabilities
- - User Interface API
- - User Interface interactions
- - Data Transformation
Implementation Stack (membrane)
APP1 Domain Specific App
People expertise
Core System (App)
Prerequisite
Core System (Back-end)
Legacy Client Systems
Cloud
Private
Infrastructure
APP4
APP3
APP2
Building Semantic Model
Machine Learning Analytics
Business Unit application portfolio
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 57
Membrane
Metaphors for
API space
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
3D-cube
Think and model each challenge that
your solving as a flattened 3-D
space. Each flattened section is a
semi-permeable membrane that
only allows certain “molecule”
objects to pass through.
58
Complicated Planes
Boundary
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 59
Complicated Planes
Boundary
Dimensions
Interface
Complexity
3D-cube flat
Think and model each challenge that
your solving as a flattened 3-D
space. Each flattened section is a
semi-permeable membrane that
only allows certain “molecule”
objects to pass through.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Title Text
Body Level One
Body Level Two
Body Level Three
Body Level Four
Body Level Five
60
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Title Text
Body Level One
Body Level Two
Body Level Three
Body Level Four
Body Level Five
16
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 61
Q&A
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Question: Do you see this being generic or frontend only, that is how do you
position this with an API first approach?
Response:
Yes, I do think membrane approach is generally applicable but don’t have the empirical
proof to validate that suggested approach. See interaction flows on slide 3.
Only comment I’ll make that API-First approach does not account for the contextual,
relevant and viable interactions at higher interface levels. That’s like giving a car chassis,
engine, tyres, etc., leaving someone else to complete the assemble the functioning car.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
Question: You seem to also take a boundary approach (Flores) but wondered if
you've aware of Postel's law?
Response:
Yes familiar with postal’s law and it’s also a fundamental law of UX - https://lawsofux.com/
postels-law/.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
Question: I'm curious what inspired this approach, which category of models did
you find inadequate or lacking?
Response:
I’m not aware of an existing software models that apply combinatorial cross- and mixed-
disciplinary models to address solution challenges.
This approach has evolved and built on prior knowledge, experience and feedback from
experiments.
IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
Question: It did strike that is this a take on Parnas's encapsulation?
Response:
I have not heard of Parnas’s encapsulation. From a brief review, my membrane approach is
more about only allowing certain matching objects to pass through based on contextual
interactions e.g. osmosis is water flowing to balance concentration levels, moving from
unbalanced concentration levels to balanced concentration levels.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
Question: When we build such models and share it with the team who probably
might just have a CS background, does it help to onboard the team?
I was wondering how might that help?
Response:
I would share my initial model inspiration and transform/contextualise the model
perspective to one they can relate to and apply. That's why I shared a practical, applied
example from my daily work as validating empirical proof.
Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022
IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
Comments and feedback:
- I always get instantly happy of Dawn, her aura and happy vibes.
- Good job Dawn. You just made a great ontological design in the API space!
- Thank you! super interesting concepts.
- Interesting. Chem in CS. Thank you.
Response:
Heartfelt thanks and glad you liked the presentation.

More Related Content

More from Pronovix

By the time they're reading the docs, it's already too late
By the time they're reading the docs, it's already too lateBy the time they're reading the docs, it's already too late
By the time they're reading the docs, it's already too latePronovix
 
Optimizing Dev Portals with Analytics and Feedback
Optimizing Dev Portals with Analytics and FeedbackOptimizing Dev Portals with Analytics and Feedback
Optimizing Dev Portals with Analytics and FeedbackPronovix
 
Success metrics when launching your first developer portal
Success metrics when launching your first developer portalSuccess metrics when launching your first developer portal
Success metrics when launching your first developer portalPronovix
 
Documentation, APIs & AI
Documentation, APIs & AIDocumentation, APIs & AI
Documentation, APIs & AIPronovix
 
Making sense of analytics for documentation pages
Making sense of analytics for documentation pagesMaking sense of analytics for documentation pages
Making sense of analytics for documentation pagesPronovix
 
Feedback cycles and their role in improving overall developer experiences
Feedback cycles and their role in improving overall developer experiencesFeedback cycles and their role in improving overall developer experiences
Feedback cycles and their role in improving overall developer experiencesPronovix
 
GraphQL Isn't An Excuse To Stop Writing Docs
GraphQL Isn't An Excuse To Stop Writing DocsGraphQL Isn't An Excuse To Stop Writing Docs
GraphQL Isn't An Excuse To Stop Writing DocsPronovix
 
API Documentation For Web3
API Documentation For Web3API Documentation For Web3
API Documentation For Web3Pronovix
 
Why your API doesn’t solve my problem: A use case-driven API design
Why your API doesn’t solve my problem: A use case-driven API designWhy your API doesn’t solve my problem: A use case-driven API design
Why your API doesn’t solve my problem: A use case-driven API designPronovix
 
unREST among the docs
unREST among the docsunREST among the docs
unREST among the docsPronovix
 
Developing a best-in-class deprecation policy for your APIs
Developing a best-in-class deprecation policy for your APIsDeveloping a best-in-class deprecation policy for your APIs
Developing a best-in-class deprecation policy for your APIsPronovix
 
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyone
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyoneAnnotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyone
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyonePronovix
 
What do developers do when it comes to understanding and using APIs?
What do developers do when it comes to understanding and using APIs?What do developers do when it comes to understanding and using APIs?
What do developers do when it comes to understanding and using APIs?Pronovix
 
Inclusive, Accessible Tech: Bias-Free Language in Code and Configurations
Inclusive, Accessible Tech: Bias-Free Language in Code and ConfigurationsInclusive, Accessible Tech: Bias-Free Language in Code and Configurations
Inclusive, Accessible Tech: Bias-Free Language in Code and ConfigurationsPronovix
 
Creating API documentation for international communities
Creating API documentation for international communitiesCreating API documentation for international communities
Creating API documentation for international communitiesPronovix
 
One Developer Portal to Document Them All
One Developer Portal to Document Them AllOne Developer Portal to Document Them All
One Developer Portal to Document Them AllPronovix
 
Docs-as-Code: Evolving the API Documentation Experience
Docs-as-Code: Evolving the API Documentation ExperienceDocs-as-Code: Evolving the API Documentation Experience
Docs-as-Code: Evolving the API Documentation ExperiencePronovix
 
Developer journey - make it easy for devs to love your product
Developer journey - make it easy for devs to love your productDeveloper journey - make it easy for devs to love your product
Developer journey - make it easy for devs to love your productPronovix
 
Complexity is not complicatedness
Complexity is not complicatednessComplexity is not complicatedness
Complexity is not complicatednessPronovix
 
How cognitive biases and ranking can foster an ineffective architecture and d...
How cognitive biases and ranking can foster an ineffective architecture and d...How cognitive biases and ranking can foster an ineffective architecture and d...
How cognitive biases and ranking can foster an ineffective architecture and d...Pronovix
 

More from Pronovix (20)

By the time they're reading the docs, it's already too late
By the time they're reading the docs, it's already too lateBy the time they're reading the docs, it's already too late
By the time they're reading the docs, it's already too late
 
Optimizing Dev Portals with Analytics and Feedback
Optimizing Dev Portals with Analytics and FeedbackOptimizing Dev Portals with Analytics and Feedback
Optimizing Dev Portals with Analytics and Feedback
 
Success metrics when launching your first developer portal
Success metrics when launching your first developer portalSuccess metrics when launching your first developer portal
Success metrics when launching your first developer portal
 
Documentation, APIs & AI
Documentation, APIs & AIDocumentation, APIs & AI
Documentation, APIs & AI
 
Making sense of analytics for documentation pages
Making sense of analytics for documentation pagesMaking sense of analytics for documentation pages
Making sense of analytics for documentation pages
 
Feedback cycles and their role in improving overall developer experiences
Feedback cycles and their role in improving overall developer experiencesFeedback cycles and their role in improving overall developer experiences
Feedback cycles and their role in improving overall developer experiences
 
GraphQL Isn't An Excuse To Stop Writing Docs
GraphQL Isn't An Excuse To Stop Writing DocsGraphQL Isn't An Excuse To Stop Writing Docs
GraphQL Isn't An Excuse To Stop Writing Docs
 
API Documentation For Web3
API Documentation For Web3API Documentation For Web3
API Documentation For Web3
 
Why your API doesn’t solve my problem: A use case-driven API design
Why your API doesn’t solve my problem: A use case-driven API designWhy your API doesn’t solve my problem: A use case-driven API design
Why your API doesn’t solve my problem: A use case-driven API design
 
unREST among the docs
unREST among the docsunREST among the docs
unREST among the docs
 
Developing a best-in-class deprecation policy for your APIs
Developing a best-in-class deprecation policy for your APIsDeveloping a best-in-class deprecation policy for your APIs
Developing a best-in-class deprecation policy for your APIs
 
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyone
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyoneAnnotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyone
Annotate, Automate & Educate: Driving generated OpenAPI docs to benefit everyone
 
What do developers do when it comes to understanding and using APIs?
What do developers do when it comes to understanding and using APIs?What do developers do when it comes to understanding and using APIs?
What do developers do when it comes to understanding and using APIs?
 
Inclusive, Accessible Tech: Bias-Free Language in Code and Configurations
Inclusive, Accessible Tech: Bias-Free Language in Code and ConfigurationsInclusive, Accessible Tech: Bias-Free Language in Code and Configurations
Inclusive, Accessible Tech: Bias-Free Language in Code and Configurations
 
Creating API documentation for international communities
Creating API documentation for international communitiesCreating API documentation for international communities
Creating API documentation for international communities
 
One Developer Portal to Document Them All
One Developer Portal to Document Them AllOne Developer Portal to Document Them All
One Developer Portal to Document Them All
 
Docs-as-Code: Evolving the API Documentation Experience
Docs-as-Code: Evolving the API Documentation ExperienceDocs-as-Code: Evolving the API Documentation Experience
Docs-as-Code: Evolving the API Documentation Experience
 
Developer journey - make it easy for devs to love your product
Developer journey - make it easy for devs to love your productDeveloper journey - make it easy for devs to love your product
Developer journey - make it easy for devs to love your product
 
Complexity is not complicatedness
Complexity is not complicatednessComplexity is not complicatedness
Complexity is not complicatedness
 
How cognitive biases and ranking can foster an ineffective architecture and d...
How cognitive biases and ranking can foster an ineffective architecture and d...How cognitive biases and ranking can foster an ineffective architecture and d...
How cognitive biases and ranking can foster an ineffective architecture and d...
 

Recently uploaded

Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 

Recently uploaded (20)

Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 

APIs: Semi-permeable, osmotic interfaces

  • 1. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 APIs: semi-permeable, osmotic interfaces Dawn Ahukanna, Design Principal and Front-end Architect 1
  • 2. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 APIs: Semi-permeable, osmotic interfaces 2 APIs can be modelled using the metaphor of semipermeable interaction boundaries between the intended High-Fidelity human- centered interfaces and the interpretation into a coded implementation. Moving beyond “red-lining” static images, will discuss approaches and recommendations to consider the human developers and operators experiences with APIs, with membrane layers.
  • 3. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Agenda • Introduction • Definitions • Membrane metaphor for API space • Empirical example • Interface membrane layers • System membrane layers • Q&A 3 V i e w m o d e l C o n t e n t m o d e l Controller V i e w p a r t i c l e View Pattern Pattern Pattern Template Page
  • 4. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 4 Hi
  • 5. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Dawn Ahukanna 5 Design Principal and Front-End Architect dawnahukanna I’m a Computational Designer. Computational Designers are creative people applying their mastery and knowledge of how people, software, hardware, data, network and systems all interact as one closed system, with an operating, open system environment. dahukanna dawnahukanna www.ibm.com/design/community/Dawn/ Working as a Design Principal in IBM. Helping clients in partnership with business partners to simplify IT management and operations using preventive maintenance, analytics and Deep Learning probabilistic insights.
  • 6. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 6 Definitions
  • 7. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 7 Application Programming Interface · API (Definition): Application programming interface (API) is a mechanism for two or more computer software programs to connect, communicate, transport, transfer and transform transported objects, to create a function capable of doing some work. —— APIs are usually specified individually, without suggested sequencing and dependencies.
  • 8. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 8 Semipermeable membrane (Definition): Semipermeable membrane is a biological or synthetic layer that allows only certain molecules (objects) to pass through.
  • 9. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 9 Osmosis (Definition): Osmosis is a process where molecules of a liquid pass thorough a semipermeable membrane. From a less concentrated solution to a more concentrated one.
  • 10. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 10 Osmosis (Definition): Osmosis is a process where molecules of a liquid pass thorough a semipermeable membrane. From a less concentrated solution to a more concentrated one. Initial state Semipermeable membrane
  • 11. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 11 Osmosis (Definition): Osmosis is a process where molecules of a liquid pass thorough a semipermeable membrane. From a less concentrated solution to a more concentrated one. Initial state Final state Semipermeable membrane Net movement of water particles or objects to equalise “concentration” attribute
  • 12. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 12 Cognitive Dissonance (Definition): Cognitive dissonance is a psychological term describing the mental conflict that occurs when a person holds two beliefs that contradict each other. —— Some perspectives may seem to contradict each other, when they are really flattened planer orientations of the spectrum of possible values in a space e.g. hot is the opposite of cold. Something can be hot and cold at the same instant, depending on where you measure.
  • 13. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 13 Assumption (Definition): Assumption is a statement or thing that is accepted as true or certain of occurring, without proof. —— I’m on a mission and recommend using presumptions instead: a statement or thing that is accepted as true or certain of occurring, on the basis of probability. The nature of probability is that is takes into account all variables active at the point in time the probability of occurrence was assessed.
  • 14. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 14 Membrane Metaphors for API space
  • 15. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 3D-cube Think and model each challenge that your solving as a flattened 3-D space. Each flattened section is a semi-permeable membrane that only allows certain “molecule” objects to pass through. 15
  • 16. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Title Text Body Level One Body Level Two Body Level Three Body Level Four Body Level Five 16
  • 17. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Title Text Body Level One Body Level Two Body Level Three Body Level Four Body Level Five 60
  • 18. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 17 – Brain Eno, Musician and Music Producer “The things you tend to dismiss as mistakes perhaps you should take more seriously. They weren’t what you intended, but that does not make them wrong.”
  • 19. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 18 – Brain Eno, Musician and Music Producer “The things you tend to dismiss as mistakes perhaps you should take more seriously. They weren’t what you intended, but that does not make them wrong.” - or complexity, maybe “it’s complicated”?
  • 20. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Complicated membrane 19 Complicated Consisting of many interconnected parts or elements. Also, complicated is past tense. Therefore regardless of number and intricacies of the parts, all factors are known. The known unknowns are accounted for by stated and validated assumptions.
  • 21. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Plane or planer area membrane 20 Complicated Plane From mathematics, a plane is a flat, 2 dimensional surface that can extend to infinity.
  • 22. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Boundary membrane 21 Complicated Plane Boundary From mathematics, the limits of a planer area or a dividing line.
  • 23. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Dimensions membrane 22 Complicated Planes Boundary Dimensions From mathematics or physics, the the minimum number of coordinates required to specify a point within that space.
  • 24. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © 2022 Complexity membrane 23 Complicated Planes Boundary Dimensions Complexity From mathematics, involving numbers containing both a real (known) and an imaginary (unknown) part.
  • 25. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 24 Interface membrane Complicated Planes Boundary Dimensions Interface Complexity A point where 2 or more system, organisations, people meet and interact.
  • 26. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Flattening or abstracting to simplify 25 The same set of square units than compose a cubed space could be unfolded in a different, valid number of ways that results in the same 3-D shape but in dissimilar looking 2-D shapes. Expressed mathematically: Area = length x breadth and Volume = length x breadth x height are the same value. But the planer arrangement is a different orientation. Which arrangement of interface or membrane category distinction is important for your purpose or context?
  • 27. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 26 Flattening or abstracting to simplify The same set of square units than compose a cubed space could be unfolded in a different, valid number of ways that results in the same 3-D shape but in dissimilar looking 2-D shapes. Expressed mathematically: Area = length x breadth and Volume = length x breadth x height are the same value. But the planer arrangement is a different orientation. Which arrangement of interface or membrane category distinction is important for your purpose or context?
  • 28. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 27 Flattening or abstracting to simplify The same set of square units than compose a cubed space could be unfolded in a different, valid number of ways that results in the same 3-D shape but in dissimilar looking 2-D shapes. Expressed mathematically: Area = length x breadth and Volume = length x breadth x height are the same value. But the planer arrangement is a different orientation. Which arrangement of interface or membrane category distinction is important for your purpose or context?
  • 29. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 28 Flattening or abstracting to simplify The same set of square units than compose a cubed space could be unfolded in a different, valid number of ways that results in the same 3-D shape but in dissimilar looking 2-D shapes. Expressed mathematically: Area = length x breadth and Volume = length x breadth x height are the same value. But the planer arrangement is a different orientation. Which arrangement of interface or membrane category distinction is important for your purpose or context?
  • 30. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 29 Empirical example
  • 31. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 30 Planer interfaces Would usually use the planer or flattening practice of “red- lining” static screen images to indicate interactions, connections, transfer and dimensions within the interface membrane and other system membranes (APIs).
  • 32. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 31 Planer interfaces Would usually use the planer or flattening practice of “red- lining” static screen images to indicate interactions, connections, transfer and dimensions within the interface membrane and other system membranes (APIs).
  • 33. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Planer interface interactions 32 Each line defines a one dimensional pathway of interaction between two screen planes where everything occurs perfectly and there are no exceptions. Design “spaghetti” interaction interfaces.
  • 34. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Planer interface interactions 33 One of the additional challenges is threading the system level interaction membranes (APIs) that are not documented in this diagram, to indicate API call sequencing and dependencies e.g. when and how to use security token generation, usage and expiration.
  • 35. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 34 Interface Membrane Layers
  • 36. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 35 Particles or Elements (added) Colours Fonts & styling Backgrounds Borders … Atoms Buttons Dropdown … Molecules Combined atoms e.g. Header avatar == Layout + Image for avatar + Label for welcome + Text for avatar name Compound (added) Combined molecules Organism Combined compounds Templates Layouts includiing grids for organisms, compounds, molecules, atoms and particles with placeholder content. Pages or Screens Specific instances of templates, with representative content replacing placeholder text Composition: Covered by defined Carbon guidelines, components UX and workflow patterns Placement and flow Atomic Design System Composable layers: containing the composites for particles, atoms, molecules, compounds and organisms Membrane: modified by me invented by Brad Frost Composition: Covered by defined Design guidelines, components, UX and workflow patterns
  • 37. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 36
  • 38. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 37 V i e w m o d e l C o n t e n t m o d e l Controller V i e w p a r t i c l e View Pattern Pattern Pattern Template Page Data integration API App Interaction API App Communication API External system integration API
  • 39. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 38 Scenario Going through the interface layers, starting farthest away from the final destination, the screen.
  • 40. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 39 Content layer (Data and State) Data supplied or sourced from an API/Database/ service, etc. for evaluating, processing, transforming and eventually displaying on the page via a component. Could leverage services for system and/or user security, data integration, data caching, data storage and interaction state management. For example: 1. Content supplied from a data connection, communication, transport, transfer and transform API request.
 { "updatedTime": 1516788000000, "data": { "next": [16,48,16,0,0,36,52,68], "previous": [16,156,94,0,0,12,12,12], "time": [1516834800000,1516921200000,1517007600000,1517094000000,1517180400000,1517266800000,1517353200000,1517392800000] } }
  • 41. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 40 Content Controller layer (Logic) Logic, functionality, artificial intelligence and so on that processes, transforms and stores the Content Model source data before supplying it to a view. For example: 1. Format the data. 2. Derive values from the raw data. 3. Transform numbers to strings e.g. Transform and format 1516788000000 to January 23 2018. Source: 1516834800000 (epoch time) validated and data formatted as English date MMM DD YYYY, based on either default(static-fixed) or user formatting (dynamic-real time) preferences. Transformed and Formatted Output:January 23 2018
  • 42. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 41 View Model layer (State and Content) The data and it’s interaction state are stored in a view model. This can be sent to one or more components for eventual display. For example: 1. Store the transformed and formatted date label or date value in a view model. Could leverage services for system and/or user security/access, data caching, data storage and interaction state management. View model data value: January 23 2018
  • 43. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 42 View Particle layer (Basic building blocks) The styling, layout, interactions and state representing a display building block at the lowest level.
  • 44. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 43 View Particle layer (Basic building blocks) “January 23 2018” The styling, layout, interactions and state representing a display building block at it’s lowest level. For example: 1. Retrieve the relevant view model, that has prepared the date for display within a component. 2. Format with specified typography, style the bounding box background and boundary. component, and apply view layout and styling overrides. 2. Apply icons, apply themes and other styling elements. Particles are basic UI building blocks for things like typography, colours, etc. These are all view particles: View model data value: January 23 2018 “January 23 2018” Controller Function: [Format date value with relevant and specified Typography, colours, etc] + =
  • 45. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 44 View Style and Interaction layer Views (atomic components) and nested-views (molecular components) made up of view building blocks that includes content/data, define the behaviour of interaction and styling related to items that make up components.
  • 46. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 45 View Style and Interaction layer Views (atomic components) and nested-views (molecular components) made up of view building blocks that includes content/data, define the behaviour of interaction and styling related to items that make up components. For example: Format, background, borders, behaviour and layout of - 1. Primary and secondary buttons 2. Checkboxes 3. Textboxes 4. Text Areas
 5. Text Strings Design System supplies a number of foundational components. January 23 2018 January 23 2018 + + =
  • 47. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 46 Composite layer (Modular Components) Composite Atomic components in specific and validated combinations to create composable views or molecules. For example: Assemble configured and styled components to create reusable units.
  • 48. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 47 Composite layer (Modular Components) + = Composite Component one (Atom) Component two (Atom) Modular component one (Molecule) Atomic components in specific and validated combinations to create composable views or molecules. For example: Assemble configured and styled components to create reusable units.
  • 49. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 48 Composite layer (Multi-Modular Components) Composite Molecular components in specific and validated combination to create page building blocks composed of display views + functional logic/service + styling or organisms. For example: Assemble configured and styled page building blocks to create reusable units.
  • 50. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 49 Composite Molecular components in specific and validated combination to create page building blocks composed of display views + functional logic/service + styling or organisms. For example: Assemble configured and styled page building blocks to create reusable units. Composite layer (Multi-Modular Components)
  • 51. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 50 Template layer (Layout) Defines the sections/grid/layout of the page, including responsive behaviour and contained components e.g. 
 Layout and positioning of sections for Header, Navigation, UI Shell, sidebar, main content area, footer, etc. Composite
  • 52. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 51 Template layer (Layout) Composite Defines the sections/grid/layout of the page, including responsive behaviour and contained components e.g. 
 Layout and positioning of sections for Header, Navigation, UI Shell, sidebar, main content area, footer, etc.
  • 53. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 52 Page layer (Screen Instance) Composite Aggregates, calculates and generates, in real-time, all the previous layers and displays the final resulting assembled page.
  • 54. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 53 Aggregates, calculates and generates, in real-time, all the previous layers and displays the final resulting assembled page. Page layer (Screen Instance) IBM IoT Building Insights Enterprise - All Buildings Running Priority Buildings Select Date 05 / 04 / 2018 02 High 03 Medium 15 All As of July 31 (1:00 PM) in [location] Data Outage Last 24 Hours 10% All Buildings Occupancy As of Sep 31 (12:00 PM) in your local timezone Footfall Prediction 5,000 Next 48 Hours 3,500 Last 48 Hours As of July 31 (1:00 PM) in [location] Energy Usage Last 30 Days 800 kWh Last 12 Months 10% As of July 31 (1:00 PM) in [location] Energy Wastage Last 30 Days 200 Energy Usage 20% kWh kWh As of July 31 (1:00 PM) in [location] Energy Prediction Next 48 Hours 4.5MWh Last 48 Hours 600 kWh Energy As of Jul 31 (1:00 PM) in [location] Footfall per Hour Demographics Age (AVG) Age (AVG) 34 47 Women Men Last hour 10 Same Hour Last Week 40,000 256,000 216,000 IBM IoT Building Insights EGgL C Top Priorities Time Date Priorities Very_High consumption in EGLC3_MAINMETER 05/16/2018 04.00pm Very_High consumption in EGLC3_MAINMETER 05/16/2018 04.15pm Medium_consumption in EGLC3_MAINMETER 05/16/2018 02.00am Medium_consumption in EGLC3_MAINMETER 05/16/2018 03.00pm Medium_consumption in EGLC3_MAINMETER 05/16/2018 05.00pm Normal_consumption in EGLC3_MAINMETER 05/16/2018 05.30am Normal_consumption in EGLC3_MAINMETER 05/16/2018 05.10pm Normal_consumption in EGLC3_MAINMETER 05/16/2018 03.00pm Priority Buildings Select Date 05 / 04 / 2018 02 High 03 Medium 15 All 60% 75 F Enterprise All Buildings / EGL C / Occupancy As of Sep 31 (12:00 PM) in your local timezone Footfall Prediction 5,000 Next 48 Hours 3,500 Last 48 Hours As of Jul 31 (1:00 PM) in [location] Footfall per Hour Demographics Age (AVG) Age (AVG) 34 47 Women Men Last hour 10 Same Hour Last Week 40,000 256,000 216,000 As of July 31 (1:00 PM) in [location] Unusual Usage Hours 4 Last 24 Hours Normal Hours Unsual Hours As of July 31 (1:00 PM) in [location] Energy Comparison EGL C Enterprise Average 300 4.5 0 100 200 300 400 500 600 700 800 900 1000 1100 1200 kWh Last 30 Days kWh MWh Energy As of July 31 (1:00 PM) in [location] Energy Prediction Next 48 Hours 4.5MWh Last 48 Hours 600 As of July 31 (1:00 PM) in [location] Energy Usage Last 30 Days 800 kWh Last 12 Months 10% As of July 31 (1:00 PM) in [location] Energy Wastage Last 30 Days 200 Energy Usage 20% kWh As of July 31 (1:00 PM) in [location] Data Outage Last 24 Hours 10% As of Sep 31 (12:00 PM) in your local timezone Footfall by Floor Occupancy 34 26 74 106 30 50 52 Footfall last hour 21 22 23 24 25 26 27 Floor Composite
  • 55. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 54 V i e w m o d e l C o n t e n t m o d e l Controller V i e w p a r t i c l e View Pattern Pattern Pattern Template Page Data integration API App Interaction API App Communication API External system integration API
  • 56. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 55 System Membrane Layers
  • 57. 56 Internet of Things (IoT) Sensors (Sub-meters, Occupancy Sensors, etc) Building Management System (BMS)/ Legacy Systems Gateway & Connectivity Layer IoT Connection Service Extensibility Capabilities - - User Interface API - - User Interface interactions - - Data Transformation Implementation Stack (membrane) APP1 Domain Specific App People expertise Core System (App) Prerequisite Core System (Back-end) Legacy Client Systems Cloud Private Infrastructure APP4 APP3 APP2 Building Semantic Model Machine Learning Analytics Business Unit application portfolio
  • 58. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 57 Membrane Metaphors for API space
  • 59. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 3D-cube Think and model each challenge that your solving as a flattened 3-D space. Each flattened section is a semi-permeable membrane that only allows certain “molecule” objects to pass through. 58 Complicated Planes Boundary
  • 60. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 59 Complicated Planes Boundary Dimensions Interface Complexity 3D-cube flat Think and model each challenge that your solving as a flattened 3-D space. Each flattened section is a semi-permeable membrane that only allows certain “molecule” objects to pass through.
  • 61. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Title Text Body Level One Body Level Two Body Level Three Body Level Four Body Level Five 60
  • 62. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Title Text Body Level One Body Level Two Body Level Three Body Level Four Body Level Five 16
  • 63. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 61 Q&A
  • 64. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Question: Do you see this being generic or frontend only, that is how do you position this with an API first approach? Response: Yes, I do think membrane approach is generally applicable but don’t have the empirical proof to validate that suggested approach. See interaction flows on slide 3. Only comment I’ll make that API-First approach does not account for the contextual, relevant and viable interactions at higher interface levels. That’s like giving a car chassis, engine, tyres, etc., leaving someone else to complete the assemble the functioning car.
  • 65. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna Question: You seem to also take a boundary approach (Flores) but wondered if you've aware of Postel's law? Response: Yes familiar with postal’s law and it’s also a fundamental law of UX - https://lawsofux.com/ postels-law/.
  • 66. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 Question: I'm curious what inspired this approach, which category of models did you find inadequate or lacking? Response: I’m not aware of an existing software models that apply combinatorial cross- and mixed- disciplinary models to address solution challenges. This approach has evolved and built on prior knowledge, experience and feedback from experiments. IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna
  • 67. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna Question: It did strike that is this a take on Parnas's encapsulation? Response: I have not heard of Parnas’s encapsulation. From a brief review, my membrane approach is more about only allowing certain matching objects to pass through based on contextual interactions e.g. osmosis is water flowing to balance concentration levels, moving from unbalanced concentration levels to balanced concentration levels.
  • 68. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna Question: When we build such models and share it with the team who probably might just have a CS background, does it help to onboard the team? I was wondering how might that help? Response: I would share my initial model inspiration and transform/contextualise the model perspective to one they can relate to and apply. That's why I shared a practical, applied example from my daily work as validating empirical proof.
  • 69. Dawn Ahukanna - APIs: semi-permeable, osmotic interfaces © June 2022 IBM Learning | AI Skills Academy | © 2022 IBM Corporation Dawn Ahukanna Comments and feedback: - I always get instantly happy of Dawn, her aura and happy vibes. - Good job Dawn. You just made a great ontological design in the API space! - Thank you! super interesting concepts. - Interesting. Chem in CS. Thank you. Response: Heartfelt thanks and glad you liked the presentation.