State Design for Complex Web Application

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

Transcript

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
15. { isLoading: false, items: [ ] }
16. { items: [ ] } – Redux/Vuex { isLoading: false } – Component
17. State Machines/ Graphs Abuja
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)
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