The SAM Pattern makes it easy for any developer to leverage the superior semantics of Dr. Lamport's TLA+

1. I believe that the best way to get better
programs is to teach programmers how to
think better
-- Dr. Leslie Lamport

2. SAMThe State Action Model Pattern
Jean-Jacques Dubray
© https://creativecommons.org/licenses/by-nc-sa/4.0/

3. '
(primed variables)

4. Action State
Thing Relationship
Dynamic
Static
Physical Conceptual
The STAR Diagram

5. Light Energy
Mass Force
Dynamic
Static
Physical Conceptual
STAR is as fundamental to
Computing as the FLEM Diagram is
to Physics

6. Thing
RelationshipState
Action

7. State machines provide a
framework for much of computer
science
• “Don’t be obsessed by computer languages
[and frameworks]”
• Keep a clear delineation between
o Programming model
o Wiring
o Architecture
-- Dr Lamport

8. Classical State
Machines
A set of states Q = {q0, q1, q2}
A start state q0
A set of transitions which are triplets (q,a,q') members of Q x Act x Q

9. State Machines can
Compute…
“the die-hard problem”
5 liters 3 liters
4 liters

10. State Machines can
Compute

11. There are several ways to
define computation
• A computation is a sequence of steps, called a
behavior
• There are three common choices for what a step is,
leading to three different kinds of behavior:
• Action Behavior a step is an action, an action
behavior is a sequence of actions
• State Behavior A step is a pair <Si , Si+1> of states, a
state behavior is a sequence
s1 → s2 → s3 → · · · of states
• State-Action Behavior A step is a triple < Si , α, Si+1 > where
S are states and α an action
-- Dr. Lamport

12. We just created a language that
computes volumes of liquid
(not sure it will be popular though)
1. Fill Big
2. Fill Small from Big
3. Empty Small
4. Fill small from Big
5. Fill Big
6. Fill small from Big
State-Action Behavior Action Behavior
5 liters
3 liters

13. Programming Languages are Designed
to Make it Easy to Create State
Machines
1. Fill Big
2. Fill Small from Big
3. Empty Small
4. Fill small from Big
5. Fill Big
6. Fill small from Big

14. How do we describe a
“standard” program as a state
machine?
var fact = function(n) {
return (n == 1) ? 1 : n * fact(n-1);
}
var fact = function(n) {
var f = 1, i =1 ;
for (i = 1; i <= n; ++i) { f = i * f; }
return f ;
}

15. How do we describe a
“standard” program as a state
machine?
computing
i = n
f = 1
done
i==1
i = i - 1
f = f * i
i>1
error
i==0

16. Recursion and State
Machines
Computing
i = 2
n = 5
f1 = 1
fi = i * fi-1
i = i + 1
i<=n
error
i==0
f1 = 1
f2 = 2
f3 = 6
f4 = 24
f5 = 120
i = 5
f = f5
!fi && i<=n
done
i>n

17. Introducing TLA+
(Temporal Logic of
Actions)
computing
i = n
f = 1
done
[i==1]
i = i - 1
f = f * i
[i>1]
error
[i==0]

18. Primed Variables
computing
i' = n
f' = 1
done
[i==1]
i' = i - 1
f' = f * i'
[i>1]
error
[i==0]
The meaning of primed
variables is the variable's
value in the next state.

19. Next-State Predicate
computing
i' = n
f' = 1
done
i' = i - 1
f' = f * i'
error
error = (i' == 0)
done = (i' == 1)
computing = !done && !error
f = f'
i = i'

20. What is a Programming
Step?
computing
i' = n
f' = 1
done
i' = i - 1
f' = f * i'
error
error = (i' == 0)
done = (i' == 1)
computing = !done && !error
f = f'
i = i'
1
Compute next-state
property values
2 Update State
3
Decide what
happens next

21. TLA+ is fundamentally
different from classical State
Machines
computing
i = n
f = 1
done
[i==1]
i = i - 1
f = f * i
[i>1]
error
[i==0]
Actions cannot
manipulate State,
and cannot decide
of the Target Stat
e

22. What Changed?
Not much…
Functions
State(s)
i' = i - 1
f' = f * i'Action
error = (i' == 0)
done = (i' == 1)
computing = !done && !error
f = f'
i = i'
Next-State Relation (Function)
Next-Action Function
if (computing) {
…
}
i' = n
f' = 1Initial State

23. What Changed?

24. What is State?
What is Type?

25. What is State?
What is Type?
A Type, Thing, Model… is a list of property values
{
rpm : 2400
}
A State is a range of property values (sometimes
reduced to one value)
started = (rpm > 900)

26. TLA+ Specification of
Factorial Algorithm
Action
State
Type

27. TLA+ Specification of
Factorial Algorithm
i = 5
5
1 5
mult

28. TLA+ Specification of
Factorial Algorithm
i = 5
5*1
1 5
mult
4

29. TLA+ Specification of
Factorial Algorithm
i = 5
5*1
1 5
mult
4

30. TLA+ Specification of
Factorial Algorithm
i = 5
5 4
mult
test

31. TLA+ Specification of
Factorial Algorithm
i = 5
5*4
5 4
mult
3

32. How do we use TLA+
in Practice?

33. Modern GUIs have become just a Node
in a Dynamic Distributed System
• your friends,
• players
• your watch
• IoT sensors
• …

34. Events and Callbacks
Composability
Encapsulation
Subscriptions
Separation of Concern
Data Consistency
from
to
Maintainability
…
Ingo Mayer et al (https://infoscience.epfl.ch/record/176887/files/DeprecatingObservers2012.pdf)

35. After some intense research …
1. Framing the code we used
to write as a
“class/component”
2. Adding a “reactive” change
detection mechanism to re-
render components
automatically each time their
properties change
Leading Web Frameworks like
React and Angular came up
with a … component Model …

36. Functional Reactive
Programming: Elm/Redux
• Immutable data
• Observables
• Pure functions
• Static typing
• Unidirectional data flow
Source: http://www.codemag.com/article/1601071
http://guide.elm-lang.org/architecture/user_input/buttons.html

37. 33% of the code in Adobe’s desktop
applications is devoted to event handling
logic
50% of the bugs reported during a product
cycle exist in this code
Sean Parent , “A Possible Future of Software
Development”, Adobe 2007

38. Introducing SAM
- State-Action-Model -

39. ??
The SAM Pattern
View
Mode
l
??
016 xgen.io

40. The SAM Pattern
View
Mode
l
V = f(M) Counter = Counter + 1Counter = Counter + 1
var p_counter = counter + 1
counter = p_counter
var p_counter = counter + 1
counter.accept(p_counter)
var p_counter = counter + 1
counter.accept(p_counter).then(learn)
1 Proposers
2 Acceptor(s) 3 Learners
Dr. Leslie Lamport: TLA+
http://research.microsoft.com/en-us/um/people/lamport/pubs/state-machine.pdf
{
}

41. SAM is Unapologetically
Focused on Mutation
View
Model
Action
s
V = f(props)
State next-action(Model)
1 Proposers
2 Acceptor(s)
next-
action(Model)
3Learner(s)
016 xgen.io
dispatch(event)

42. View=State(Model.present(Action(event))).then(nap);
“SAM is simple, I [have] never seen a
concept such minimalist and
powerful, [in particular] in its
decoupling potential”
— Daniel
Neveux
next action

43. Unidirectional Data Flow /
Single State Tree
Create Proposal
Modify Data
State Representation
SAM Pattern
next-action
React/Redux Angular2 – Two Way Databinding

44. How do you write a Web
App with SAM?
<body>
…
<div id=“sam”></div>
…
<script src=“sam.js”></script>
<script type=“text/javascript”>
var a = { };
initSAM() ;
</script>
</body>
https://github.com/jdubray/sam-samples
View = State(
Model.present(
Action(event)
)
).then(nap);

45. view.innerHTML =
State(
Model.present(
Action(event)
)
).then(nap);
A simple
Blog Example
https://fish-trader.gomix.me/
<div id="representation"></div>

46. view.innerHTML =
State(
Model.present(
Action(event)
)
).then(nap);
A simple
Blog Example
https://fish-trader.gomix.me/
<div id="representation"></div>

47. view.innerHTML =
State(
Model.present(
Action(event)
)
).then(nap);
A simple
Blog Example
https://fish-trader.gomix.me/
<div id="representation"></div>

48. view.innerHTML =
State(
Model.present(
Action(event)
)
).then(nap);
A simple
Blog Example
https://fish-trader.gomix.me/
<div id="representation"></div>

49. Let’s look at some code
© Akveo 2016

50. Angular2
Component
Coupling the
business
logic to a
Web
Framework is
an anti-
pattern
events
Propertie
s

51. Angular2
Unidirectional Data
Flow
Single State Tree
Actions
events
Propertie
s
Actions
State
Model

52. SAM / Angular2
Action
s
Model
State

53. Conversational
Computing
https://www.infoq.com/news/2017/02/mindmeld-guide
Amazon Alexa,
Apple Siri,
Google Assistant,
Microsoft Cortana
“Since rule-based frameworks are not
intended to provide AI capabilities to
parse or classify incoming messages,
the developer must code all of the
necessary message processing and
interaction logic by hand. It is not
uncommon for even simple
applications to require hundreds of
rules to handle the different dialogue
states in a typical conversational
interface.”

54. By 2020 there will be 50 billion
Internet of Things (IoT) devices
Internet of Things

55. A new Application Architecture
- Services, APIs and Microservices -

56. SAM Isolates APIs
from the View
CUD
R
There is no need for
• an immutable model (Redux)
• declarative effects (Elm, ~Redux)
They create more problems than they solve
Create Proposal
Modify Data
State Representation
SAM Pattern
next-action

57. SAM + SAM
API API API
Consistency
APIs
Services
Microservices
Systems of Record
Services
Model
ActionsState
View
Model
Dispatche
r
State
View
Model
Actions
View
Activity
ActionAction

58. In Summary
• Programming model
• Centered on Mutation, not
immutability
• True Single State Tree, no
Sagas/Stateful components
• Focused on ”what’s allowed”,
not subscriptions
• View Components are 100%
decoupled from the application
business logic
• Functional UI/HTML (code
generation), not templates
• Architecture
• Can be implemented with
the framework of your
choice (React, Angular)
• Side-effects friendly
• Wiring agnostic
• Truly Isomorphic
• Action “Hang back” /
Generic Cancellations
• 3rd party Actions (OAuth)

59. References
• Computation and State Machines – Dr. Lamport
• Thinking for Programmers – Dr. Lamport