Norm data web apps Normalizing data in web applications
•Download as PPTX, PDF•
0 likes•682 views
The document discusses normalizing data in web applications. Normalization is a technique used in databases to reduce redundancy and dependency of data by organizing tables. While building a web app, normalization can also be applied to state management libraries to cache and optimize frequently updated nested or redundant data, as seen in applications like Gmail, Google Drive, and Facebook. The document recommends using normalization libraries like Normalizr and Redux-ORM when data meets certain criteria and emphasizes performance benefits.
Recommended
Recommended
More Related Content
What's hot
What's hot (9)
Similar to Norm data web apps Normalizing data in web applications
Similar to Norm data web apps Normalizing data in web applications (20)
More from Unfold UI
Recently uploaded
Recently uploaded (20)
Norm data web apps Normalizing data in web applications
- 1. 1
- 2. Normalizing data in web applications By Swapneel Desai
- 3. Normalization is a database design technique which organizes tables in a manner that reduces redundancy and dependency of data.
- 4. Alright. But what is this got to do while building a web app?
- 5. The Era of SPAs
- 6. Most popular state management libraries/frameworks
- 8. Most popular state management libraries/frameworks Vuex Redux Store NgRx/Store
- 9. SINGLE STATE TREE State View View View View View View View Modify Data
- 11. What if your data is ● Cached ● Redundant ● Nested ● Frequently updated
- 12. Gmail
- 13. State tree of a Gmail inbox
- 14. State tree of a Gmail inbox
- 15. Google Drive
- 16. Facebook wall
- 17. Facebook wall
- 18. Demo Time
- 19. Normalization libraries ● Normalizr ● Redux-ORM
- 20. Normalize if your data is ● Cached ● Redundant ● Nested ● Frequently updated
- 22. Questions?
- 23. THANK YOU Swapneel Desai UI Developer, ThoughtWorks swapneel.desai@thoughtworks.com github.com/swapneeldesai @5wapneel
Editor's Notes
- This is the official wikipedia definition of Normalization of a database. So you can update your database efficiently and only once per transaction.
- This is the official wikipedia definition of Normalization of a database. So you can update your database efficiently and only once per transaction.
- The trend started to use Single page applications. SPA was hit for 2 primary reasons. It provided better experience to the end user Less transactions between a client and a server. So less bandwidth This enabled the application state to live longer in memory To optimize it more, people started to cache the data in memory to reduce bandwidth consumption and increase user experience. And never than before more and more state is stored in memory and cached Now caching and real time updates is a good thing, but it also came with a cost of new challenges But that also created a problem to keep the existing data updated.
- There are supporting frameworks which go well with this approach and concept to safely store and manage cached data in memory. Some frameworks use publish subscribe model, some rely on referential changes to the state. Some use a reactive approach. Single state tree.
- This is where the concept of Single state tree came up.
- There are supporting frameworks which go well with this approach and concept to safely store and manage cached data in memory. Some frameworks use publish subscribe model, some rely on referential changes to the state. Some use a reactive approach. Single state tree.
- Now, one could say that essentially maintaining a single state tree is like maintaining a database. When maintaining a database, the first thing you take care of is data duplication and redundancy You make sure that, data is stored efficiently without duplication, but its relationship remains intact
- Let’s take a look at some practical examples of web applications which are long lived, real time, can have redundant and nested data. Try to imagine the state tree structure stored for Gmail. Right of the bat. It is an array of mail objects. Each mail object has its own mail thread. Now to provide better user experience, all of the data is cached temporarily and only the delta from the server is updated and shown to you. Gradual buildup of cached data.
- Right of the bat This is how a classic gmail state tree would look like. Let’s try to see what challenges we might have to face in this kind of data, whenever there is a real time update from the server
- What I have done here is defined a relationship between mails and their categories. Keeping the order and the mapping intact. So, on the UI layer to render mails in their respective list, you now get array of mail ids instead of actual mail. And each mail component now can get its own data from the normalized mail object.
- This is where the concept of Single state tree came up.