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
https://jsperf.com/translate3d-vs-xy/57
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
http://lukicdarkoo.github.io/examples/react-light-swipe/index.html
it is in the early alpha stage; there is a lot of to do, but it is fast and smooth as I like.
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!
https://jsperf.com/translate3d-vs-xy/57
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
http://lukicdarkoo.github.io/examples/react-light-swipe/index.html
it is in the early alpha stage; there is a lot of to do, but it is fast and smooth as I like.
Došao sam na fakultet, "naučio" gomilu gluposti, izgubio pola godine života i tek sam sada počeo raditi nešto korisno. Iz Arhitekture računara imao sam priliku da radim projekat kod kuće za 30 bodova što sam jedva dočekao. Nakon duže rasprave sa asistentom odlučio sam da pravim igricu u C++ koristeći SDL biblioteku.
Iako sam "fan" modernih programskih jezika ovog puta zbog zahtjeva srednje škole morao sam da programiram PIC mikrokontrolere u PicBasicu. Elektroniku i programator za PIC sam kupio na eBayu. Uspio sam sve sam sklopiti, i hardver i softver. 
