I set out to see how far the web can go toward feeling native. Here’s what I found while building a PWA demo that might just make a full rewrite unnecessary.
1) I thought of giving an easier to read example. I just moved the example to react, so the snippets actually match exactly what's going on in the background.
2) It is true! Though, using shadows on the optimized code doesn't slow it down. I added more toggles to test same effects on transform and top/left implementations.
3) I think it's still interesting to start with some thought and then observe that in practice things are different really. In fact, thanks for all the feedback, as it made me go back and do more investigation.
If you don't mind you can give the article a second look now :)
Thanks for the input! Indeed, the reflows were incredibly fast because I was using position: absolute, which meant the squares were not affecting anything else in the dom, but just their position (so cheap operation). I will add a note on the article on that... also I am improving the 'bad' example so the shuffle button triggers reflow in a significant way.
How do we even see anything on a browser?
How do pixels turn into shapes, color, and movement?
Every time we scroll, hover, or trigger an animation, the browser goes through a whole routine. It calculates styles, figures out layout, paints pixels, and puts everything together on screen. All of that happens in just a few milliseconds.
It’s kind of wild how much is happening behind what feels instant. And the way we write code can make that process either smooth and fluid or heavy and janky.
I wrote an article that walks through this step by step, with a small demo showing exactly how these browser processes work and how a few CSS choices can make a big difference.
Some thoughts I had, after reading too many times how devs go against x or y framework and how they would build things more simply with just html and javascript.. delusional at best
The nice touch is that you can set a maxWidth for the swiping to kick in, giving the app a very native feel on mobile devices.
Give it a go and let me know what you think!