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

State Design for Complex Web Application

State Design for Complex Web Application

An analysis of what makes for good state design for JavaScript applications


Ifeora Okechukwu

November 29, 2018


  1. Ifeora Okechukwu, Oparand @isocroft Abuja Application State Design for Complex

    Web Applications
  2. Front End Developer, Internet Addict Currently working on Fashion /

    E-learning Technologies © 2018 Google inc.
  3. Agenda 1. Introduction 2. What is State ? 3. Sources

    Of State 4. An Analogy of Resilience 5. State Generation Flow 6. Let’s Talk About the “History” 7. Transient (UI State) & Non-Transient (Data State) 8. State Machines/Graphs 9. Benefits of State Machines/Graphs 10.Impact of Poor State Design on Apps 11.Libraries that concur 12.Q/A
  4. Yey! We Found Flux… UI development became cumbersome/difficult in the

    last couple of years. That is because we pushed the state management to the browser. And managing state is what makes our job a challenge. Redux/Atika/MobX/Vuex/Radixx makes things easy only if we do it properly, Then, we will see that our application scales easily with no bugs. In this talk, we will see how to use the state machine concepts and decoupling concepts for redesigning state and hence it’s management short-comings. And we still need to rethink state design ?
  5. What is State ? In any given point in time,

    there is a different information stored in the memory of your web application that you can access via your variables, classes, data structures, etc. All the stored information, at a given instant in time, is called the application state. - Nikolay Stoitsev (Quora)
  6. Sources Of State 1. Cookie 2. Session Data 3. Persistence

    Data 4. UI updates 5. HTTP Headers 6. Local Storage
  7. An anology of resilience The Cassette Player We try to

    build web applications that are very strong and resilient to whatever the user throws at it. The goal is to eliminate bugs totally and handle exceptions well in a scalable way Location
  8. Event Computation Transition Chart Data Source Info The State Generation

    Flow View Updates
  9. Let’s Talk About “History”

  10. •jQuery (Pre-historic) •Backbone/Ember (Medieval) •React/Vue/Angular (New Age) •Svelte (Future Proof)

  11. “UI’s are graphs while the data that drives them are

    trees. UI’s need to have their behavior managed as state on it’s own” - David Khourshid @DavidKpiano
  12. Transient UI State & Non-Transient Data State Abuja

  13. None
  14. None
  15. { isLoading: false, items: [ ] }

  16. { items: [ ] } – Redux/Vuex { isLoading: false

    } – Component
  17. State Machines/ Graphs Abuja

  18. None
  19. State Transition Graph The idea of using state graphs is

    beneficial to setting up the big picture of thw web app we are developing Events. Guards & Transitions
  20. 3 basic reasons for bugs 1. Missing State Transition (Omitted

    Logic) 2. Unhandled Action / Event (Dead Transition) 3. Wrong State Transition (No Guards)
  21. None
  22. Benefits of State Machines/Graphs 1. They help to enforce declarative/state-driven

    rendering 2. They help you avoid RACE CONDTIONS 3. help to harmonize the flow of behavior instead of having them scattered everywhere
  23. Impact of Poor Web Application State Design

  24. 1. Global Data State is Sometime Unorganized 2. UI Components

    are 100% reliant on the (Redux/MobX/Veux/Radixx) store hence not reusable 3. Edge Cases are rarely handled 4. Poor Speed Performance of the Web App 5. Unpredictable/Unaccounted State Changes
  25. Libraries that concur Abuja 1. Atika - https://github.com/datorama/akita 2. Stent

    – https://github.com/davharvey/stent
  26. Ifeora Okechukwu, Oparand @isocroft Abuja Thank you!

  27. Q&A I’ll take your questions now... Abuja