Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flipboard releases React Canvas

github.com

Post reply on HN
Print view View original

81–90 of 136 posts

Re: Flipboard releases React Canvas

#81

Post by peterhunt »

greggman wrote: post #52

If rendering UI to a canvas fits your needs then by all means do it. Just be aware that when it comes time to localize to other languages it starts getting hard to support things like CJK where in order to properly work there's an Input Method Editor ( http://i.imgur.com/JmmYwyi.gif ) that needs to be able to read the text. There's also cut/copy/paste which users can't do from text on a canvas. There's also "define"…

These are great points. It also breaks SEO and clipboard and ctrl-f.

With that said you could easily build a component library on top of this that renders to DOM or react-native or canvas or HTML (server-side) depending on what your use case is (just use dependency injection to get a reference to your underlying components). This way you can more easily manage these tradeoffs.

I think this project is so, so exciting and awesome.

Re: Flipboard releases React Canvas

#83

Post by amelius »

Last time I checked, measuring font sizes using the canvas was horribly slow. So, I wonder how they perform measurements necessary for automatic line-wrapping, et cetera. Are they doing these measurements fully in javascript?

> Custom fonts are not currently supported but will be added in a future version.

Ok, that is a pity. I wonder if it has something to do with the complexity of implementing measureText fully in javascript.

Re: Flipboard releases React Canvas

#84

Post by vjeux »

mjjohnston wrote: post #79
greggman wrote: post #52

If rendering UI to a canvas fits your needs then by all means do it. Just be aware that when it comes time to localize to other languages it starts getting hard to support things like CJK where in order to properly work there's an Input Method Editor ( http://i.imgur.com/JmmYwyi.gif ) that needs to be able to read the text. There's also cut/copy/paste which users can't do from text on a canvas. There's also "define"…

React Canvas author here. I outlined some of the reasons why it is not always the right answer: http://engineering.flipboard.com/2015/02/mobile-web/#Practic... On Flipboard we use DOM where appropriate for text input and areas of the application where performance is less critical. And to your point about accessibility: https://github.com/flipboard/react-canvas#accessibility You are correct that the DOM just works. Bu…

For accessibility you can look into what pdf.js does. They put a transparent text on-top of the pdf text (canvas). So you can select it. Pretty clever :)

Re: Flipboard releases React Canvas

#85

Post by tmzt »

drhayes9 wrote: post #49
spicyj wrote: post #40

Earlier quoted context omitted.

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.

That's one of the problems with rendering UIs on canvas: it doesn't work with a11y. And since it's not rendering tags, there's nowhere to hang the ARIA attributes.

I wonder if an invisbile SVG layer would work for that purpose, or translate positioned invisible DOM as a fallback.

Re: Flipboard releases React Canvas

#86

Post by mjjohnston »

amelius wrote: post #83

Last time I checked, measuring font sizes using the canvas was horribly slow. So, I wonder how they perform measurements necessary for automatic line-wrapping, et cetera. Are they doing these measurements fully in javascript? > Custom fonts are not currently supported but will be added in a future version. Ok, that is a pity. I wonder if it has something to do with the complexity of implementing measureText fully in…

Custom fonts are supported on flipboard.com using the same rendering engine. It was just a matter of time to extract the Flipboard specific bits out. This is coming soon.

Re: Flipboard releases React Canvas

#87

Post by nkohari »

artursapek wrote: post #70
nkohari wrote: post #68

Earlier quoted context omitted.

Very cool app. I'm going to pass it around to friends who are more into cryptocurrencies than me. :) Sorry to hijack this thread, but I have a question: you seem to have been successful in stopping left/right swipe from navigating back and forward. The app I'm working on supports horizontal scrolling, but it can be a bit confusing if you mean to scroll and accidentally navigate. I've tried a few things and looked aro…

document.querySelector('canvas').addEventListener('mousewheel', function (e) { e.preventDefault(); });

If it really is this simple, I'm going to kick myself repeatedly. Thanks. :)

Re: Flipboard releases React Canvas

#89

Post by amelius »

mjjohnston wrote: post #86
amelius wrote: post #83

Last time I checked, measuring font sizes using the canvas was horribly slow. So, I wonder how they perform measurements necessary for automatic line-wrapping, et cetera. Are they doing these measurements fully in javascript? > Custom fonts are not currently supported but will be added in a future version. Ok, that is a pity. I wonder if it has something to do with the complexity of implementing measureText fully in…

Custom fonts are supported on flipboard.com using the same rendering engine. It was just a matter of time to extract the Flipboard specific bits out. This is coming soon.

I was also wondering how you embed video. And what if an element in the virtual DOM (e.g., a popup box) overlaps with the video?

Re: Flipboard releases React Canvas

#90

Post by mjjohnston »

danabramov wrote: post #4

Oh 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.

It's worth mentioning that much of the code that integrates with React internals is based on the work in react-art: https://github.com/reactjs/react-art

This is the same technique used by Netflix for their React-based television UI.

https://www.youtube.com/watch?v=eNC0mRYGWgc

Post reply on HN