Download to read offline
![State
- todo : [] // list of todos
- filter :‘all’ // current active filter
Actions as effects
- addTodo
- ChangeFilter
- MarkTodo](https://image.slidesharecdn.com/forwardjs-171019063044/85/Forward-JS-2017-SF-Write-applications-as-State-Machines-16-320.jpg)
![todos: [
{
name: ‘learn js’,
status: ‘todo’
}],
filter: ‘all’
todos: [],
filter: ‘all’
NewTodo
‘learn js’
todos: [
{
name: ‘learn js’,
status: ‘complete’
}],
filter: ‘all’
ChangeFilter
‘todo’
todos: [
{
name: ‘learn js’,
status: ‘todo’
}],
filter: ‘todo’
todos: [
{
name: ‘learn js’,
status: ‘complete’
}],
filter: ‘todo’
MarkTodo
‘learn js’
‘complete’
ChangeFilter
‘todo’
MarkTodo
‘learn js’
‘complete’](https://image.slidesharecdn.com/forwardjs-171019063044/85/Forward-JS-2017-SF-Write-applications-as-State-Machines-17-320.jpg)
![State
- todo : [] // list of todos
- filter :‘all’ // current active filter
Actions as effects
- addTodo
- ChangeFilter
- MarkTodo](https://image.slidesharecdn.com/forwardjs-171019063044/75/Forward-JS-2017-SF-Write-applications-as-State-Machines-16-2048.jpg)
![todos: [
{
name: ‘learn js’,
status: ‘todo’
}],
filter: ‘all’
todos: [],
filter: ‘all’
NewTodo
‘learn js’
todos: [
{
name: ‘learn js’,
status: ‘complete’
}],
filter: ‘all’
ChangeFilter
‘todo’
todos: [
{
name: ‘learn js’,
status: ‘todo’
}],
filter: ‘todo’
todos: [
{
name: ‘learn js’,
status: ‘complete’
}],
filter: ‘todo’
MarkTodo
‘learn js’
‘complete’
ChangeFilter
‘todo’
MarkTodo
‘learn js’
‘complete’](https://image.slidesharecdn.com/forwardjs-171019063044/75/Forward-JS-2017-SF-Write-applications-as-State-Machines-17-2048.jpg)
Uploaded byPasindu Perera
Forward JS 2017 | SF | Write applications as State Machines
The document discusses using Elm to build a turn-based real-time card game with application logic modeled as state machines, emphasizing reusability and portability across platforms like Android, iOS, and web. It highlights the importance of having pure functions for business logic that can operate in offline and online settings without side effects. The document also outlines the need for a JavaScript module to manage application states and the use of encoders and decoders for data conversion.
More Related Content
Similar to Forward JS 2017 | SF | Write applications as State Machines
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Forward JS 2017 | SF | Write applications as State Machines
- 1. Use Elm andreuse it everywhere
- 2.
- 3. § The Problem §Model Applications as state machines § Extract application logic as an engine § Use ELM to code the application logic
- 4. § Turn basedreal time card game § Offline § Online multiplayer § Multiple Clients § Android/IOS § Web § Reuse Logic § Plan for change
- 5.
- 6. Cloud Persistence Business Logic IOS BusinessLogic Persistence Android Business Logic Persistence Web Business Logic Persistence Bot Business Logic Persistence
- 8. § No Sideeffects § No Mutations (Observable) § Returns the same result § Explicit Dependencies § Clean § Understandable § Testable § Can be easily portable to any framework
- 9. § Takes Functionas an arguments and data structure § Operates on the data structure § Examples § Map § Reduce
- 11. § Takes afunction § Takes an initial value § Run the function on the list for each elements § Return the final value
- 13. ITS NOT GOINGTO WORK
- 14. § Caller needsto provide everything for the method § Dependencies § Relevant Data structures § Callee ask everything it needs from the caller § We need a wrapper around these pure functions that encapsulate STATE
- 15. Can we actuallywrite the application with functions?
- 16. State - todo :[] // list of todos - filter :‘all’ // current active filter Actions as effects - addTodo - ChangeFilter - MarkTodo
- 17. todos: [ { name: ‘learnjs’, status: ‘todo’ }], filter: ‘all’ todos: [], filter: ‘all’ NewTodo ‘learn js’ todos: [ { name: ‘learn js’, status: ‘complete’ }], filter: ‘all’ ChangeFilter ‘todo’ todos: [ { name: ‘learn js’, status: ‘todo’ }], filter: ‘todo’ todos: [ { name: ‘learn js’, status: ‘complete’ }], filter: ‘todo’ MarkTodo ‘learn js’ ‘complete’ ChangeFilter ‘todo’ MarkTodo ‘learn js’ ‘complete’
- 18.
- 19. Action1 Action2 Action3 Initial State State1 State 2 Engine
- 20. Action1 Action2 Action3 Initial State State1 State 2 Engine
- 21.
- 22. § A JSmodule that provides an interface to compute states based on actions § All your business/core logic is in that transition function § It does not depends on any framework § All those are pure functions.
- 23. § Next statecan be calculated just by passing the current state with the action § It can be done on the server / client § All client are self sufficient to compute the next state § Works offline
- 24.
- 25. A delightful languagefor reliable webapps. Generate JavaScript with great performance and no runtime exceptions.
- 26. § Functional § Immutable §Pure § Statically Typed § Performance § Javascript Interop § NO SUPPRISES à NO RUNTIME EXCEPTIONS § Exceptional Compiler support for errors
- 27. § Mostly useda view layer § UI Rendering performant than React § But it is best suited with the logic
- 28. § Write anBusiness logic engine in Elm § Provide interface to Javascript to be used in other applications § Export it as a NPM module
- 29. JS Wrapper • initialize(state) •fireAction(action) • subscribe(function(state){ //update }) • Incoming Port FireAction getState Outgoing Port onError OnSuccess Encoders/ Decoders Elm Application
- 30. § Statically typed §Immutable § No NULL values § No Undefined
- 31. § Card canonly be of the given types § Its not like string
- 32.
- 33. § Convert ELMto JSON § Throws errors at the gate § Can combine encoders
- 34. Convert JSON toelm objects § Throws errors at the gate § Can combine
- 35. § Elm compilesto ES5 § Import as a normal module § Export with the wrapper
- 36. § Structure applicationas a state machine § Modularize it to a single package § Hydrate and De-hydrate the engine when needed § To run the app offline § To do optimistic updates
- 37. § Write theengine/core logic in Elm § Compile to JS and export as a module. § Use encoders and decoders to convert messages and state though ports § Make Impossible states impossible https://www.youtube.com/watch?v=IcgmSRJHu_8 § Use Effects as Data https://www.youtube.com/watch?v=6EdXaWfoslc