Paul Lewis

This smells like a shill piece by a Google developer advocate [1] with a horse in the race [2]. The key benefit of React is an extremely low cognitive load. There are only three simple concepts to grok (props, state and lifecycle) to get productive. The code is very easy to reason about (components are essentially pure functions of props and state) and debugging is much simpler than with vanilla JS or jQuery on a project of any meaningful size. With respect to performance, React shines when it comes to DOM mutations (e.g. removing a div from DOM, creating a new div, inserting new div into the DOM) which is what you generally encounter with the real-world load. Here is a demo illustrating such load [3]. Benchmark offered by OP is amazingly contrived (actually it feels designed to show React in a bad light and lack of full source code is very telling). I struggle to think of a real-world scenario of append-only page with 1000+ images in the DOM, there is simply no valid reason to do that. React in turn makes it really easy and fast to implement infinite scrolling (similar to UITableView) and there are a couple of good open source components that address that. [1] See the bottom of https://aerotwist.com/ [2] https://aerotwist.com/blog/polymer-for-the-performance-obsessed/ [3] https://www.youtube.com/watch?v=1OeXsL5mr4g

I tend to learn best by example, so I learnt from; https://stemkoski.github.io/Three.js/ http://learningthreejs.com/ https://aerotwist.com/tutorials/getting-started-with-three-js/ There are a few books about WebGL but the tech moves so fast they're largely out of date already. There's a tutorial series on Youtube too if that's your thing - https://www.youtube.com/watch?v=9fg93FzfamU&list=PLOGomoq5sDLutXOH…

> There are already many steps taken to improve DOM performance over these years. However, DOM is designed for documents. The performance can never be good enough when it is abused for non-document usage. JavaScript was originally designed for simple tweaks, but we've significantly expanded and improved the language over the years to adjust it for what it's used for *today*. I don't see why DOM is special. Sure it was designed to handle small, unchanging documents, but it's used for much more now, just the same as JavaScript. Also it's worth noting we're talking about Google Docs here, so it looks like DOM fails even at its intended use-case (I'm saying this *mostly* jokingly). > Because other browser engines are unlikely to adopt these APIs just so that Google Docs can have better performance. Not to mention that these new APIs will take years to be present in every user's devices. We wouldn't have fetch, canvas, async/await, PWAs, websockets, etc. if those things had to be available immediately and/or be guaranteed to be adopted. I'd rather it take years to get improvements, but eventually have them, than not doing anything and still be talking about how bad X, Y, or Z is 10 more years from now. I'll take FLIP animations as a specific example. If I want to have a box animate from one part of the page to another (where it's position in the DOM hierarchy changes), we're having to do all kinds of crazy gymnastics around when you read the DOM, when you write to it, how do…

Yes I've been "doing my research." I've done everything but write an entire app in React, but I only have so much time. I don't see Angular great either, for what it's worth, so please don't think that I'm holding Angular up as a "better" solution. Both are heavy in the wrong ways. I got roped into using Angular because of its popularity, but I'm actively looking for a more solid and optimized replacement. React should be exciting to me as an option, but the more I read about it, the more wrong it feels. I just listened to a couple of the React creators on a podcast, for instance, and what they were saying about cross-platform development in the podcast is just demonstrably wrong. Source: I've been writing cross-platform apps for 20 years (mobile for the last 8 years or so). As for Angular 2.0: I'm reserving judgment on that until it stabilizes, though it looks better. I'm personally at least partly on the fence about whether the HTML template Really Should Be Separate, to be honest. My first exposure to Polymer was at 0.5, and the way that Polymer did things seemed profoundly wrong as well. I haven't tried again with Polymer 1.0, but I feel like using Polymer and React with all of their standard idioms will make an app less flexible rather than more. And React performance on mobile simply isn't good enough for complex apps [1]; for sufficiently simple apps, why should I even care what framework I use? Even back when Zuckerberg was claiming that HTML5 apps couldn't…

A lot of people are complaining about putting this into CSS, but I think that people are forgetting that using null transform hacks[0] is already the status quo for making animated elements more performant. What this property does is lets us continue doing the same thing, but in a way that the intent is clear ("I'm using this property to make the animation on this element more performant" vs. "I want to add a transform that does nothing"). Furthermore, it lets the browser decide if it wants to add any optimization, and it can decide which sort of optimization is best. While it would be nice if we didn't have to do this hinting at all, the fact of the matter is that it's hard for the browser to predict what will happen on the page in the future, and we're already having to do this (just in the cryptic null transform way), so it's nice that the web platform is letting us do it in a standardized way that communicates our intent clearly. [0]: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

See also "Inside Look At Modern Web Browser" series: https://developers.google.com/web/updates/2018/09/inside-browser-part1 And "Anatomy Of A Frame": https://aerotwist.com/blog/the-anatomy-of-a-frame/ Also "Inside A Super Fast CSS Engine: Quantum CSS (AKA Stylo)": https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quant… If you dig around chromium.org you can find lots of details about Chromium's guts, too.

Or code it is as a vertex-shader to run on the GPU. https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/

Related [and linked] blog post: https://aerotwist.com/blog/css-triggers/

Until you hit something the framework wasn't design to do (which happens 100% of the time in my experience). Now you're working for the framework instead of it working for you. This guy said it better: “Frameworks invert control. They control the lifecycle of the app, and give you entry points where your code runs. You’re still responsible for the final code, but you’re not in control.” https://aerotwist.com/blog/the-cost-of-frameworks/

One of the primary selling points of React is better performance of the virtual DOM, which apparently has no prove in benchmarks [1]. [1] https://aerotwist.com/blog/react-plus-performance-equals-what/

here's a write up of the methodology used to compile the list. http://aerotwist.com/blog/css-triggers/

Currently to make it work you have to run it locally after downloading from github: https://github.com/maroslaw/rainyday.js In Firefox it runs fine at the beginning but then the fps decreases (running in 1920x1200), in Chrome it's "better" because it seems to use both CPU cores fully on a dual core while Firefox uses only one. Anyways it should use the GPU more (using WebGL) and not so much the CPUs, but i understand it's one of the developer's "first contact with JavaScript" and using shaders would be a little harder for him but here are some introductions: http://www.html5rocks.com/en/tutorials/webgl/shaders/ http://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/

There are more WebGL and other experiments on the same site: http://aerotwist.com/lab/