an introduction to the sam pattern
TRANSCRIPT
![Page 1: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/1.jpg)
The SAM Pattern
J.J. DUBRAYxgen.io
@metapgmr
![Page 2: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/2.jpg)
xgen.io • Web/Mobile/IoT/ChatBots• Architecture Services• Platform and tools
![Page 3: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/3.jpg)
If you could only remember one thing
State 1
State 2
ActionThis is an approximation
![Page 4: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/4.jpg)
If you could remember another thing
Assignment is not equivalent to
Mutation
![Page 5: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/5.jpg)
© 2016 xgen.io
Modern GUIs have become just a Node in a Dynamic Distributed System• your friends, • players • your watch• IoT sensors• …
![Page 6: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/6.jpg)
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
![Page 7: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/7.jpg)
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 …
![Page 8: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/8.jpg)
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
![Page 9: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/9.jpg)
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
![Page 10: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/10.jpg)
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
![Page 11: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/11.jpg)
Introducing SAM
- State-Action-Model -
![Page 12: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/12.jpg)
??
The SAM Pattern
View
Model
??
© 2016 xgen.io
![Page 13: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/13.jpg)
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
{
}
![Page 14: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/14.jpg)
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)
![Page 15: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/15.jpg)
Unidirectional Data Flow / Single State Tree
Create Proposal
Modify Data
State Representation
SAM Pattern
next-action
React/Redux Angular2 – Two Way Databinding
![Page 17: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/17.jpg)
Angular2 Component
Coupling the business logic to a Web Framework is an anti-pattern
eventsProperties
![Page 18: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/18.jpg)
Angular2 Unidirectional Data Flow Single State Tree
Actions
events
Properties
Actions
State
Model
![Page 19: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/19.jpg)
SAM / Angular2
Actions
Model
State
![Page 20: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/20.jpg)
A new Application Architecture
- Services, APIs and Microservices -
![Page 21: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/21.jpg)
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
![Page 22: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/22.jpg)
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
![Page 23: An Introduction to the SAM Pattern](https://reader036.vdocuments.us/reader036/viewer/2022070514/587cedd91a28ab564b8b5ad9/html5/thumbnails/23.jpg)
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)