Does 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.
Flipboard releases React Canvas
61–70 of 136 posts
Re: Flipboard releases React Canvas
#62Oh 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 need to know Javascript's quirks. I generally recommend [1] for experienced developers. Everything on that page is important to know (edit: except the perf stuff, which changes as the js engines get better). I'll second the Eloquent Javascript recommendation in another comment if you're looking for a more involved book.
[1] http://bonsaiden.github.com/JavaScript-Garden/
With the JS quirks out of the way, I would recommend building something in React and muddle through things with SO/google.
The hardest part of frontend dev for an experienced backend dev is the CSS. CSS is conceptually simple but there's a LOT of random domain knowledge you need to get layouts you want. You can bypass a lot of it by using a sass framework (e.g. foundation or bourbon) at the cost of adding a build step and another abstraction layer on top of CSS.
Re: Flipboard releases React Canvas
#63holy flipboard, did you see they re-implemented a subset of CSS into JS? 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.
Re: Flipboard releases React Canvas
#64Earlier quoted context omitted.
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.
Huh. Using a reimplemented, minimal CSS engine would mean more or less baked-in cross-browser compatibility, right?
Re: Flipboard releases React Canvas
#65Re: Flipboard releases React Canvas
#66At first blush, the mental model reminds me of ASP.NET WebForms.
err, 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.
Re: Flipboard releases React Canvas
#67holy flipboard, did you see they re-implemented a subset of CSS into JS? 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…
This was specifically referenced in the React Native announcement video. [0]
Re: Flipboard releases React Canvas
#68I'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…
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 around for answers, but so far the solutions I've found haven't worked out. Can I ask what your secret is? :)
Re: Flipboard releases React Canvas
#69If 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"…
... 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.
Re: Flipboard releases React Canvas
#70I'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…
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();
});