Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storing all state on the server side

Storing all state on the server side

In this presentation I suggest some ways on how state handling can be improved in very large and data-intensive JavaScript applications. I gave this presentation at mloc.js 2015 in Budapest, Hungary on 19th of June 2015.

If you think this presentation could be useful for some of your friends, could you please consider clicking the share button above. I feel that many of the ideas mentioned in the deck are heavily bubbling under the mainstream of the JavaScript scene. It's just better for everyone, when more and more people in the JavaScript community get to hear about alternative architectual solutions. It's really the mix of people and ideas, which together has the power to move this community of ours forward. Thanx.

Jouni Kaplas

June 20, 2015
Tweet

More Decks by Jouni Kaplas

Other Decks in Programming

Transcript

  1. LEAN SERVICE CREATION Application state BUSINESS DATA USER- GENERATED DATA

    CONFIGURATION DATA UI STATE DEVICE STATE DEVICE BROWSER USER ? @kaplas
  2. LEAN SERVICE CREATION Question 1: What if the amount of

    business data is just huge? BUSINESS DATA @kaplas
  3. LEAN SERVICE CREATION Question 2: What should we do for

    these other parts here? USER- GENERATED DATA CONFIGURATION DATA UI STATE DEVICE STATE DEVICE BROWSER USER ? @kaplas
  4. LEAN SERVICE CREATION @kaplas How devices talk to each other

    on a physical level is not interesting
  5. LEAN SERVICE CREATION @kaplas On a logical level though, those

    probably use a data bus for communication
  6. LEAN SERVICE CREATION Situation •  The amount of data is

    huge •  It comes in real-time •  It is very dynamic by nature @kaplas
  7. LEAN SERVICE CREATION What kind of web UI would be

    suitable for this type of system? @kaplas
  8. LEAN SERVICE CREATION Traditional data fetching …has quite a lot

    of abstraction layers CONTROLLERS ROUTES ORM SCHEMAS DB V C M V C M V C M M M M HTTP REST API DTO PROXY @kaplas
  9. LEAN SERVICE CREATION CONTROLLERS ROUTES ORM SCHEMAS DB V C

    M V C M V C M M M M HTTP REST API DTO PROXY @kaplas Traditional data fetching …may cache app state in many modules
  10. LEAN SERVICE CREATION So what could we do? CONTROLLERS ROUTES

    ORM SCHEMAS DB V C M V C M V C M M M M HTTP REST API DTO @kaplas
  11. LEAN SERVICE CREATION 1) Use a reactive data source CONTROLLERS

    ROUTES V C M V C M V C M M M M HTTP REST API DTO LOGIC LAYER DATA SOURCE (eg. a data bus) @kaplas
  12. LEAN SERVICE CREATION 2) Use global state CONTROLLERS ROUTES HTTP

    REST API DTO V C M V C V C LOGIC LAYER DATA SOURCE @kaplas
  13. LEAN SERVICE CREATION 3) Pushy backend connection CONTROLLERS ROUTES DTO

    V C M V C V C WS LOGIC LAYER DATA SOURCE @kaplas
  14. LEAN SERVICE CREATION 4) Use backend just as a data

    gateway DTO V C M V C V C WS SOCKET-2-DS ADAPTER LOGIC LAYER DATA SOURCE @kaplas
  15. The problem of addressing Photo “Mailboxes in ivy” by Ryan

    McFarland (www.zieak.com) - CC Attribution license @kaplas
  16. LEAN SERVICE CREATION Anything goes, really •  You just need

    to be able to identify a resource @kaplas
  17. LEAN SERVICE CREATION Adressing with namespaces may provide even more

    flexibility Namespace Open sandbox @kaplas https://github.com/kaplas/memory-game/blob/master/gulpfile.js
  18. LEAN SERVICE CREATION Web UI •  The amount of data

    is huge •  It comes in real-time •  It is very dynamic by nature ✓ ✓ ✓ BUSINESS DATA ✓ @kaplas ➡
  19. Photo “Third Beach - La Push, Washington” by NullSynapse –

    CC Attribution license The web is getting pushy, and it has taken us way too long to realize that @kaplas
  20. LEAN SERVICE CREATION Application state USER- GENERATED DATA CONFIGURATION DATA

    UI STATE DEVICE STATE DEVICE BROWSER USER ? @kaplas
  21. LEAN SERVICE CREATION Why can not we store these as

    well? USER- GENERATED DATA CONFIGURATION DATA UI STATE DEVICE STATE DEVICE BROWSER USER ? @kaplas
  22. LEAN SERVICE CREATION Live configuration of a system Big image

    from- http://johnpolacek.github.io/ Tablet image by Icon Works on flaticon.com ✓ ✓ ✓ @kaplas
  23. LEAN SERVICE CREATION Live configuration of a system Big image

    from- http://johnpolacek.github.io/ Tablet image by Icon Works on flaticon.com ✓ ✓ @kaplas
  24. LEAN SERVICE CREATION Live configuration of a system Big image

    from- http://johnpolacek.github.io/ Tablet image by Icon Works on flaticon.com ✓ @kaplas
  25. LEAN SERVICE CREATION Live configuration of a system Big image

    from- http://johnpolacek.github.io/ Tablet image by Icon Works on flaticon.com ✓ ✓ @kaplas
  26. LEAN SERVICE CREATION Inform about future changes Image from- http://johnpolacek.github.io/

    “other user is editing this field” @kaplas I am editing…
  27. UI events will cause (some) state that is outside of

    our global state pattern @kaplas
  28. LEAN SERVICE CREATION “At least we had a beautiful architecture…”

    @kaplas That’s my own dog, Riksu, by the way J
  29. LEAN SERVICE CREATION PROBLEM If UI events cause changes in

    the application state (like they usually should), we will get data roundtrips to the server. The app should be usable during those times as well. Internal state caused by UI events OUR STRATEGY Hybrid: Some UI style changes on how roundtripped data and user-generated data are displayed, so that those can not be mixed accidentally. User-generated state is stored as a small piece of temporary internal state inside the UI element in question. COMMON STRATEGIES Optimistic: Expect the roundtrip to succeed, fallback to previous state if it didn’t. This will cause internal state. Pessimistic: Do not expect anything, only update UI when the roundtrip has succeeded. @kaplas
  30. •  Security needs more attention •  Handling of aggregated data

    can be challenging •  Scalability / Load balancing is a bit unresolved problem •  There is no safety net of type checking •  Logic layer has to be somewhere Cons: Reality check @kaplas
  31. LEAN SERVICE CREATION Application state: Done! BUSINESS DATA USER- GENERATED

    DATA CONFIGURATION DATA UI STATE DEVICE STATE DEVICE BROWSER USER ? @kaplas
  32. LEAN SERVICE CREATION Here, take these with you Ie. What

    ideas of this talk could hopefully help you in your own projects @kaplas
  33. LEAN SERVICE CREATION Photo “The number 1” by Timothy Krause

    CC Attribution license Subscribe to your data @kaplas
  34. LEAN SERVICE CREATION Photo “me and the number two...” by

    kate hiscock CC Attribution license Use the global state pattern @kaplas
  35. LEAN SERVICE CREATION Use as lightweight abstractions as possible Photo

    “three” by Abulic Monkey CC Attribution license @kaplas
  36. LEAN SERVICE CREATION Photo “20120213_1042” by Marco Ghitti CC Attribution

    license Try to find new creative ways to store and use your data @kaplas
  37. LEAN SERVICE CREATION UI events will always be problematic Photo

    “day 5” by rosmary CC Attribution license @kaplas