This looks really neat. How does this compare to Famo.us, which also claims at have smooth animations at 60 fps?
Famo uses the DOM, by encoding matrix transforms to strings and sticking them into the attributes of DOM nodes.
Flipboard releases React Canvas
31–40 of 136 posts
Re: Flipboard releases React Canvas
#32What are the accessibility implications of drawing all controls of a web app to the canvas using React? Are there ARIA annotations available for React already?
Re: Flipboard releases React Canvas
#33Looks really good. My only real question would be about something drab but practical: SEO.
As the components are rendered to canvas, would the metadata that usually feeds SEO be harder to generate? Is that something you could fix through use of the parallel DOM (it's mentioned briefly on the page)?
Re: Flipboard releases React Canvas
#34Oh my, it is beautiful on the inside. Check out the source. They're totally showing off the power of React component model even when it doesn't render directly to DOM tree: https://github.com/Flipboard/react-canvas/blob/master/lib/Su... It's about describing nested side effects in time, really.
I have generally done systems and backend work, so usually C/C++/Go/Python. React is making me extremely excited to do some frontend work! Is React a good introduction to the land of frontend programming? Or do I first need to familiarize myself with vanilla JS and go bottom up to React?
You should def know JS prior to learning React.
This is a pretty great book
Re: Flipboard releases React Canvas
#35Oh my, it is beautiful on the inside. Check out the source. They're totally showing off the power of React component model even when it doesn't render directly to DOM tree: https://github.com/Flipboard/react-canvas/blob/master/lib/Su... It's about describing nested side effects in time, really.
I have generally done systems and backend work, so usually C/C++/Go/Python. React is making me extremely excited to do some frontend work! Is React a good introduction to the land of frontend programming? Or do I first need to familiarize myself with vanilla JS and go bottom up to React?
Both.
Alternate your time spent learning.
Sometimes study high-level, sometimes low-level. (Low-level, tongue-in-cheek, as in "JS is the bytecode of web applications.")
Re: Flipboard releases React Canvas
#36I'm building a complicated canvas app[1] for visualizing Bitcoin markets. I resorted to building my own framework on top of canvas, exactly for performance reasons. It's fast, but as a framework I was never too happy with it because it's a little half-baked.
More recently I found and fell in love with React for other frontend work, and use it exclusively now for any view-related work. I might have to go back and rewrite the ugliest parts of my code with this, it looks awesome. Kudos to Flipboard for open-sourcing it.
Re: Flipboard releases React Canvas
#37I'm guessing http://flipboard.com/explore should be a good demo (in mobile safari, upper-right link off the home page), but it's just infinitely loading for me. Posting b/c someone from Flipboard is probably monitoring this thread ;-)
Fix pushed ;-)
After 20 minutes, I still see this error: http://i.imgur.com/AdfJNkO.png
Tested with Chrome/FF/IE (all latest) with the same result. Hope it helps.
Re: Flipboard releases React Canvas
#38Re: Flipboard releases React Canvas
#39New job description for front-end web developers: 5+ years of designing game engines and optimizing rendering pipelines. If the joke is lost please go read about the similarities between react and immediate mode rendering systems.
Honest question, would studying immediate mode rendering systems improve my understanding of React's system of doing things? If so, do you have a resource I could use?
The first half of my career was in graphics and games. I think at a high-level, React is similar to a rendering engine and React + Flux is similar to a game engine.
Re: Flipboard releases React Canvas
#40What are the accessibility implications of drawing all controls of a web app to the canvas using React? Are there ARIA annotations available for React already?
I don't know the specifics of how canvas accessibility does or doesn't work, but React definitely supports adding ARIA attributes to any tags it renders.