react-swipe-views icon indicating copy to clipboard operation
react-swipe-views copied to clipboard

Suggestions for lower end mobile devices. ?

Open darkyen opened this issue 10 years ago • 6 comments

  1. Can we lazy render the tabs somehow ? maybe by adding an addtional async parameter that tells the view to only render the content once the view has been first viewed this will save performance.
  2. Maybe use native snap scroll implementations when available for instance :http://dev.w3.org/csswg/css-snappoints/ Allows snapping of points natively in the scrollview, and saves performance on extremely low powered devices. *(Currently only supported by Microsoft devices)

darkyen avatar Jul 08 '15 22:07 darkyen

A big performance issue I see is that it triggers a full React diff and render cycle each frame while dragging, which is heavy for that kind of animation. I think it should probably only do full diffing for big state changes, and drag events should be handled at the DOM level outside of React.

I'd be happy to submit a patch if you like.

CaptainN avatar Apr 13 '16 13:04 CaptainN

Hi @CaptainN and thanks for weighing in. Unfortunately, I lack the time to maintain this library. However, I will do my best to review any pull request you shall submit.

damusnet avatar Apr 13 '16 13:04 damusnet

Sounds good. I have a few other ideas, such as correct throw physics for drag/drop paging.

I'm actively using this for a project, so I'll probably do a few other mods (including the React.Children PR I just submitted).

CaptainN avatar Apr 13 '16 14:04 CaptainN

Nice! I just added you as a collaborator. However I'll still have to publish to npm myself for now. Not sure how to share or transfer ownership there yet.

As you'll see, the build process and examples are quite cumbersome to maintain. Also, introducing react-router in the lib itself was a mistake in my opinion. I figured I'd take the time to get rid of react-router, upgrade react version, and cut a major version release as soon as I'd find the time. Feel free to make the project evolve as you see fit.

damusnet avatar Apr 13 '16 14:04 damusnet

@CaptainN you should check out swiper.js it performs really well on lower end mobile devices (Tested on Lumia 520).

I use it here https://github.com/darkyen/react-ui-components/blob/master/src/UITabsView.js along with more high performance react components.

darkyen avatar Apr 13 '16 14:04 darkyen

@darkyen Swiper.js looks pretty sweet. I'll probably clean up what I can here, and then look at that a bit more closely.

@damusnet I'll see about fixing up the issues I see (there seems to be some bugs with the current version of iOS for example), and I'll take a look at the router integration.

CaptainN avatar Apr 13 '16 14:04 CaptainN