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

51–60 of 136 posts

Re: Flipboard releases React Canvas

#51

Post by ecesena »

vowelless wrote: post #26
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.

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?

I have a similar path, and honestly found the FE dev tools being the slowest thing to learn about (too many, too frequently updated/breaking things).

I think you can build a lot on top of React with minimal knowledge of js (so, yes, start), but you definitely want to go deep and understand how it works inside (so, yes, also study js).

Re: Flipboard releases React Canvas

#52

Post by greggman »

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" 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/)

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.

Re: Flipboard releases React Canvas

#53

Post by jt2190 »

stoikerty wrote: post #14
JoshMilo wrote: post #6

Earlier quoted context omitted.

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?

There is a video that describes "Immediate-Mode Graphical User Interfaces" really well, see: https://twitter.com/stoikerty/status/467047333453381632 There is also a lengthy and insightful blog-post about the subject where I found the video: http://jlongster.com/Removing-User-Interface-Complexity,-or-...

Video is here: http://mollyrocket.com/861

Re: Flipboard releases React Canvas

#54

Post by greggman »

JoshMilo wrote: post #6
dkarapetyan wrote: post #3

New 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 original talk?

http://mollyrocket.com/861

There's also a relatively recent library (C++)

https://github.com/ocornut/imgui

Re: Flipboard releases React Canvas

#55

Post by cnp »

artursapek wrote: post #36

I'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 rewr…

I did the same a while back, which paired Backbone with Easel / Create.js for both interface and game elements. It worked ~ok~, but was never quite what I wanted and a lot of cleanup was still required in order to achieve solid performance.

Re: Flipboard releases React Canvas

#56

Post by artursapek »

snissn wrote: post #43
artursapek wrote: post #36

I'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 rewr…

Looks awesome! Two quick questions: 1) Your site looks very similar to bitcoinwisdom ( which i love). Did that come about by coincidence or design? Are there any open source tools that you were able to build off of that bitcoinwisdom also uses? 2) Could you build out support for visualizing financial markets like stocks and the price of oil? The bitcoin ecosystem has a bunch of great UI, but it's difficult to find go…

Thanks. I definitely looked at Wisdom when I was starting the project, but I've gone in different directions than they have. For example, a strong emphasis of my service is the ability to integrate your accounts on various Bitcoin exchanges and visualize your orders and trades (http://i.imgur.com/KxxtGFA.gifv). I'm actually slowly turning it into a proper trading platform, with order execution. On the other hand, BitcoinWisdom are still happy just serving charts with ads.

I'm not sure what they use to build their app. No part of mine is open source except tiny bits of d3, and jQuery.

Wrt supporting other types of markets, I'd love to. The reason Bitcoin has had a wave of nice web-based interfaces is because the exchanges all offer free-to-use HTTP APIs. The "old-world" financial markets all charge money for data access, and it's generally not as easy to consume either. Bitcoin markets were born into the web era.

Re: Flipboard releases React Canvas

#57

Post by Nitramp »

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"…

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/La...

Re: Flipboard releases React Canvas

#58

Post by supercoder »

vowelless wrote: post #26
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.

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?

There's no need to go deep diving on learning JavaScript.

As you're using a high level framework, you're interacting with that more than the details of JavaScript. So in essence you're learning 'React' not 'JavaScript'.

So just start building in React and the JS will come along naturally.

Re: Flipboard releases React Canvas

#59

Post by jlongster »

Nitramp wrote: post #57
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"…

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/La...

It's 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.

Re: Flipboard releases React Canvas

#60

Post by seanmcdirmid »

ZenoArrow wrote: post #47
vladev wrote: post #17

Earlier quoted context omitted.

I actually wonder if it can be done even more elegant with RxJS?

Thanks for the heads up about RxJS, didn't know that existed. Seeing as one of the benefits of React is in server-side rendering, and now with the new OSS nature of .NET, it's worth considering standard Rx as well ( https://msdn.microsoft.com/en-gb/data/gg577609.aspx ). Rx is very new to me, so I may have this description wrong, but it essentially seems to be well-supported event-driven programming library. Worth a l…

Rx isn't FRP, and doesn't really solve the same problem that react does (view management). Its grew for pushing discrete events around, but doesn't provide for any signals and continuous binding.
Post reply on HN