State management and tooling
State management
Data flow
- Traditional MVC (server side)
- MV* (as introduced by JS frameworks)
- One way data flow (flux et al)
Traditional flow
-
You open a url (www.example.com)
-
A request is sent to the server
-
The server reads the request and based on the url it chooses what middleware to run
-
The middleware sends a request for some state in the database, or requests a change in the database
-
When the database responds the controller produces the HTML view using a template, passing in any state from the database
-
The browser gets the response and renders the HTML
Application State
In the traditional MVC state was solely contained in the database and the process to access it was pretty straightforward.
Your view has to make a request to get or change any application state. The controller will always control this process of getting or changing application state. The model is the only place you have application state.
We moved it to the FE
- The View now has access to the model
- The Model is not a single storage
- Application state is stored in the view
Traditional MVC
Flux
Flux (details)
Redux
The 3 principles
- Single source of truth
- State is read-only
- Changes are made with pure functions
Single source of truth
State is read-only
The only way to mutate the state is to emit an action, an object describing what happened.
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
Parts
- Actions
- Reducers
- Store
Actions
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
Reducer
The reducer is a pure function that takes the previous state and an action, and returns the next state.
It’s called a reducer because it’s the type of function you would pass toArray.prototype.reduce(reducer, ?initialValue). It’s very important that the reducer stays pure.
A reducer shouldn't...
- Mutate its arguments
- Perform side effects
- Call non pure functions
Store
- Holds application state;
- Allows access to state via getState();
- Allows state to be updated via dispatch(action);
- Registers listeners via subscribe(listener);
- Handles unregistering of listeners via the function returned by subscribe(listener).
Debugging your JS
Memory Leak
"A memory leak is a gradual loss of available computer memory. It occurs when a program repeatedly fails to return memory it has obtained for temporary use."
Memory Lifecycle
- Allocate the memory you need
- Use the allocated memory (read, write)
- Release the allocated memory when it is not needed anymore
In JS an object holds memory when
- Has contents
- Holds a reference to another object
Garbage Collection
References
The main notion garbage collection algorithms rely on is the notion of reference. Within the context of memory management, an object is said to reference another object if the former has an access to the latter (either implicitly or explicitly).
GC algorithms
Reference-counting garbage collection
An object is considered garbage collectable if there is zero reference pointing at this object.
var o = {
a: {
b:2
}
};
// 2 objects are created. One is referenced by the other as one of its property.
// The other is referenced by virtue of being assigned to the 'o' variable.
// Obviously, none can be garbage-collected
var o2 = o; // the 'o2' variable is the second thing that
// has a reference to the object
o = 1; // now, the object that was originally in 'o' has a unique reference
// embodied by the 'o2' variable
var oa = o2.a; // reference to 'a' property of the object.
// This object has now 2 references: one as a property,
// the other as the 'oa' variable
o2 = "yo"; // The object that was originally in 'o' has now zero
// references to it. It can be garbage-collected.
// However what was its 'a' property is still referenced by
// the 'oa' variable, so it cannot be freed
oa = null; // what was the 'a' property of the object originally in o
// has zero references to it. It can be garbage collected.function f(){
var o = {};
var o2 = {};
o.a = o2; // o references o2
o2.a = o; // o2 references o
return "azerty";
}
f();Mark-and-sweep algorithm
This algorithm assumes the knowledge of a set of objects called roots (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc.
Mark-and-sweep algorithm (cont)
Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.
Chrome dev tools
to the rescue
Memory Growth
Leaking DOM nodes
Forced sync layouts
Scattered objs
Comparing snapshots
Memory contents
DOM Leaks (adv)
State management and tooling
By Carlos Vega
