11 ms·
Flipboard releases React Canvas
- thebiglebrewski 12y agoCooooool!
- dkarapetyan 12y agoNew 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.
- JoshMilo 12y agoHonest 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?
- dkarapetyan 12y agoI don't know. Probably not but all abstractions leak so then again it might help if you have a second source on how things should work. I don't have a list of resources.
- stoikerty 12y agoThere is a video that describes "Immediate-Mode Graphical User Interfaces" really well, see: https://twitter.com/stoikerty/status/467047333453381632 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-Why-React-is-Awesome http://jlongster.com/Removing-User-Interface-Complexity,-or-...
- rpedela 12y agoThe 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.
- greggman 12y agoThe original talk? http://mollyrocket.com/861 http://mollyrocket.com/861 There's also a relatively recent library (C++) https://github.com/ocornut/imgui https://github.com/ocornut/imgui
- angersock 12y agoIt is kind of interesting watching yet another round of retained-vs-immediate mode play out.
- danabramov 12y agoOh 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/Surface.js https://github.com/Flipboard/react-canvas/blob/master/lib/Su... It's about describing nested side effects in time, really.
- cnp 12y agoIs it possible -- literally -- to write more clear code? Stunning implementation
- vladev 12y agoI actually wonder if it can be done even more elegant with RxJS?
- masklinn 12y agoYou may want to take a look at elm-html.
- danabramov 12y agoAlso Cycle (virtual-dom + Rx)
- ZenoArrow 12y agoThanks 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 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 look if you're interested in FRP.
- seanmcdirmid 12y agoRx 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.
- jchrisa 12y agoIs there a live demo I can run?
- buymorechuck 12y agoJust go to https://flipboard.com https://flipboard.com on your mobile phone!
- fortes 12y agoCongrats on the release Charles!
- buymorechuck 12y agoThanks Filipe! :-)
- jchrisa 12y agoLooks smooth, nice achievement!
- vidarh 12y agoWhen I went to the example links given at the end of the post with my phone, I jut got a "spinner" for several minutes before I gave up waiting... On https://flipboard.com/explore https://flipboard.com/explore I get some exciting but very distracting rendering artefacts (blocks on the images changing intensity at a high speed until I start scrolling fast - if I scroll through slowly, the flickering continues).. If I click through on one of the example pages, scrolling seemingly randomly stops working smetimes (after a few tries, it started snapping back to where it was, even when there clearly is more content below). This is with the Android browser on 4.2.2, admittedly on a rather obscure phone (a Kingzone K1 Turbo) . If you're interested in more details, my e-mail is on my profile.
- jasonsmiff 12y agoFrom their blogpost[1] "Head on over to flipboard.com on your phone to see what we’ve built, or if you don’t have a Flipboard account, check out a couple[2] of magazines[3] to get a taste of Flipboard on the web." I was rather impressed with flipboard.com on my mobile. Although it seemed to hit a jank on a few scrolls and I wonder if there are UX implications for not being able to highlight and copy some of the text. Regardless very cool! [1]http://engineering.flipboard.com/2015/02/mobile-web/ http://engineering.flipboard.com/2015/02/mobile-web/ [2]https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz [3]https://flipboard.com/@flipboard/ten-for-today-k6ln1khuz https://flipboard.com/@flipboard/ten-for-today-k6ln1khuz
- cnp 12y agoMy god this is so fucking awesome! Great work guys and gals. Shows precisely what a good, wide-ranging idea means in practice.
- megaman821 12y agoThis looks really neat. How does this compare to Famo.us, which also claims at have smooth animations at 60 fps?
- woah 12y agoFamo uses the DOM, by encoding matrix transforms to strings and sticking them into the attributes of DOM nodes.
- yesimahuman 12y agoTechnically, Famous can render to anything. I believe DOM was just their first render target. See their work on "mixed mode" WebGL rendering.
- lefnire 12y agoHow about in terms of adoption, momentum, team, performance, etc? Any insights / predictions on how Famo.us might stack up _against_ react-canvas?
- picardo 12y agoThis is so beautiful! I can see this being used for building canvas based web applications as well!
- vidarh 12y agoA stronger indictment of the DOM than finding it necessary to combine a CSS parser written in Javascript, a virtual DOM and a canvas based renderer because it is faster than updating the DOM would be difficult to come up with... It looks like amazing work, but it's quite depressing that it's necessary.
- bsimpson 12y agoDon't worry, there will be a new flag `document.useStricter` that will turn off all the cruft that makes the DOM slow so you don't need to patch around it with libraries. It'll become a Chrome experimental flag after the editor's draft is released in 2022.
- walterbell 12y agoDoes mobile browser DOM rendering use GPU hardware acceleration?
- stoikerty 12y agoYes they can. If you are interested here is how the rendering works. The rendering happens in batches, the first render is always an expensive operation and includes both "paint" & "layout". - The "layout"-operation recalculates the tree of visible elements. - The "paint"-operation paints the element and is commonly done using a software rasterizer. Every subsequent render happens if an DOM-element triggers a layout or a paint (or both). A re-paint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. When you use GPU-accelerated CSS properties such as opacity, translate, rotate & scale, both layout- and paint-operations are not executed. The GPU handles the changes for those properties. This is how famo.us wants to achieve its "60fps". React by itself can cause expensive operations too if you trigger a CSS property that is not GPU-accelerated. In the process of rendering, a DOM-element can be destroyed and recreated when your state or model changes. So be vary of third-party React-components that promise "fluid" or "fast" speeds. IMO animation is still a research-topic for React. Their manual currently lists a method for basic CSS animations and transitions, but it's projects like React Canvas that make React a worthwhile contender for performant animations. http://facebook.github.io/react/docs/animation.html http://facebook.github.io/react/docs/animation.html Mobile browsers are no different to Desktop browsers, almost every smartphone has a GPU of some sort. So you have 2 main-bottlenecks with every device. The first is the CPU (& RAM), the next one is the GPU (& the GPU-RAM). What is GPU-accelerated and why: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ http://www.html5rocks.com/en/tutorials/speed/high-performanc... How Reflows and Repaints cause slow javascript: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ http://www.stubbornella.org/content/2009/03/27/reflows-repai...
- efields 12y agoI'm guessing http://flipboard.com/explore 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 ;-)
- nusratty 12y agoLoving it.
- deleted 12y ago[deleted]
- burnstek 12y agoAt first blush, the mental model reminds me of ASP.NET WebForms.
- danabramov 12y agoYou can say its mental model has similarities to WebForms except for the ugly “pretend server is stateful”.
- aboodman 12y agoerr, WebForms is the exact opposite. WebForms is about taking something stateless (HTML) and making is stateful. React takes something stateful (the DOM) and makes it stateless.
- staircasebug 12y agoAmazing and buttery smooth on my Android/Chrome, but as of now, there are big accessibility hurdles to overcome with Canvas and that's concerning.
- woah 12y ago- Will this work inside of iOS's JavaScriptCore? - Could this use grid style sheets as its styling engine?
- drhayes9 12y agoWhat 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?
- spicyj 12y agoI 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.
- drhayes9 12y agoThat'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.
- tmzt 12y agoI wonder if an invisbile SVG layer would work for that purpose, or translate positioned invisible DOM as a fallback.
- danabramov 12y agoSee also: https://github.com/flipboard/react-canvas#accessibility https://github.com/flipboard/react-canvas#accessibility
- ZenoArrow 12y agoLooks 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)?
- deleted 12y ago[deleted]
- danabramov 12y agoSee this note: https://github.com/flipboard/react-canvas#accessibility https://github.com/flipboard/react-canvas#accessibility
- artursapek 12y agoI'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. [1] https://cryptowat.ch https://cryptowat.ch
- snissn 12y agoLooks 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 good web products for actual securities
- artursapek 12y agoThanks. 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 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.
- cnp 12y agoI 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.
- peteorpeter 12y agoHere's an interesting take on the "hybrid" app idea: - React Canvas is your application layer - HTML canvas is your common rendering layer - Browsers are your web runtime - Ejecta[0] is your iOS runtime - (I don't know a native android canvas runtime) [0] http://impactjs.com/ejecta http://impactjs.com/ejecta --> renders with WebGL
- cpr 12y agoReact Native can be the core of your iOS/Androis runtime.
- elwell 12y ago> There is experimental support for using css-layout to style React Canvas components. Just an experiment, but that could be very powerful. A lot of canvas-eligible projects are done in the dom because CSS makes it easier that messing with hardcoding all the style in js functions.
- greggman 12y agoIf 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 agoThe 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 agoIt'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 agoHuh. Using a reimplemented, minimal CSS engine would mean more or less baked-in cross-browser compatibility, right?
- zincoontrin 12y agoDoes anybody remember the Flex SDK? That was the right approach to build interfaces for apps, very similar conceptually to XAML. It's surprising how the web is finally catching up with those technologies.
- marknadal 12y agoholy flipboard, did you see they re-implemented a subset of CSS into JS? https://github.com/facebook/css-layout https://github.com/facebook/css-layout I was literally thinking about doing something similar the other day for an experimental/learning project. React is taking over the web, and I'm excited for it - coming from a person who is incredibly cynical about frameworks. React is proving itself as a powerful library, not an assumption driven framework.
- danabramov 12y agoLOL, didn't expect it to work with React Hot Loader practically out of the box (except for <Text> for some reason): https://github.com/Flipboard/react-canvas/pull/3/files https://github.com/Flipboard/react-canvas/pull/3/files The fun part is tweaking text layout algorithm and letting Hot Loader pick up changes when replacing components. Without browser refreshing, of course.
- devongovett 12y agoThis is great. Can't wait for the WebGL version ;-) Also, it would be really cool to run everything except rendering in a worker thread and send rendering commands to the UI thread, like react-native does.
- amelius 12y agoLast 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.
- mjjohnston 12y agoCustom 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.
- amelius 12y agoI 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?
- arcticgeek 12y agoIt's funny to watch the world very slowly reinvent Adobe Flex.
- wallflower 12y agoFlex was ahead of its time with Spark. It was behind its times with mxmlc. mxmlc made it painfully clear, even with incremental compile, that you were building a client-server application in a web age. Once you wanted to build custom UIs, you lost the "WYSIWYG" GUI rapid development environment that was the whole selling point that Adobe came in with. The data synchronization system worked but it was opaque and how (at the time) they made their money. Flex lost to the open web.
- ivanb 12y agoYes. It is funny to observe how engineers implement technology A by means of technology B and then go backwards and implement B through A. The spiral continues.
- tomaskafka 12y agoOr WPF. React = WPF for web (and is still awesome).
- archagon 12y agoOh man, it's a small thing, I love how well the back button works. Feels totally like a native iOS app. (Though not so much if you use the swipe from left gesture, sadly.)
- mmgutz 12y agoIs it me or are these React frameworks heading towards the ideas in XAML and MXML?
- aaronyo 12y agoBig fan of React. For others using it, why use JSX instead of just doing everything in js? In other words, why is HTML like this: <Group style={styles.group}> <Image style={styles.image} src='http://...' /> <Text style={styles.text}> Lorem ipsum... </Text> </Group> Preferable to something like this (which can easily be done with some helper methods wrapping the verbose React DOM methods): $group({styles: style.group}, $image({styles: image, src: 'http://...'}), $text({styles: style.text}, 'Lorem ipsum...')); No pre processing step required, and of course it's natural to imbed js in, er..., js. What am I missing? Why keep the HTML part in all this?
- iLoch 12y agoFor me, I find it much easier to get an understanding of the structure of the components by looking at hierarchical markup vs. plain old JS. Everyone has a different idea of how they want to lay out their JS, but most people know/agree on what XML should look like.
- aaronyo 12y agoHaving a preference for reading HTML seems fair, though I prefer closing parens to closing tags for short bits, and the JS formatting problem is one you've already got in the rest of your code base. Also, you'll be formatting HTML + JS bits and not just static HTML like in the example. JSX seems like a good deal of machinery to support this preference.
- insin 12y agoThe XML-like syntax is just less work, mentally and physically: no need for commas between props, the props object and children, no need to carefully manage all those commas when editing, adding, deleting, moving and removing stuff later on, plus the closing tag syntax makes nesting nicer by providing context via the tag name; all of which adds up to make it more pleasant to work with. The second approach is what I was doing in various flavours for years prior to JSX. I ended up having to adopt comma-first to stay sane in larger/deeper templates, ( e.g. https://gist.github.com/insin/8e72bed793772d82ca8d https://gist.github.com/insin/8e72bed793772d82ca8d ). The first thing I did when I saw JSX was start to write a React.DOM emitting version of my then-usual JSON-ML type stuff, but then I tried it and... never going back.
- forrestthewoods 12y agoSo one of my friends says that a potential issue is accessibility compliancy. And that due to lack of compliancy Flipboard may find themselves in a lawsuit. I know next to nothing about this type of thing. Anyone have thoughts on the issue?
- nevir 12y agoLawsuit seems unlikely, but it is certainly hostile to screen readers (though, it's quite possible to create a set of hidden DOM nodes that expose the structure of the page to screen readers. See google docs)
- polskibus 12y agoThis is a great project indeed. However, as many here have already pointed out, there are many limitations to this approach, SEO and lack of ctrl+f for example. Which reminds me of flash. Most flash controls had similar drawbacks. I think web development shouldn't repeat that mistake (again). It also reminds me that Google Docs took similar approach. As far as I remember they use a lot of canvas with a bit of DOM intertwined where necessary.
- dandare 12y agoAm I the only one who sees the parallel with Flash?
- philnash 12y agoOut of the box browser features that have been removed/destroyed by the quest for 60fps: * Copy/paste (holding on an article gives the options to email or report) * Pinch to zoom * Double tap to zoom (opens links instead) * iOS swipe forwards and backwards (renders the page swipe animation twice, at 60fps I guess) * iOS Reader View (go on, try it, I laughed) And most importantly * Any sort of accessibility 60fps doesn't matter to someone who can't see the screen. 60fps doesn't matter to someone who relies on assistive technologies to surf the web. 60fps doesn't really matter.
- rimantas 12y agoExactly. This is a horrible misuse of the canvas element, alas, the moronic "war against native" destroyed all the good we had achieved ten years ago. I think then we had the golden age of web standards, progressive enhancement, graceful degradation, accessibility, and what not. Now we just have a race who can rape poor HTML/CSS/JS further.
- porker 12y agoAnd yet that's what people pay money for/perceive value in. Disillusioned web zealot here.
- comex 12y ago60fps does matter. We've just all been taught that 60fps and sane use of CSS and the DOM (as currently standardized), so as to allow browser features to work properly, are mutually incompatible... which might be true. Using canvas certainly sucks for the reasons you describe; I wouldn't do it for more than a proof of concept. But long term, do we really need to hang the success the whole Web on the backs of some old and very ugly APIs? Can't someone come up with an alternative?
- danpeddle 12y agoIt's a shame that so many custom android roms either do not or have only very limited support for hardware acceleration in the browser. I do not know what percentage of users would fall into this category, but worth keeping in mind.