4 ms·

Very cool! I'll keep an eye on your work!

azakai 12y ago
Me too. I'd love to chat more about this with both of you, this seems like a direction definitely worth exploring. Maybe we could set up a github project for it? Or talk in an issue on your existing repo, nwienert?
- nwienert 12y ago
  I'd like to see a github repo. You can hit me up on twitter, info in my profile. I think even just finding the right library to make using webworkers + npm + webpack would be great to start, because honestly its all the other stuff that slows down the thread. React can run on the main thread for the most part. Some reading: https://news.ycombinator.com/item?id=6982485 https://news.ycombinator.com/item?id=6982485 http://stackoverflow.com/questions/18056922/is-there-a-way-to-create-out-of-dom-elements-in-web-worker http://stackoverflow.com/questions/18056922/is-there-a-way-t... Edit: webpack + webwoker: https://github.com/webpack/webpack/tree/master/examples/web-worker https://github.com/webpack/webpack/tree/master/examples/web-...
  - azakai 12y ago
    Cool, I set up a repo and started a wiki on it, https://github.com/kripken/worker-ui/wiki https://github.com/kripken/worker-ui/wiki Not familiar with webpack, will take a look.
    - peterhunt 12y ago
      If you're interested in doing it with React, here's a video explaining how to do a custom backend: https://www.youtube.com/watch?v=eNC0mRYGWgc https://www.youtube.com/watch?v=eNC0mRYGWgc You basically need to change BackendIDOperations and ReactEventListener to send/receive messages vs talking to the real APIs. It's already set up in the codebase to do this (because it actually worked at one time). Webpack, per usual, already thought of this and has an answer for you :) https://github.com/webpack/worker-loader https://github.com/webpack/worker-loader
- jlongster 12y ago
  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.
- spicyj 12y ago
  Also worth looking at some ideas we have for doing cross-thread component hierarchies in React: https://github.com/reactjs/react-future/tree/master/05%20-%20Workers https://github.com/reactjs/react-future/tree/master/05%20-%2...

Me too. I'd love to chat more about this with both of you, this seems like a direction definitely worth exploring. Maybe we could set up a github project for it? Or talk in an issue on your existing repo, nwienert?

nwienert 12y ago
I'd like to see a github repo. You can hit me up on twitter, info in my profile. I think even just finding the right library to make using webworkers + npm + webpack would be great to start, because honestly its all the other stuff that slows down the thread. React can run on the main thread for the most part. Some reading: https://news.ycombinator.com/item?id=6982485 https://news.ycombinator.com/item?id=6982485 http://stackoverflow.com/questions/18056922/is-there-a-way-to-create-out-of-dom-elements-in-web-worker http://stackoverflow.com/questions/18056922/is-there-a-way-t... Edit: webpack + webwoker: https://github.com/webpack/webpack/tree/master/examples/web-worker https://github.com/webpack/webpack/tree/master/examples/web-...
- azakai 12y ago
  Cool, I set up a repo and started a wiki on it, https://github.com/kripken/worker-ui/wiki https://github.com/kripken/worker-ui/wiki Not familiar with webpack, will take a look.
  - peterhunt 12y ago
    If you're interested in doing it with React, here's a video explaining how to do a custom backend: https://www.youtube.com/watch?v=eNC0mRYGWgc https://www.youtube.com/watch?v=eNC0mRYGWgc You basically need to change BackendIDOperations and ReactEventListener to send/receive messages vs talking to the real APIs. It's already set up in the codebase to do this (because it actually worked at one time). Webpack, per usual, already thought of this and has an answer for you :) https://github.com/webpack/worker-loader https://github.com/webpack/worker-loader
jlongster 12y ago
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.
spicyj 12y ago
Also worth looking at some ideas we have for doing cross-thread component hierarchies in React: https://github.com/reactjs/react-future/tree/master/05%20-%20Workers https://github.com/reactjs/react-future/tree/master/05%20-%2...