14

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

PaulM
  • 3,281
  • 3
  • 28
  • 38
  • whoever downvoted this, leave a comment why? I don't see anything wrong with Paul's question. That said Paul, you probably should edit your question's title - "what tech does the FT web app use" is a better title. – makdad Jun 08 '11 at 23:00
  • 1
    Thanks for the downvote, but why? Edit: Sure the title has been changed. – PaulM Jun 08 '11 at 23:00
  • 1
    You might mention that FT stands for Financial Times. – Caleb Jun 08 '11 at 23:10
  • Heh, done and last edit. There is also a link there if people don't know what I'm talking about. ;) – PaulM Jun 08 '11 at 23:13
  • 2
    I think, this is a real question. – vikingosegundo Jun 08 '11 at 23:57
  • 1
    I think this is a real question too, though worded poorly. If this is not a real question, then maybe provide a link to a real question or something? Anyway, here is a link to a video of a talk that was given to the London Ajax Users Group, wherein the tech lead from Assanka, the dev shop that created the app, shows how they did it: http://vimeo.com/26604635 – fisherwebdev Oct 19 '11 at 23:25
  • Thanks for the link! Yes, this is in-fact a real question, although it was closed! ¬_¬ – PaulM Oct 20 '11 at 08:24

3 Answers3

5

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.

DanBeale
  • 310
  • 4
  • 15
Rowan
  • 630
  • 4
  • 10
4

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.

Brandon Zacharie
  • 2,320
  • 2
  • 24
  • 29
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.

vikingosegundo
  • 52,040
  • 14
  • 137
  • 178