React and Hammer to build smooth swipe slider for mobile


I started to learn React a few days ago, but today I learned a lot. Ten hours of coding and fifteen minutes to take a break and eat.

This morning I had seen PhotoSwipe, and it had amazing performances. First I had though it is canvas, but it was NOT. I just needed to make my own, with same performances, and I thought it would be easy. I planned to use PhotoSwipe in my project, but it is complicated to customise to my specific needs.

I had wanted to get better in React and to see how Hammer works, so I chose Hammer, React and jQuery. The first prototype was made with jQuery and Hammer only, two predefined slides, lots of constants but it worked great on swipe left on a laptop.

Then I had included React and built React component. I was using Angular 1 before, and I must say that React is much more intuitive. Learning curve is higher than other front-end frameworks, and I like components. First time I heard about React I though it is silliness, but now I am changing my mind. There were few things I had not knew how to do, but I learned fast. Moment of truth, I opened a page on mobile, and it had much lower performance than PhotoSwipe.

Pain and sweat to get smooth performance. I had thought it was because of jQuery, so I removed it. That was hard. React + jQuery = super easy, React = pretty hard & lots of things to learn. I needed to replace $(node), css(), animate() and all these great and simple methods. I needed to rewrite all of it on "React way". Do you know that React has setState(), I didn't, I found out it is only way to manipulate with inline styles dynamically. Next challenge was children problem. I could not figure out how to get DOM node of children (look at the solution at the StackOverflow). I learned a lot about React. I ran on my mobile and again disappointment, still not fluid, I was losing hope. I tried to optimise JavaScript code, but there was still the same problem.

I was moving slides by changing "margin-left". I had done research, and I get an idea to replace "margin-left" with "transform: translate3d()". Eureka! It works!

I just found performances tests
As you can see "transform: translate3d()" is much faster than "margin-left" (35 times faster on my Chrome 45 on Ubuntu).

You can try component on mobile phone
it is in the early alpha stage; there is a lot of to do, but it is fast and smooth as I like.

You Might Also Like

0 коментара