What tech developed the "Financial Times Web App" for iPhone/iPad [closed]

Question

If you are unsure of what I am referring to, you can check it out here:

Can the FT Help Publishers Quit Their Apple Addiction?

So my question is (if anyone knows), what exact tech did they used to develop this? Did they use jQuery UI, jQuery Mobile, iOS specific stuff?

I'd love to know as I'm in the boat that I'd love an "app" for my site but I don't have the time to learn objective C or Java. So developing this same thing and tweaking it for the different devices seems like the way to go.

If you have any resources talking about the app, or if you answer the question can you please point to resources describing the tech to be more informative to other users like me.

Cheers

Answer 1

Brandon Zacharie has the general gist correct: the majority of it is hand-rolled. There's no single framework or library that captured exactly what was required or didn't have drawbacks of some kind. That said, there are two libraries being used:

• jQuery. Initial use of jQuery was quite a bit higher, but now it's pretty much used for only AJAX stuff.
• TouchScroll, a scrolling library for smoothly scrolling elements, is in use in a few places including the article views.

Much of the rest uses "HTML5" or webkit-specific tweaks; a lot of this stuff is covered by http://diveintohtml5.ep.io/ . As soon as you start using this stuff, however, you'll become aware that implementations even within the webkit-based browsers vary quite widely, and there's a lot of quirks; more so if you're trying to use hardware acceleration for transitions or accelerated compositing.

About the only iOS-specific stuff is the save-to-homescreen support; however as you may find if you go down the HTML5 route, even though support for many features is theoretically there across many platforms, for maximum performance and functionality you'll have to start doing user-agent sniffing and different code paths and approaches…

I think there'll definitely be improvements as approaches get finetuned and optimum techniques are discovered, and then we'll really see the rise of the libraries.

Answer 2

In short, they hand rolled what you see using HTML5, CSS3, and jQuery 1.5. They also make heavy use of WebKit specific stuff.

edit: note: I had to use Safari with my UserAgent set to 'iPad' to look at the source since they redirect traffic according to the UserAgent provided.

Answer 3

In your Safari (on Mac) go to Settings -> Advanced -> check on "Show Develop in Menu bar".

Now you'll find in the Menu "Develop" "User Agent". There you can change the UserAgent identification, that will be send to the server. So if the server delivers different versions to different User Agent you will be able to access it.

Once you activated the develop menu, you'll find "Inspect Element" at the context menu (right click or control click). Use this, to see the code in a nice way and check, what request are made and what additional resources are loaded.