The SAM pattern is a new Reactive, Functional Front-End pattern that aims at replacing MVC.

1. The SAM Pattern
J.J. DUBRAY
xgen.io
@metapgmr

2. xgen.io
• Web/Mobile/IoT/ChatBots
• Architecture Services
• Platform and tools API API
Systems of Record
API API
Services

3. If you could only remember one thing
State 1
State 2
ActionThis is an approximation

4. If you could remember another thing
Assignment
is not equivalent to
Mutation

5. © 2016 xgen.io
Modern GUIs have become just a Node in a
Dynamic Distributed System
• your friends,
• players
• your watch
• IoT sensors
• …

6. 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)© 2016 xgen.io

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

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

9. The problem lies in the coupling
between the View and the Model…
View Model
Model
View
Model
View
Source: Seth Davenport, ng2-redux, https://www.youtube.com/watch?v=s4xr2avwv3s&t=2489s

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

11. Introducing SAM
- State-Action-Model -

12. ??
The SAM Pattern
View
Model
??
© 2016 xgen.io

13. The SAM Pattern
View
Model
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
© 2016 xgen.io
Dr. Leslie Lamport: TLA+
http://research.microsoft.com/en-us/um/people/lamport/pubs/state-machine.pdf
{
}

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

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

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

17. Angular2
Component
Coupling the business
logic to a Web Framework
is an anti-pattern
events
Properties

18. Angular2
Unidirectional Data Flow
Single State Tree
Actions
events
Properties
Actions
State
Model

19. SAM / Angular2
Actions
Model
State

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

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

22. SAM + SAM
API API API
Consistency
APIs
Services
Microservices
Systems of Record
Services
Model
ActionsState
View
Model
DispatcherState
View
Model
Actions
View
Activity
ActionAction

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

24. Questions?
http://sam.js.org/
http://xgen.io
jdubray@xgen.io