Ifeora Okechukwu, Oparand @isocroft Abuja Application State Design for Complex Web Applications 

Front End Developer, Internet Addict Currently working on Fashion / E-learning Technologies © 2018 Google inc. 

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 

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 ? 

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) 

Sources Of State 1. Cookie 2. Session Data 3. Persistence Data 4. UI updates 5. HTTP Headers 6. Local Storage 

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 

Event Computation Transition Chart Data Source Info The State Generation Flow View Updates 

Let’s Talk About “History” 

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

“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 

Transient UI State & Non-Transient Data State Abuja 

No content

No content

{ isLoading: false, items: [ ] } 

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

State Machines/ Graphs Abuja 

No content

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 

3 basic reasons for bugs 1. Missing State Transition (Omitted Logic) 2. Unhandled Action / Event (Dead Transition) 3. Wrong State Transition (No Guards) 

No content

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 

Impact of Poor Web Application State Design 

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 

Libraries that concur Abuja 1. Atika - https://github.com/datorama/akita 2. Stent – https://github.com/davharvey/stent 

Ifeora Okechukwu, Oparand @isocroft Abuja Thank you! 

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