Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Forward JS 2017 | SF | Write applications as State Machines

84 views

Published on

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.


Published in: Technology
  • Be the first to comment

  • Be the first to like this

Forward JS 2017 | SF | Write applications as State Machines

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

×