Embed Size (px)
Citation preview
The SAM Pattern
J.J. DUBRAYxgen.io
@metapgmr
xgen.io • Web/Mobile/IoT/ChatBots• Architecture Services• Platform and tools
If you could only remember one thing
State 1
State 2
ActionThis is an approximation
If you could remember another thing
Assignment is not equivalent to
Mutation
© 2016 xgen.io
Modern GUIs have become just a Node in a Dynamic Distributed System• your friends, • players • your watch• IoT sensors• …
Events and CallbacksComposabilityEncapsulationSubscriptionsSeparation of ConcernData Consistency
from
to
Maintainability…
Ingo Mayer et al (https://infoscience.epfl.ch/record/176887/files/DeprecatingObservers2012.pdf)© 2016 xgen.io
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 …
Functional Reactive Programming: Elm/Redux• Immutable data• Observables• Pure functions• Static typing• Unidirectional data flow
Source: http://www.codemag.com/article/1601071http://guide.elm-lang.org/architecture/user_input/buttons.html
The problem lies in the coupling between the View and the Model…
View Model
ModelView
ModelView
Source: Seth Davenport, ng2-redux, https://www.youtube.com/watch?v=s4xr2avwv3s&t=2489s
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
Introducing SAM
- State-Action-Model -
??
The SAM Pattern
View
Model
??
© 2016 xgen.io
The SAM Pattern
View
Model
V = f(M) Counter = Counter + 1Counter = Counter + 1var 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.ioDr. Leslie Lamport: TLA+http://research.microsoft.com/en-us/um/people/lamport/pubs/state-machine.pdf
{
}
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)
Unidirectional Data Flow / Single State Tree
Create Proposal
Modify Data
State Representation
SAM Pattern
next-action
React/Redux Angular2 – Two Way Databinding
Angular2 Component
Coupling the business logic to a Web Framework is an anti-pattern
eventsProperties
Angular2 Unidirectional Data Flow Single State Tree
Actions
events
Properties
Actions
State
Model
SAM / Angular2
Actions
Model
State
A new Application Architecture
- Services, APIs and Microservices -
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
SAM + SAM
API API APICo
nsist
ency
APIs
Services
Microservices
Systems of Record
Services
Model
ActionsState
View
Model
DispatcherState
View
Model
Actions
View
Activ
ityActionAction
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)
