because VR
conservatively, that’s a ~10ms budget per frame
where is js at?
State (Domain Models) --> View (DOM / CSS) --> Screen
User (Actions) --> Update State
Lets start at the end
// OpenGL 1 fixed function pipeline, circa 1992
glColor3f(0.0f, 0.0f, 0.0f);
glBegin(GL_TRIANGLES);
glVertex3f( 0.0f, 1.0f, 0.0f);
glVertex3f(-1.0f,-1.0f, 0.0f);
glVertex3f( 1.0f,-1.0f, 0.0f);
glEnd();
// kind of reminds me of
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// this is called *immediate mode* graphics
// which means you basically throw away everything
// and redraw the whole frame
> Finished release [optimized] target(s) in 3339.87 secs
> Build Completed in 0:58:35
fml, I need new hardware
// yes, this kind of code:
elem.style.top = `${ 10 }px`;
elem.style.left = `${ 10 }px`;
Mozilla actually announced Quantum yesterday, to integrate Webrender into Firefox
s/computer software industry/js developers/
s/computer hardware industry/browser vendors/
http://staltz.com/nothing-new-in-react-and-flux-except-one-thing.html
“The Virtual DOM allows us to convert a mutable retained mode graphics API to an immutable functional immediate mode API.”
https://speakerdeck.com/vjeux/react-rally-animated-react-performance-toolbox
TLDR: resorts to direct dom manipulation
If I read the React-Native changelog right, they even moved Animated to native code
The Elm Architecture; Redux;
Other Immutable Languages / Architectures
You have to basically treat your frontend domain model like a relational database --> Normalize your model!
http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
// your state looks like this:
// ---
const initialState = {
contentById: {},
publisherById: {},
pageByUrl: {},
fontByUrl: {},
};
// ---
// and then: (ye, I know this is suboptimal)
// ---
// copy all the hashmaps so we can mutate them in-place
state = Object.assign({}, state, {
contentById: Object.assign({}, state.contentById),
publisherById: Object.assign({}, state.publisherById),
pageByUrl: Object.assign({}, state.pageByUrl),
fontByUrl: Object.assign({}, state.fontByUrl),
});
// ---
// and you have ugly code like this:
// ---
<Collection key={id} collection={item} entities={entities} />
// ---
Components "select" data they want inside `connect` (when using react-redux)
"select" sounds kind of like sql…
and you are more or less writing a sql join equivalent
depending on the implementation, you are also creating new objects, defeating the whole purpose of sCU
the JS ecosystem is changing rapidly,
causing fatigue *huehue*
very strong influence from the
purely functional programming camp
still unsolved problems around
performance and developer productivity (boilerplate)
remember:
JS has no zero cost abstractions
your users will feel every layer of abstraction you add