

Scrollability - mynameisraj
http://joehewitt.github.com/scrollability/

======
cfinke
Joe has been live-tweeting his development of this library today:
<http://twitter.com/#!/joehewitt>

11:55 AM: "I feel suddenly motivated to write a tiny JS library that does
scrolling right, or at least as close as possible."

10:20 PM: "I think we're ready to demo."

Now that's gumption.

------
nupark2
While improving the web application experience is commendable, there is still
simply no replacement for the native components. Broadly speaking, investment
in mobile webapps largely seems to be about improving the entrenched web
developer's experience, rather than the actual user's experience.

Insofar as Apple continues to invest in UI R&D, a clone of their UI's look and
feel will always lack fidelity to the original, sit in the uncanny valley when
approached by users, and require ongoing maintenance to track upstream changes
as best as possible.

Additionally, fluid scrolling on iOS devices is resource intensive and
requires a very careful attention to performance details; I've yet to see
HTML5 UIs scroll as smoothly as a tuned native UI.

~~~
JoelSutherland
Mobile processing power is doubling annually, GPU speed at an even faster
rate. Hardware acceleration for CSS transforms is only starting to get good.
(No negative values on cubic-bezier timing functions!)

No, web components haven't met native ones yet, but they only need to achieve
60 fps. They will get there, it's a safe bet.

~~~
lurker19
By the time HTML is as good as native is, native will have moved on to
something else, like holograms. Look what happened on the desktop: after 10
years webtech finally became usable as a UI, just in time for everyone to jump
to mobile and set performance back another 10 years.

------
mbrubeck
I don't want to pick too much on this project since it's in very early
development, but this repeats a mistake that's also found in more mature
libraries like iscroll.js: <https://github.com/cubiq/iscroll>

The problem is that it uses CSS that works only in WebKit, but does not fall
back gracefully in any other browser. It depends on CSS3 2D Transforms.
Because the 2D Transforms spec is not yet a Candidate Recommendation, browser
vendors currently implement it with vendor prefixes in case the spec changes
before it's finalized. 2D Transforms are implemented in recent versions of IE
(-ms-transform), Opera (-o-transform), Gecko (-moz-transform), and WebKit
(-webkit-transform). However, the library uses only -webkit-transform.

That wouldn't be so bad, except that it does this in a way that potentially
breaks the page in other browsers. For example, mobile Firefox supports
overflow scrolling without any need for libraries. In the latest nightly
builds of mobile Firefox 6 (which support touch events), adding iscroll.js to
your page will actually _break_ scrollable elements that work fine without the
library.

The solution is two-fold: (1) If you are using vendor-prefixed APIs you can
easily support more implementations, and (2) do feature detection to fail
gracefully on implementations that you don't support. And yes, I plan to
submit patches to these projects to address these problems.

(disclosure: I am a mobile Firefox developer)

~~~
MrNibbles
Its easy to detect these features, ideally one would only load this lib if the
features are supported.

The -webkit-transform: translate3d(0,x,y) (3D, not 2D transforms) property
forces the element to be hardware accelerated under mobile safari, without
this, the redraw would be around 10 times slower. This is the whole point of
the library (hacking around a known issue in mobile safari)

Besides, he states that the code requires iOS. It is not a mistake to include
vendor specific code in this way when targeting a specific platform for
optimisation.

------
voidfiles
Previous coments about re inventing the wheel are correct, but not because
this has been done natively, but because this has been done before, and in a
multiple platform way.

The best thing he could do is work with others. Not go all lone wolf on the
very people he said he wanted to help.

~~~
newhouseb
I agree, as a user of iScroll I'm puzzled as to why he didn't just fork
iScroll. He mentioned that he didn't like how it "felt" on twitter but I would
imagine the formulas used to calculate momentum are, relatively speaking, a
_very small_ part of the iScroll code.

As an aside, I think that github might be able to help a lot with encouraging
collaboration in light of so many duplicate projects by working on better ways
to discover projects (either by better search indexing, better SEO or
otherwise). And as a disclaimer: I think github is one of the most innovative
companies today, so this is by no means an attempt to point fingers, rather an
observation that they have a huge opportunity to really change how OSS works.

------
benreesman
this is awesome! it's really very close to a native experience (on iphone 4 at
least). my hat's off to mr hewitt. for a comparable experience check out gmail
in mobile safari, it's also very convincing.

apologizing for my ignorance, does anyone know for sure why these libraries
are necessary? it seems like it wouldn't be hard to offer a standard way (or
even a meta tag, i appreciate that pinch zooming is a reasonable default) to
get smooth accelerated scrolling of fixed and/or overflow:auto containers.

~~~
joehewitt
Libraries like these should not be necessary, but since Apple has not
implemented proper scrolling of elements and iframes, we're left to do it
ourselves. Perhaps iOS 5 (just two weeks until wwdc!) will solve the problem
and make this project obsolete (I hope so).

Even if they do, libraries like these may still be necessary for more advanced
scrolling mechanisms like those that snap to page boundaries or involve
scrolling/zooming hybrids (like photo viewers common to many apps).

~~~
benreesman
fantastic work and thanks for the quick reply. i'm eager to show this to some
of the guys i work with as they're working on similar stuff.
<http://www.npr.org/webapp> loaded on an ipad 2 is pretty slick, particularly
in terms of multi-finger scrolling.

i'm sure i speak for a lot of people when i say thanks for working to advance
the prospect of truly first-class web applications on mobile. these are
exciting times!

------
mnutt
Apple has a patent on momentum-based touch scrolling that looks like it covers
this:

<http://reviews.cnet.com/8301-19512_7-20015237-233.html>

~~~
mckoss
Given that momentum based mouse scrolling existed in the prior art, I doubt
that the addition of touch would pass the non-obviousness test in court.

------
chubs
Sounds like a good thing. iScroll is another option too, however if this is
simple and small, it could be a winner.

~~~
rudiger
Link: <http://cubiq.org/iscroll-4>

------
ericflo
Looks promising! It doesn't work properly yet on the Droid Incredible, but I'm
sure he'll work out the kinks.

~~~
nrbafna
it is supposed to be for iOS.

~~~
ericflo
He updated it to say that after I made my comment:
[https://github.com/joehewitt/scrollability/commit/a7eac85ad3...](https://github.com/joehewitt/scrollability/commit/a7eac85ad3b497d4a3ecab431a4c15f7f59b7407)

------
aheilbut
Doesn't seem to work on a desktop, in Chrome.

~~~
cleverjake
its not supposed to. its for mobile devices that lack the ability to scroll
inner divs

~~~
MatthewPhillips
You can scroll inner divs on iOS, with 2 fingers.

~~~
cleverjake
Of course you can. But the fact that you have to know the sentence "you can
with two fingers" in order to use it can, at least in my mind, be making the
point that that is unintuitive to people. The average user doesn't know
anddoesnt care, they just want it to be consistent regardless of whether or
not you have a footer on your page.

------
koushd
Joe has done some amazing development in his time. But, honestly, that page
was a real eye sore on my phone. It ran like crap. If such a notable engineer
can only develop an app of lacking caliber with the html/javascript, what does
that say for web development on mobile?

PS, yes, I'm that Koush of Android. I'm a little opinionated when it comes to
mobile development. :)

~~~
joehewitt
I assume you're testing on an Android device then... I don't have one to test
(but I will soon), so I'm not surprised it doesn't perform well there.

Anyway, the current code is trying to replicate the feel of iOS scrolling. An
Android implementation should try to replicate the feel of Android scrolling,
which is much different. I will get around to it...

------
jordanekay
This is some impressive work, but at the end of the day it's just another
unecessary attempt to reinvent the wheel, a wheel that will always lag behind
the original. The time he spent reverse engineering UITableView could have
been spent doing useful things with actual UITableViews.

Web apps are hacks.

~~~
olivercameron
That is incredibly short sighted. The web is universal, iOS is not.

~~~
jordanekay
Please, tell me where to find these mobile web apps that are superior to their
native iOS counterparts.

~~~
OpieCunningham
I'll second that "incredibly short sighted" judgement. It's efforts like
Hewitts, which works exceptionally well for a days work, that lead to superior
mobile web apps.

