• Stars
    star
    446
  • Rank 97,888 (Top 2 %)
  • Language
    JavaScript
  • Created about 11 years ago
  • Updated almost 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React photo viewer for mobile

React touch demos

unmaintained

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.

More Repositories

1

react-howto

Your guide to the (sometimes overwhelming!) React ecosystem.
11,612
star
2

webpack-howto

JavaScript
10,119
star
3

rwb

JavaScript
727
star
4

react-webpack-template

JavaScript
549
star
5

react-boilerplate

Boilerplate for creating a React npm package
JavaScript
544
star
6

ReactHack

React+Parse+Bootstrap Hackathon toolkit
JavaScript
249
star
7

react-server-rendering-example

Super-basic example of how server rendering works
JavaScript
221
star
8

webpack-require

JavaScript
198
star
9

react-one-hour-email

Build a very simple email client in an hour, step by step.
JavaScript
174
star
10

node-jsx

transparently require() jsx from within node
JavaScript
165
star
11

react-gss

JavaScript
155
star
12

langchain-github-bot

Python
143
star
13

react-raf-batching

A game-like batching strategy for React
JavaScript
134
star
14

loris

High-performance JavaScript UIs
JavaScript
133
star
15

react-tutorial

Code from the React tutorial
JavaScript
124
star
16

jsx-loader

JSX loader for webpack
JavaScript
108
star
17

famous-react

JavaScript
78
star
18

dagster-poor-mans-data-lake

Python
74
star
19

react-browserify-template

Quick template for building with Browserify + React
HTML
67
star
20

react-touch-lib

React component library for building inertial touch applications.
JavaScript
63
star
21

yologram

JavaScript
42
star
22

react-multiplayer

Multiplayer React with Firebase
JavaScript
40
star
23

morimodel

Models for Mori
JavaScript
38
star
24

react-xhr

JavaScript
37
star
25

react-tween

JavaScript
29
star
26

react-meteor-preso

JavaScript
26
star
27

react-classset

React.addons.classSet() packaged in npm
JavaScript
22
star
28

react-jqueryui

Wrap jQuery UI widgets in React components
JavaScript
22
star
29

django-reactify

Python
21
star
30

generator-react-library

Yeoman generator for React components
JavaScript
17
star
31

use-state-singleton

yet another redux alternative
TypeScript
15
star
32

dagster-github-stars-example

Python
15
star
33

rust-benchmark

JavaScript
14
star
34

js-css-loader

Define CSS in JS
JavaScript
13
star
35

commonjs-asset-spec

12
star
36

lockless

STM for Python
Python
11
star
37

ratelimiter

The easiest way to add rate limiting to your app
JavaScript
11
star
38

reactify-server-rendering

JavaScript
9
star
39

jsxc

experimental jsx command-line tool
JavaScript
9
star
40

staticify

Browserify all of your static resources
JavaScript
9
star
41

unrouter

JavaScript
8
star
42

zod-args

zod-args is the fastest way to throw together a simple CLI with TypeScript type checking.
JavaScript
8
star
43

sweetjs-loader

webpack loader for sweet.js
JavaScript
8
star
44

reacthack-core

JavaScript
8
star
45

dagster-script-to-assets

Python
6
star
46

sqlconfig

Python
4
star
47

oredev-workshop

JavaScript
4
star
48

rerequire

JavaScript
4
star
49

statics

static assets in npm
JavaScript
4
star
50

zod-json-rpc

TypeScript
4
star
51

generator-react-quickstart

Yeoman generator for React apps and libraries
JavaScript
3
star
52

sharable-components-prototype

JavaScript
3
star
53

react-ember-demo

JavaScript
3
star
54

react-main

JavaScript
3
star
55

ts-json-rpc

TypeScript
3
star
56

stylesheets

Client/server stylesheet management
JavaScript
3
star
57

reactify-server-rendering-tools

JavaScript
3
star
58

react-freezer

JavaScript
3
star
59

omgnosql

OMG! NoSQL!!!
Python
2
star
60

reactbars

DONT EVEN THINK ABOUT IT
JavaScript
2
star
61

dslpy

Domain specific languages embedded in Python
Python
2
star
62

jsxnode

JavaScript
2
star
63

react-graph

immutable client-side graph abstraction with great react integration. fulfills similar use cases to backbone.model
JavaScript
2
star
64

dagster-ml-example

Python
2
star
65

objectid

Python
2
star
66

reactpad

JavaScript
2
star
67

meteor-leaderboard-react

Meteor leaderboard example using React
JavaScript
2
star
68

htmldry

Don't Repeat your HTML
JavaScript
2
star
69

react-meteor

Meteor bindings for React, packaged for npm
JavaScript
2
star
70

browserify-bundler

JavaScript
1
star
71

dagster-data-sources

1
star
72

jsbs

JavaScript boot strap, or JavaScript bullshit, depending on what you prefer
JavaScript
1
star
73

jsonrpc2.0-cli

JavaScript
1
star
74

sketchpad

Python
1
star
75

text-to-pydantic

Python
1
star
76

odsc-talk

Python
1
star
77

inboxfeed

JavaScript
1
star
78

browserify-transform-server-side

JavaScript
1
star
79

ts-json-rpc-client

TypeScript
1
star
80

statics-stylesheets

JavaScript
1
star
81

rx-spinner

A simple reusable spinner component example
JavaScript
1
star
82

react-profiler

A simpler interface to ReactDefaultPerf
JavaScript
1
star
83

react-core

JavaScript
1
star
84

dagster-gitpod

Python
1
star