2048 animated12/25/2023 It looks cleaner, but in my experience, splitting those eventually becomes burdensome. Looks like Vue took the put-it-all-together componentization cue from React but decided to split by language anyway. Looks a bit like JSX or HTML, but template props are prefixed with a colon. The main App.vue file though… I'm not used to reading that, so I can't really explain the code. Evan used transform-vue-jsx to enable JSX inside Vue. You can still recognize the core Pythagoras component. I'd show you the diff on Github, but it won't let me do that. Vue doesn't aim to mimic React's API, so this is an almost complete rewrite. Kudos to Evan and the original forker Phan An! I assume both are performance optimizations for the Virtual DOM diffing algorithm. In the core Pythagoras component, he added two Inferno-specific props: noNormalize and hasNonKeyedChildren.Īccording to this issue from 8 days ago, noNormalize is a benchmark-focused flag that improves performance, and I can't figure out what hasNonKeyedChildren does. Inferno doesn't do string-based refs for performance reasons, and we need them so we can use D3 to detect mouse position on SVG. He also had to change a string-based ref into a callback ref. I don't know if that's a stylistic choice or an Inferno requirement. He also changed react to inferno-beta36, which means my CTO definitely won't let me use it in production yet.įrom there, the main changes are to the imports – React becomes Inferno – and he changed some class methods to bound fat arrow functions. You can see the diff on github.ĭominic changed all react-scripts references to inferno-scripts, and it's a good sign that such a thing exists. Dominic says that impacts performance though, so he made a proper fork. You can use Inferno as a drop-in replacement for React, and at first I did. Very promising for future performance optimizations in my current apps. My favorite part is that you can use Preact as a drop-in replacement for React and it Just Works and works well. Throttling to React's redraw cycle was easy and works well. I tried throttling to requestAnimationFrame, but that didn't work so good. It was slow because I was slamming the rendering engine with so many requests per refresh cycle. Turns out my original tree wasn't so slow because React is slow. Reactīased on Jason's and Evan's tips, I added mouse event throttling to my demo to make it faster. For an in-depth explanation of how it works, go here. You guys rock!Īnd thanks to Tero and Wayne for adding their own versions! So exciting! I hope we get more ? Someone mentioned a raw JavaScript version without frameworks that would be cool. Thanks to Jason, Dominic, and Evan for building the forks. Maybe even clone the repo and run it locally. Many of the gifs have live versions linked from their github. Fundamentally, it's a showcase of "jank" – how much jankiness is there between what you see on the screen and what you do with the mouse. People have been asking why this test is important, why should they care, what's the point. Angular 2 and CycleJS added on Dec 23rd. All recorded with LICEcap in a normal, everyday setting running Chrome, Spotify, Emacs, etc. Same dancing pythagorean tree fractal, same mid-2012 retina MacBook Pro. Animating 2048 SVG nodes in React, Preact, Inferno, Vue, Angular 2, and CycleJS – a side-by-side comparisonĮver wondered which front-end framework is smoothest to animate 2048 SVG nodes? Here are some GIFs.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |