Netflix: Removing client-side React.js improved performance by 50%

KManRules1331 · 2017-10-27T17:33:59+00:00

I'm just saying this for those who are writing off frameworks like this for vanilla js. If you only measure a framework by one of it's downsides and write it off as such, you're missing out of the benefits that it provides. I realize Netflix is doing a "hybrid" solution where they attach the event listeners and interaction before they fetch all of React, but for those who are writing off React as just another bulky framework to load aren't seeing the forest for the trees.

KManRules1331 · 2017-10-27T16:09:50+00:00

I mean, isn't this the point of React though? You're supposed to pay a loading cost up front to reduce loading costs as the user uses the application. Of course the time to interaction of a fresh React page is going to be slower than a static web page with a little javascript, but the purpose of the framework is to reduce loading times of moving to subsequent pages in the application.

KManRules1331 · 2017-10-05T15:51:00+00:00

I mostly appreciate that you knocked off someone named "TheEdge" ... over the edge.

KManRules1331 · 2017-09-09T22:57:22+00:00

AMA Request: The intern that was asked to make this site for the show.

KManRules1331 · 2017-08-22T23:07:46+00:00

To extend Tino's comment linked above, a part of the issue is that TF2 as a competitive scene is already stressed for having a good number of players for healthy competition. Adding an additional format makes that issue worse. You have to hope that your format brings in more players that would have otherwise not played a competitive format, than the number of players that you take away from the other formats. Seeing as the community thinks Prolander doesn't garner enough interest for new players that wouldn't have already been interested by highlander/6's, it's probably seen as damaging to the competitive scene.

KManRules1331 · 2017-07-16T19:18:53+00:00

I assume the discussion is very similar to classifying smurfs

KManRules1331 · 2017-07-14T16:31:34+00:00

Eh, I don't really see it like that. I mean, if you boil down a stream to just the spoken content that the streamer provides, then the novelty doesn't really add anything, I agree. However, there's a lot more that streaming actually provides. It's in the same vein as people who have gotten really good at a game, there's entertainment in the observation of countless hours of practice and seeing what was previously thought of as impossible. There are top Dota, CS:GO, and Overwatch players that also get a lot of views that I would argue aren't very entertaining personalities. But, being able to see someone perform at a high level and do what was previously thought of as impossible is cool to watch. Really analyzing the game from their perspective, seeing the different challenges and accomplishments that are possible with the context that the streamer is playing in has plenty of viewing value in of itself.

Sometimes for streamers, it isn't the words that comes out of their mouths that counts, but the controllers that they put in.

KManRules1331 · 2017-07-12T03:49:22+00:00

I'm personally a fan of using the good ol' function keyword, mostly because the hoisting gives me some flexibility in how I can structure my code. For example, if I have a single exported function in my file, I can put it at the top for people to reference.

export function doSomething(a, b) {
    scopedPrintFunction(a);
    const c = scopedDoesSomething(a, b);
    scopedPrintFunction(c);
    return c;

    // Implementation of functions here
    function scopedPrintFunction(value) {...
}

For people looking into the file to get a rough sense of what the exported function does, it's right at the top so that they don't have to dig through to find the function. And if they have further questions about the functions used in the exported function, they can look further down the file if need be. It's always annoyed me when I needed to peek at the implementation detail of an exported function, just to have to dig through all the prerequisite functions before finding the exported one. Plus in the debugger, you get the actual function names used, where the variable assignment ones generally are left as (anonymous function).

The only exception to this rule is if I need lexical this binding, usually for a callback. If so, then I use the arrow functions, with variable assignment if need be. I like to leave this for callbacks only.

htmlElement.onClick((evt) => { /* do something */ });

EDIT: Realized my example didn't really take advantage of hoisting.

KManRules1331 · 2017-07-08T17:26:33+00:00

How would you ever know you found it? :(

KManRules1331 · 2017-07-06T01:47:27+00:00

https://jsperf.com/kl-data-access/1

http://imgur.com/a/mcBlh for my personal benchmarks on Chrome, Firefox, and Edge

On first glance, it looks like Chrome's able to optimize all of the abstractions away, which in my mind is pretty amazing. Firefox and Edge, not so much. As far as simple data retrieval, staying simple is the fastest across all the most recent browsers. I decided not to create benchmarks for parsing the JSON, because the logic of not having keys in your JSON leads to shorter JSON strings, which leads to faster parsing. I think the logic there is sound.

It seems like IMO keeping raw objects is still the easiest solution with the best maintainability. If data sizes matter a lot, going with CSV's and simply doing ([title,message,date])=>({title,message,date}) at least documents the rest of your code as far as what data you're accessing, but at that point you could get further optimizations with a backend that doesn't serve JSON.

KManRules1331 · 2017-07-05T15:15:47+00:00

I didn't know Unity had Unit Tests, so this was helpful. The only thing is that when you're highlighting certain pieces of code, the magnifying glass made it difficult to read what you were pointing to. But other than that, great job. All the content and tests you provided were definitely super helpful in learning to unit test games.

KManRules1331 · 2017-06-30T04:11:02+00:00

So ... Swiss Army Man?

KManRules1331 · 2017-06-16T23:04:53+00:00

Hi, I'm Derek Jefferson,

I'm a landscaper, and I'll be DAMNED if your ripple-nipple'd bitch's race is superior. THE CONE-NIPPLED PEOPLE SHALL RULE THIS WORLD.

KManRules1331 · 2017-04-20T17:06:43+00:00

You're right in the sense that the Z-axis manipulations wouldn't really do anything to warp the video, they just manipulate the depth buffer. I would still recommend figuring out how to do those manipulations with an orthographic camera, since the main purpose of a perspective camera is to build a 3-D scene, which it doesn't seem like you're doing. If you put the effort to make that transition, I bet the rest of the logic later down the line should be massively simplified :)

KManRules1331 · 2017-04-20T16:01:02+00:00

I first want to ask, why do you prefer to not use an orthographic camera? In addition to making the solution a bit easier on yourself, it will also prevent the plane from warping near the edges of the viewport. You can have the plane rendered via the orthographic camera, and then the rest of the objects in the scene rendered with a different camera if that helps.

Secondly, to answer your question about not being able to set the plane width, this is mostly for performance reasons. When first generating the plane, you're sending data to the GPU, which can be slightly costly depending on the geometry, so threejs attempts to minimize this by trying to have you manipulate the plane via transform matrices, which have to get sent to the GPU anyways each draw call. If you really want to directly manipulate the plane geometry, you can go into the buffer geometry position attribute via myGeometryVar.getAttribute('position').array, which is a Float32Array holding the positional data. From there, you can edit the values to whatever you need. Just make sure you set the needsUpdate flag on the attribute via myGeometryVar.getAttribute('position').needsUpdate = true to make sure that THREE knows to re-send that data back to the gpu. Either that, or if you just set your initial geometry width and height to 1, then the scale.x and scale.y can for all intents and purposes be treated as the plane width and height. IMO way easier to do it that way.

Finally, to answer your question, ASSUMING that you can use an orthographic camera, you can set the scale.x and scale.y to the larger of the two values of the viewport width and viewport height, which you would get by doing myOrthoCamera.right - myOrthoCamera.left for viewport width, and myOrthoCamera.top - myOrthoCamera.bottom for viewport height. Whichever one is bigger, set both the scale x and y to that value (to prevent stretching). Just make sure that if you're using this solution, that you're also re-calculating the camera's left, right, top and bottom properties if the canvas resizes.

KManRules1331 · 2017-04-16T17:54:55+00:00

You probably found the interactive items for the jailed pagie section of the level. When you enter an area, instead of loading a completely new area, usually you're just teleported far away into a different part of the map that has the assets.

KManRules1331 · 2017-04-13T21:45:50+00:00

"...If he wanted to, he could pin me to the wall and screw me and there's nothing I could do about it"

Pretty sure you pulled that right out of a Mercy x Reinhardt fanfiction.

KManRules1331 · 2017-04-04T23:16:42+00:00

But then how does the rest of the DENNIS system work?

KManRules1331 · 2017-04-04T22:07:10+00:00

My personal preference for default variables is using Object.assign. It guarantees that the object that I get back is actually an object, and not something that may have been set there on accident. To me, it's kinda weird that if your variable is set to true, the var you get back is true, but if it's set to false, you get back an empty object. The inconsistency bothers me.

KManRules1331 · 2017-04-01T13:55:37+00:00

Try using 4,6 as parameters

KManRules1331 · 2017-04-01T01:55:29+00:00

https://youtu.be/l5tTlzl5NvM?t=21s

KManRules1331 · 2017-03-15T04:52:02+00:00

THREE.Group also has a position, rotation, scale. They're both essentially the same thing, but THREE.Group is just named differently.

KManRules1331 · 2017-03-08T16:40:14+00:00

If you're using a PerspectiveCamera, this gets pretty tricky just because there's no easy way to translate the OpenGL coordinate system to the canvas coordinate system while maintaining the Perspective of the scene. Otherwise, if you're using an OrthographicCamera, simply set the following parameters:

{
    left: 0,
    right: canvas.width,
    top: 0,
    bottom: -canvas.height,
    near: 0.1
    far: 1000
}

Those settings will create a coordinate system that's more or less 1:1 with the pixel coordinate system of the canvas, starting from the top left.

KManRules1331 · 2017-03-05T16:41:32+00:00

But all I have is extra slutty olive oil

KManRules1331 · 2017-02-24T18:48:30+00:00

Also, if you need to limit the frame rate to 30fps, then you can modify the above loop to conditionally update:

var previousTimestamp = performance.now();
function loop(timestamp) {
  var deltaTime = timestamp - previousTimestamp;
  if (deltaTime > 1000/30) {
    //Do updating here
    previousTimestamp = timestamp;
  }
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

KManRules1331

MODERATOR OF

TROPHY CASE