際際滷

際際滷Share a Scribd company logo

Forward JS 2017 | SF | Write applications as State Machines

Pasindu Perera
Pasindu Perera

Learnings from developing a multiplayer game logic in elm as a finite state machine and exporting it as a npm module that is being used in 1. In mobile(react-native) client to play the game offline and to do optimistic updates when playing online. 2. In server(node) for scoring 3. In web client (react) as a desktop client.

1 of 39
Download to read offline
Use Elm and reuse it everywhere
@udnisap
則 The Problem 則 Model Applications as state machines 則 Extract application logic as an engine 則 Use ELM to code the application logic
則 Turn based real time card game 則 Offline 則 Online multiplayer 則 Multiple Clients 則 Android/IOS 則 Web 則 Reuse Logic 則 Plan for change
UI Business Logic /Engine Persistence
Cloud Persistence Business Logic IOS Business Logic Persistence Android Business Logic Persistence Web Business Logic Persistence Bot Business Logic Persistence
Forward JS 2017 | SF | Write applications as State Machines
則 No Side effects 則 No Mutations (Observable) 則 Returns the same result 則 Explicit Dependencies 則 Clean 則 Understandable 則 Testable 則 Can be easily portable to any framework
則 Takes Function as an arguments and data structure 則 Operates on the data structure 則 Examples 則 Map 則 Reduce
Forward JS 2017 | SF | Write applications as State Machines
則 Takes a function 則 Takes an initial value 則 Run the function on the list for each elements 則 Return the final value
Forward JS 2017 | SF | Write applications as State Machines
ITS NOT GOING TO WORK
則 Caller needs to 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
Can we actually write the application with functions?
State - todo : [] // list of todos - filter :all // current active filter Actions as effects - addTodo - ChangeFilter - MarkTodo
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
Current State Action Engine Next State Initial State Action1 Action2 Action3
Action1 Action2 Action3 Initial State State 1 State 2 Engine
Action1 Action2 Action3 Initial State State 1 State 2 Engine
Engine Initial State Action1 Action2 Action3
則 A JS module 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.
則 Next state can 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
ServerClient UI Engine Engine
A delightful language for reliable webapps. Generate JavaScript with great performance and no runtime exceptions.
則 Functional 則 Immutable 則 Pure 則 Statically Typed 則 Performance 則 Javascript Interop 則 NO SUPPRISES NO RUNTIME EXCEPTIONS 則 Exceptional Compiler support for errors
則 Mostly used a view layer 則 UI Rendering performant than React 則 But it is best suited with the logic
則 Write an Business logic engine in Elm 則 Provide interface to Javascript to be used in other applications 則 Export it as a NPM module
JS Wrapper initialize(state) fireAction(action) subscribe(function(state){ //update }) Incoming Port FireAction getState Outgoing Port onError OnSuccess Encoders/ Decoders Elm Application
則 Statically typed 則 Immutable 則 No NULL values 則 No Undefined
則 Card can only be of the given types 則 Its not like string
則 Parameterized Types
則 Convert ELM to JSON 則 Throws errors at the gate 則 Can combine encoders
Convert JSON to elm objects 則 Throws errors at the gate 則 Can combine
則 Elm compiles to ES5 則 Import as a normal module 則 Export with the wrapper
則 Structure application as 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
則 Write the engine/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
Forward JS 2017 | SF | Write applications as State Machines
Forward JS 2017 | SF | Write applications as State Machines

More Related Content

Forward JS 2017 | SF | Write applications as State Machines

  • 1. Use Elm and reuse it everywhere
  • 3. 則 The Problem 則 Model Applications as state machines 則 Extract application logic as an engine 則 Use ELM to code the application logic
  • 4. 則 Turn based real time card game 則 Offline 則 Online multiplayer 則 Multiple Clients 則 Android/IOS 則 Web 則 Reuse Logic 則 Plan for change
  • 6. Cloud Persistence Business Logic IOS Business Logic Persistence Android Business Logic Persistence Web Business Logic Persistence Bot Business Logic Persistence
  • 8. 則 No Side effects 則 No Mutations (Observable) 則 Returns the same result 則 Explicit Dependencies 則 Clean 則 Understandable 則 Testable 則 Can be easily portable to any framework
  • 9. 則 Takes Function as an arguments and data structure 則 Operates on the data structure 則 Examples 則 Map 則 Reduce
  • 11. 則 Takes a function 則 Takes an initial value 則 Run the function on the list for each elements 則 Return the final value
  • 13. ITS NOT GOING TO WORK
  • 14. 則 Caller needs to 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 actually write the application with functions?
  • 16. State - todo : [] // list of todos - filter :all // current active filter Actions as effects - addTodo - ChangeFilter - MarkTodo
  • 17. 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
  • 22. 則 A JS module 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 state can 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
  • 25. A delightful language for 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 used a view layer 則 UI Rendering performant than React 則 But it is best suited with the logic
  • 28. 則 Write an Business 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 can only be of the given types 則 Its not like string
  • 33. 則 Convert ELM to JSON 則 Throws errors at the gate 則 Can combine encoders
  • 34. Convert JSON to elm objects 則 Throws errors at the gate 則 Can combine
  • 35. 則 Elm compiles to ES5 則 Import as a normal module 則 Export with the wrapper
  • 36. 則 Structure application as 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 the engine/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