5 ms·

Sweet. I'll watch out for wherever you guys end up. Might be worth reading one of the react native devs about why animations might still be hard: http://jlongs

Sweet. I'll watch out for wherever you guys end up. Might be worth reading one of the react native devs about why animations might still be hard: http://jlongster.com/First-Impressions-using-React-Native#comment-1838941031 http://jlongster.com/First-Impressions-using-React-Native#co... This idea is also why I hooked up the css-layout project (https://github.com/facebook/css-layout https://github.com/facebook/css-layout) to a live demo to play around with: http://layout.jlongster.com/ http://layout.jlongster.com/

jordwalke 12y ago
Yes, in browsers, JS animations are still hard (I might even say impossible to do well for large apps with a lot going on). One anecdote: I spent a month trying to build a 60fps scrolling list view in JS from scratch (JS driving all the animations). No matter how hard I tried, I couldn't make it work on the web. I believe it was image decoding interfering but it's difficult to say why. Then I took that same example, which by that point was optimized, and ported it to React Native in a few hours(where we have off-thread image decoding and timers I can trust) and the example was like butter. Now of course, I had hand optimized the performance, but my point is that on the web, there was nothing I could do, and with React Native, there was something I could do to make animations smooth. This is not to say you should be doing animations in JS, but if you want highly customizable interactions that can be immediately stopped by a touch processed in JS, you should try it out and see how it feels. For things that are "fire and forget", or platform specific, you should try using CoreAnimation/keyframes etc which protects the animation from your business logic.
- mlvljr 12y ago
  Interestingly, this comment, while probably being of the most technical detail / value in the thread, was downvoted by someone :)
- akrymski 12y ago
  what's wrong with -webkit-overflow-scrolling: touch? doing scrolling in js is so last year.
  - peterhunt 12y ago
    You can't build the equivalent of UITableView (which is a very important component in almost any iOS app) without frame-by-frame scroll events.
    - jordwalke 12y ago
      Exactly. Customizing exactly how a header bar "sticks" to the top when it hits a certain point, cannot be done with any built in browser scroller. The same is true of any animation that should happen in sync with the scrolling itself (think like a parallax fade/scale animation etc).
      - akrymski 12y ago
        What most apps need can be done by listening to touch events instead of scroll events. Eg hiding the top bar when user started scrolling down and so on. I can't even think of an app that has a parallax effect. If your app is required to have complex animations then web tech is not the right tech choice in general imo
    - akrymski 12y ago
      How so? Which feature of the UITableView can not be replicated in JS? I'm struggle to think of one. Swipe left/right to remove rows in a table can be done with touch events. What am I missing?
      - jordwalke 12y ago
        I think you're not being specific enough. I am claiming they can perfectly be recreated in JS, just not within a mobile browser at the moment.
        akrymski 12y ago
        I do mean within a mobile browser. We have a pretty large app inside Cordova, and I've yet to get stuck where there's something I can't recreate. Would be interesting to see an example where a mobile browser falls short.

jordwalke 12y ago

Yes, in browsers, JS animations are still hard (I might even say impossible to do well for large apps with a lot going on). One anecdote: I spent a month trying to build a 60fps scrolling list view in JS from scratch (JS driving all the animations). No matter how hard I tried, I couldn't make it work on the web. I believe it was image decoding interfering but it's difficult to say why. Then I took that same example, which by that point was optimized, and ported it to React Native in a few hours(where we have off-thread image decoding and timers I can trust) and the example was like butter. Now of course, I had hand optimized the performance, but my point is that on the web, there was nothing I could do, and with React Native, there was something I could do to make animations smooth. This is not to say you should be doing animations in JS, but if you want highly customizable interactions that can be immediately stopped by a touch processed in JS, you should try it out and see how it feels. For things that are "fire and forget", or platform specific, you should try using CoreAnimation/keyframes etc which protects the animation from your business logic.

mlvljr 12y ago
Interestingly, this comment, while probably being of the most technical detail / value in the thread, was downvoted by someone :)
akrymski 12y ago
what's wrong with -webkit-overflow-scrolling: touch? doing scrolling in js is so last year.
- peterhunt 12y ago
  You can't build the equivalent of UITableView (which is a very important component in almost any iOS app) without frame-by-frame scroll events.
  - jordwalke 12y ago
    Exactly. Customizing exactly how a header bar "sticks" to the top when it hits a certain point, cannot be done with any built in browser scroller. The same is true of any animation that should happen in sync with the scrolling itself (think like a parallax fade/scale animation etc).
    - akrymski 12y ago
      What most apps need can be done by listening to touch events instead of scroll events. Eg hiding the top bar when user started scrolling down and so on. I can't even think of an app that has a parallax effect. If your app is required to have complex animations then web tech is not the right tech choice in general imo
  - akrymski 12y ago
    How so? Which feature of the UITableView can not be replicated in JS? I'm struggle to think of one. Swipe left/right to remove rows in a table can be done with touch events. What am I missing?
    - jordwalke 12y ago
      I think you're not being specific enough. I am claiming they can perfectly be recreated in JS, just not within a mobile browser at the moment.
      - akrymski 12y ago
        I do mean within a mobile browser. We have a pretty large app inside Cordova, and I've yet to get stuck where there's something I can't recreate. Would be interesting to see an example where a mobile browser falls short.