petehunt / react-touch

React photo viewer for mobile

React touch demos

This demo uses ReactHack to build a high-performance, lazy-loading 3d intertial touch app targeted at the iPhone 5. It really shows off what web technologies can do these days.

Software being used

• React JS library (so easy to use, and performance is great without even trying!)
• Zynga Scroller for touch gesture physics (not in repo)

Why target iPhone 5?

• I know the GPU perf characteristics
• Android touch event latency sucks vs iPhone
• I know the screen size so I can avoid image resizing

FAQ

• Why is this cool? It performs well and has native-like interactions (as in you can partially open-close the left nav). To do this you need to animate every frame with JS (no CSS transitions or animations here!)
• Why doesn't it work without JS enabled? Because this is a JS tech demo. React does support server rendering so I could render to a static page with little to no code changes though.
• The markup isn't semantic! The semantic-ness can be improved for sure. But we should care less about semantic-ness and more about performance or else the web will die at the hands of native mobile SDKs.
• What's React got to do with it? React's one-way data binding is so performant that we can write the whole app declaratively. I don't think it's easy to do in other data binding frameworks.

react-touch's Issues

License

I've used this repo as inspiration for a project, but was wondering if you'd mind if I used some code for the frosted glass stuff? And if you'd like attribution in a certain way?

`npm install` => [email protected] wants react@~0.9

Hi, awesomest demo! Respect from France.

npm install is currently not working. It halts as react-touch wants react ~0.9 as peerDependency.

Using react-touch from git://github.com/nicholasstephan/react-touch-lib and latest react version fixed it for me.

Zynga scroller doesn't need the Raf.js polyfill.

The index.html page includes the Raf.js polyfill. This commit removed the Raf.js polyfill from ZyngaScroller. This issue hints that including the polyfill as a global caused some grief (in FF3.6 and IE8). The polyfill code was incorporated into Animate.js, making the inclusion of Raf.js redundant.

Over here I've wrapped the Scroller.js and Animate.js with UMD and published to npm under scroller. Would you be receptive to a pull request? That is,

• Swap ZyngaScroller for the packaged one.
• Remove the Zynga Scroller script tags from index.html.