4 ms·

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 har

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 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" which is built into OSX and iOS (others?) letting the user select a word and look up its definition in the dictionary. Finally I'm sure there are accessibility issues. And don't forget right to left like Arabic. (https://www.flickr.com/photos/u-e/2680759761/ https://www.flickr.com/photos/u-e/2680759761/) UI in a game (the most common place to render a UI yourself) usually doesn't care about these things. I'd hazard a guess though that most apps do. I know I get really annoyed when I can't copy small pieces of text from a native app. For example copying a link to a browser, copying a phone number to my phone, copying an address to maps, etc. In general DOM makes all of these just work.

Nitramp 12y ago
The hardest part is actually layout managers, i.e. what happens if you want to support more than one pixel width. With all its clunkiness, CSS & DOM actually solve that. edit: they actually have their own layout implementation(s). I wonder how those compare to the built in browser versions (performance, correctness, ...)? https://github.com/Flipboard/react-canvas/blob/master/lib/Layout.js https://github.com/Flipboard/react-canvas/blob/master/lib/La...
- jlongster 12y ago
  It's css-layout: https://github.com/facebook/css-layout https://github.com/facebook/css-layout. The same engine used in React Native. It turns out that you only need a portion of CSS for apps. It's very performant.
  - mortenjorck 12y ago
    Huh. Using a reimplemented, minimal CSS engine would mean more or less baked-in cross-browser compatibility, right?
    - jlongster 12y ago
      Yes, but it's hard to do your own layout on the web because in times that want to width of an element that has text with `flex: 0`, you can't do that. It's mainly useful for things like this where you control everything.
diiiimaaaa 12y ago
... and you can't translate a page, you can't search on a page, you can't select or zoom images, you can't open link in the new tab. Imho, making custom "DOM" via canvas just to make UI look fancy is not a solution. Web was always about delivering accessible content for everyone. Though, library might be good for web apps or games that are not content oriented.
bonn1 12y ago
Well said. We also experimented with non-DOM rendering, in particular with WebGL-sprites. We achieved very nice result running constantly at 60fps even on low-end mobiles but it's nothing worth if one doesn't have all the DOM amenities you mentioned or a full integration with the browser environment.
ricardobeat 12y ago
Each of these features can be implemented on top of a canvas renderer. Not saying it's easy, but can be done. The browser itself does it, everything is 2D textures in the end.
WickyNilliams 12y ago
I'm glad someone else said this, you've echoed a lot of my thoughts. I'm a huge react fan, and I think this is super neat - once again showing the flexibility and power of React's component and render model. It'll probably have a big impact on game UI for the web. That said, doing this on a content-driven site is absolute madness. It breaks so many things, and throws away so many fundamental tenets of the web. by the time they've reimplemented everything they'll have probably lost all performance wins. The fancy animations are a miniscule gain for such a great loss of functionality Excited to play with this though, since I'm learning canvas and graphics!
mjjohnston 12y ago
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/#PracticalApplications 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 https://github.com/flipboard/react-canvas#accessibility You are correct that the DOM just works. But we need a better option on the web in order to achieve the kinds of experiences that people have come to expect from native applications. The hope is that by pushing the browser beyond its limits that we can make progress in this area.
- vjeux 12y ago
  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 :)
  - liviu 12y ago
    That's what I was thinking too. Worth some extra html and style code for those benefits.
- DennisP 12y ago
  Do you think it'd work well to use your <text> component as the start of a canvas-based text editor?
- Touche 12y ago
  > But we need a better option on the web in order to achieve the kinds of experiences that people have come to expect from native applications. I think this is a really cool project and a technical achievement, but I disagree with this one statement. We don't actually need to "achieve the kinds of experiences". This is my biggest problem with designers I've encountered, they do not see the benefits of the platform and try to design everything the same way. The web has distinct advantages that makes it special and I think way too much effort is put into making it behave like native applications (trying to catch up to its benefits rather than leaning on the web's).
peterhunt 12y ago
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.
sfjailbird 12y ago
Anything that needs text input is right out too. The DOM text input field hooks into a lot of native functions. Unfortunately, that affects most games, which would otherwise be an obvious niche for something like this.

Nitramp 12y ago

The hardest part is actually layout managers, i.e. what happens if you want to support more than one pixel width. With all its clunkiness, CSS & DOM actually solve that. edit: they actually have their own layout implementation(s). I wonder how those compare to the built in browser versions (performance, correctness, ...)? https://github.com/Flipboard/react-canvas/blob/master/lib/Layout.js https://github.com/Flipboard/react-canvas/blob/master/lib/La...

jlongster 12y ago
It's css-layout: https://github.com/facebook/css-layout https://github.com/facebook/css-layout. The same engine used in React Native. It turns out that you only need a portion of CSS for apps. It's very performant.
- mortenjorck 12y ago
  Huh. Using a reimplemented, minimal CSS engine would mean more or less baked-in cross-browser compatibility, right?
  - jlongster 12y ago
    Yes, but it's hard to do your own layout on the web because in times that want to width of an element that has text with `flex: 0`, you can't do that. It's mainly useful for things like this where you control everything.

diiiimaaaa 12y ago

... and you can't translate a page, you can't search on a page, you can't select or zoom images, you can't open link in the new tab. Imho, making custom "DOM" via canvas just to make UI look fancy is not a solution. Web was always about delivering accessible content for everyone. Though, library might be good for web apps or games that are not content oriented.

bonn1 12y ago

Well said. We also experimented with non-DOM rendering, in particular with WebGL-sprites. We achieved very nice result running constantly at 60fps even on low-end mobiles but it's nothing worth if one doesn't have all the DOM amenities you mentioned or a full integration with the browser environment.

ricardobeat 12y ago

Each of these features can be implemented on top of a canvas renderer. Not saying it's easy, but can be done. The browser itself does it, everything is 2D textures in the end.

WickyNilliams 12y ago

I'm glad someone else said this, you've echoed a lot of my thoughts. I'm a huge react fan, and I think this is super neat - once again showing the flexibility and power of React's component and render model. It'll probably have a big impact on game UI for the web. That said, doing this on a content-driven site is absolute madness. It breaks so many things, and throws away so many fundamental tenets of the web. by the time they've reimplemented everything they'll have probably lost all performance wins. The fancy animations are a miniscule gain for such a great loss of functionality Excited to play with this though, since I'm learning canvas and graphics!

mjjohnston 12y ago

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/#PracticalApplications 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 https://github.com/flipboard/react-canvas#accessibility You are correct that the DOM just works. But we need a better option on the web in order to achieve the kinds of experiences that people have come to expect from native applications. The hope is that by pushing the browser beyond its limits that we can make progress in this area.

vjeux 12y ago
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 :)
- liviu 12y ago
  That's what I was thinking too. Worth some extra html and style code for those benefits.
DennisP 12y ago
Do you think it'd work well to use your <text> component as the start of a canvas-based text editor?
Touche 12y ago
> But we need a better option on the web in order to achieve the kinds of experiences that people have come to expect from native applications. I think this is a really cool project and a technical achievement, but I disagree with this one statement. We don't actually need to "achieve the kinds of experiences". This is my biggest problem with designers I've encountered, they do not see the benefits of the platform and try to design everything the same way. The web has distinct advantages that makes it special and I think way too much effort is put into making it behave like native applications (trying to catch up to its benefits rather than leaning on the web's).

peterhunt 12y ago

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.

sfjailbird 12y ago

Anything that needs text input is right out too. The DOM text input field hooks into a lot of native functions. Unfortunately, that affects most games, which would otherwise be an obvious niche for something like this.