
Daring Fireball: PastryKit - sant0sk1
http://daringfireball.net/2009/12/pastrykit
======
ryankshaw
I pulled everything down and started to play with it. it looks really
interesting. I put it up on github so you can go check it out there
<http://github.com/ryankshaw/PastryKit>

(remember, dont actually use that code for your own website, I'm sure apple
wouldn't like that), the only reason I put it up on github is because I found
it interesting to learn from and thought others might too.

Some interesting notes:

1\. the redirect if you are not coming from an iphone does not happen in this
code. it is something done on the server. it has nothing to do with these
PastryKit javascript files.

2\. I took all of the minified css files and js files and made an uncompressed
version next to it with the name <filename>.uncompressed.js for the css files
I converted it to SASS because I like that and I can see better visually what
they are doing with it. (ps, if nothing else, look at the css they are using,
there is some awseome webkit-proprietary stuff you can do with your styles if
you are targeting only the iPhone)

Some cool things:

1\. check out the stuff they are doing with the html5 databases in
classes/datacontroller-database-uncompressed.js that is pretty cool. 2\. the
loading image they do with pure css ( @-webkit-keyframes loadingImageAnimation
) in stylesheet.css is pretty cool.

~~~
anmldr
>I'm sure apple wouldn't like that. What I don't understand is WHY we can't
use it since they have this statement. "Copyright (C) 2006, 2007, 2008 Apple
Inc. All rights reserved. Redistribution and use in source and binary forms,
with or without modification, are permitted provided that the following
conditions are met: etc. etc. Linda

------
mortenjorck
As much as I'd like to think Apple will officially announce PastryKit at some
preview event Q1 2010, it just doesn't seem very Apple-like to do _anything_
at this point that could dilute the ongoing popular attention to the App
Store.

Actually, maybe that's it: Perhaps PastryKit was developed originally as a
"plan B" in case the App Store didn't take off. Its development probably
tracks back to before 2007, when third-party native development was still in
question, and was kept in the back pocket as the App Store was launched.

My guess is it will stay a stealth project unless the voice of devs burned by
App Store policies becomes too loud and Apple needs to bring out an
alternative.

~~~
DLWormwood

        Perhaps PastryKit was developed originally as a "plan B" in case the
        App Store didn't take off. Its development probably tracks back
        to before 2007, when third-party native development was still in
        question, and was kept in the back pocket as the App Store
        was launched.
    

Actually, given the history of 3rd party development on the device, I think
this was "Plan A" and the App Store was "Plan B." When you watch the first
couple of Stevenotes that came during and after the iPhone's public
announcement, you'll note that Apple was originally expecting developers to
_only_ make web apps. But there was a big push-back from developers
complaining that they couldn't make apps good enough to stand side-by-side
with the built-in ones. (And people also pointed out the pointlessness of
advertising to devs that the iPhone was using the same technologies as OS X if
they couldn't be directly accessed.)

~~~
roc
Apple employs a big pile of talented individuals, but I highly doubt they went
from developer pushback in Summer 07 to the SDK in Spring 08 (when the SDK
started hitting Apple's partners). Particularly considering the huge changes
to the API calls between iPhone's OS 1 and 2.

It looks to me much more like the SDK was dependent on an OS build that just
wasn't ready for primetime in 2007 and Steve was just trying to spin what they
had as something you want.

------
joubert
Momentum scrolling makes huge ergonomic difference.

The batteries on my Magic Mouse (which has momentum scrolling) are dead, so
I'm using my Mighty Mouse today, and boy, is it a drag.

------
blasdel
Could this have been originally implemented in the period before the iPhone
was publicly released, when Apple was planning on implementing all the simpler
'native' apps this way?

~~~
kneath
Remember that until iPhone OS 2.0, we didn't have: CSS Animations or HTML5
local-storage stuff. So it's really not that likely.

~~~
blasdel
You don't think they could have been iterating it?

It could also have been developed during the initial post-launch pre-app-store
period when they were encouraging webapps, but not released publicly until 2.0
or later.

------
whalesalad
A link to the source of PastryKit. Github seems to be kinda lame with the
syntax coloring =/

Beautified Gist: <http://gist.github.com/257514>

Compacted Orig: [http://help.apple.com/ipodtouch/3/mobile/dist/PastryKit-
ug-c...](http://help.apple.com/ipodtouch/3/mobile/dist/PastryKit-ug-
compact.js)

[EDIT] A slightly nicer to read version with better coloring -
<http://dpaste.de/n2CR/>

------
cpr
Fascinating--it looks like they've implemented a micro-Objective-J-like
language and then, based on that, implemented a whole micro UIKit in that
language.

~~~
seiji
micro-Objective-J might be a stretch (everything looks like straight JS to
me), but they have a lot of Cocoa JS libs floating around:

[http://help.apple.com/iphone/2/Contents/Frameworks/Foundatio...](http://help.apple.com/iphone/2/Contents/Frameworks/Foundation/Foundation.js)
[http://help.apple.com/iphone/2/Contents/Frameworks/Foundatio...](http://help.apple.com/iphone/2/Contents/Frameworks/Foundation/NSObject.js)
[http://help.apple.com/iphone/2/Contents/Frameworks/Foundatio...](http://help.apple.com/iphone/2/Contents/Frameworks/Foundation/NSXMLDocument.js)
. . . etc

oh, and <http://help.apple.com/iphone/2/Parts/license.txt> too.

------
csbrooks
Related note: Has anyone tried using this: <http://code.google.com/p/iui/>

~~~
cpr
Yes, that's been around for quite a while.

We used it for the built-in help files in our iPhone app (Grafly, a graphing
calculator).

~~~
csbrooks
Ok, thanks.

I'm wondering how users on mobile browsers which _aren't_ iPhones would react
to that interface...? (And also, how well it would render.)

~~~
rufo
It works well enough on Android and Palm Pre, although without the fancy
OpenGL-accelerated CSS transforms (it gracefully degrades to more traditional
CSS animations if WebKit transitions are not available).

The underlying HTML is just a bunch of unordered lists and divs, and all the
advanced behavior is via CSS and Javascript - if you want to make sure it'll
work on less-capable browsers it's doable, but you'll need to keep an eye on
how you're loading things.

You may wind up needing to to browser sniffing on the server and serving up
different HTML if you see various browsers; we didn't get that far in the
project we worked on.

------
GeneralMaximus
Apple recently did something weird with the Cocoa documentation. It seems like
the titles of and links to all API docs and user guides are stored on one
gigantic page. They then invoke some JavaScript magic to search through the
titles of all documentation. The end result is that the page is slow and jerky
in Safari, _extremely_ slow and jerky in Firefox and refuses to work properly
in Opera.

I wish people stopped using JavaScript to do things it wasn't supposed to do
:(

EDIT: Momentum scrolling is delicious. I'm really enjoying this :D

------
sant0sk1
PastryKit looks cool, but jQTouch is cool _and_ freely available to use today.
Check it out if you haven't:

<http://www.jqtouch.com/>

~~~
akkartik
OP referred to it, and pointed out it has no momentum scrolling.

------
rufo
The one problem with super-fast-scrolling: even with an iPhone-designed web
app, you can easily go past the boundary that Safari has rendered and wind up
with the checkerboard pattern.

------
Poiesis
The linked iPhone user guide (in fact the very default one from my iPhone)
does not now load on my iPhone. On Firefox Windows I get redirected to
<http://support.apple.com/manuals/iphone/>. Don't know if that's in reaction
to the article or what.

------
CytokineStorm
This page is easy to break, at least using Safari on a Mac. Just pull the top
list item, Getting Started, down the screen a little. Now when you try to
scroll the gray scroll bar on the right moves but the content doesn't scroll.

Still, this is a very cool piece of JavaScript.

~~~
gabrielroth
Being able to break it on a Mac isn't really relevant, though, since the only
way to access it on a Mac is to deliberately spoof a mobile browser.

------
seldo
I've just tried this out and it is indeed deeply cool, although the scrolling
even on my 3GS is not quite native-like. I would love to know how they're
managing fixed-position toolbars; has anyone reverse-engineered that bit yet?

~~~
rufo
The page itself isn't actually scrolling. There are Javascript event handlers
that are capturing the swipe events and adjusting the positioning of the main
content block via WebKit CSS transformations and/or standard CSS positioning.
Since it's never actually scrolling the page, the toolbars don't change
position.

There are a few JS demos that show this off floating around for iPhone, though
they tend to have a variety of potential problems. (Intercepting every touch
event via Javascript and handling it yourself results in a lot of edge cases
you need to handle; see what happens in the User Guide if you drag your finger
off the edge of the screen...)

~~~
seldo
Of, of course. He even mentions this in the article.

The "sticking" problem when you drag your finger off the bottom of the screen
doesn't happen when you add the app to your home screen and launch it that way
(because there's no safari menu at the bottom of the screen, presumably).

------
sandGorgon
is there a non-Mac iphone emulator which can be used to test out a webapp ?

It does'nt kinda make sense if I have to have a Mac and iPhone to develop web
apps for the iphone!

~~~
andrewf
I don't know how close Safari on Windows will get.

But really, "feel" is a huge part of the interface and you should be testing
on a real device for any handheld dev. An iPod Touch is your cheapest option
here.

------
andreyf
The big question I have is how they disable the top URL location bar... didn't
catch anything in first skimming of the code. Anyone else have better luck?

~~~
fendale
I haven't looked at the code, but it may be by scrolling the window so it goes
out of view and then setting up the fixed menus etc.

I am totally guessing based on the comment in the article that if you double
tap the top of the screen it brings the address bar into view, sort of
implying it was just scrolled away.

~~~
andreyf
Looks like you're spot on, good call. I'd misunderstood the other comment, as
you only have to tap the top of the screen once to scroll to the top. I wonder
if they could just capture and prevent onscroll?

    
    
        PKUtils.disableScrolling = function (a) {
          a.stopPropagation();
          window.addEventListener("touchmove", PKUtils.preventEventDefault, true);
          window.addEventListener("touchend", PKUtils.restoreScrollingBehavior, true);
          window.addEventListener("touchcancel", PKUtils.restoreScrollingBehavior, true)
        };

------
peregrine
When I run this on my G1 with the iPhone user-agent it doesn't look anything
like this. I guess I don't see why they would specifically change it here.

~~~
DomesticMouse
My suspicion would be that your G1 doesn't have all the magic webkit
extensions that are in safari mobile.

------
bryx
Anyone figure out how to actually use Pastrykit to hide the address/nav bar?

------
llimllib
> But on the whole this User Guide app and the PastryKit framework are rather
> amazing. The $64,000 question, though, is whether PastryKit is something
> Apple intends (or that a team within Apple hopes) to ship publicly. It seems
> like a lot of effort to build a framework this rich just for this iPhone
> User Guide, so I’m hopeful the answer is yes.

Is he talking about a different Apple than the one that I know of?

