Slide 1
Slide 1 text
The new FT.com web app
We’ve got a website for that
Andrew Betts, Assanka
Slide 2
Slide 2 text
THERE WAS THE WEB
In the beginning
Slide 3
Slide 3 text
Great stuff about the web
• Openness
• Community ownership
• Interoperability
• Accessibility
• Freedom
• Universal access
• Low regulation
Slide 4
Slide 4 text
WAP
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Great stuff about apps
• Ease of use*
*I'm only counting “information apps” developed for all mobile
platforms, so there are no development speed benefits and
hardware integration is unnecessary
Slide 8
Slide 8 text
Over-scroll
to reload
Slide 9
Slide 9 text
Swipe navigation
Slide 10
Slide 10 text
Pinch to zoom
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Big, easy to read
buttons
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Bad stuff about apps
• Expensive to build for multiple platforms
– iOS, WebOS, WinPhone, Android, QNX, BBOS
• App Store fees
• Loss of control over customer data
• No control over distribution channel
promotion
Slide 15
Slide 15 text
MAKE THE WEB AS EASY TO USE
AS AN APP?
Couldn’t we just…
Slide 16
Slide 16 text
There is a video here
To view the video, visit
http://www.youtube.com/watch?v=JTywh4QJWMM
Slide 17
Slide 17 text
The challenges
• Layout
• Offline use
• Navigation and interaction
• Change of mindset (remember WAP?)
Slide 18
Slide 18 text
Layout
• Flowed columns
• Content balancing
• Podcast player
Slide 19
Slide 19 text
Flowed columns
Slide 20
Slide 20 text
Flowed columns
Headline
Media
insert
Media
insert
Slide 21
Slide 21 text
Adobe webkit fork
Slide 22
Slide 22 text
Flowed columns
• CSS columns not good enough
• CSS3 Template Layouts would be awesome…
if anyone supported them
• Adobe webkit fork also awesome, but not in
iOS native webkit
• Solution we use: Measure the content and cut
it into positioned containers using JavaScript
Slide 23
Slide 23 text
Content balancing
Slide 24
Slide 24 text
Classifying devices by resolution
Slide 25
Slide 25 text
Podcast player
• HTML5 Audio player
embeds podcast
content
• But we need audio to
continue playing after
navigating away
Slide 26
Slide 26 text
Continuous play
Slide 27
Slide 27 text
Navigation and interaction
• Swiping between sections
• Snapping article pagination
• Progress spinners
Slide 28
Slide 28 text
Swiping between sections
Slide 29
Slide 29 text
Swiping between sections
Slide 30
Slide 30 text
WeinRE
pmuellr.github.com/weinre
Slide 31
Slide 31 text
Snapping article pagination
• Overflowed content panel
• Touchscroll container with snapping
Slide 32
Slide 32 text
Fastclick layer
• Touch is instant, click requires ~300ms linger
• Some taps are shorter
• 'Fastclick' layer to detect very brief taps,
convert to clicks.
• Used for devices that fire touch events
• Used eg for tapping through an article
• Disables interactions like double tap to zoom
Slide 33
Slide 33 text
Offline access
• Launching the app offline
• Making text content available offline
• Storing content images offline
• Analytics
Slide 34
Slide 34 text
Launching the app offline
• Ensure every resource the browser needs is in
the manifest
• Attach event listeners to manifest events to
allow progress feedback
• Manifest is atomic – download all or none
• Webkit manifest bug – obscure naming of the
manifest helps
• Set dynamic comment in manifest for dev
Slide 35
Slide 35 text
Check resource requests
Charlesproxy.com
Slide 36
Slide 36 text
Offline text content
• Manifest stores framework, ‘scaffolding’
• Need something else for editorial content
• IndexedDB is the emerging standard but not
supported by Safari
• Currently use SQLite
• Small database mode < 5MB
• Large mode requires consent for 50MB
• Use localStorage for index, as it's faster
Slide 37
Slide 37 text
Offline images
• Editorial images – too many and too temporary to
put in manifest. But binary data from SQLite can't be
put in an IMG tag
• Solution: Download images as base64 encoded
strings
• Store in SQLite
• Render as data: URIs
– 
• Currently looking at File API
Slide 38
Slide 38 text
Effects of using data URIs
• Operators don’t see images as images, so don’t
do nasty recompression
• Multiple images can be batched in one HTTP
response
• Response can be gzipped (resulting size is
comparable to size of original images)
Slide 39
Slide 39 text
Analytics
• Can’t use Google Analytics etc offline
• Instead log user actions into SQLite
• POST the log when requesting updated content
• Server-side, convert into an Apache-format
access log
• Remember: logs are never definitive. Offline stats
are reported on a variable delay.
Slide 40
Slide 40 text
Unresolved problems
• SSL indicator / padlock
• Social media integration
• Offline adverts
• Automated QA
Slide 41
Slide 41 text
What have we learned?
• Ease of use is absolutely critical
• The web can deliver on this almost as well,
and in some cases, better, than native
• Web apps retain all the benefits of the web
that you give up when building native apps
• So don’t build native apps. Build web apps!
Slide 42
Slide 42 text
Questions?
• Andrew Betts
• [email protected]
• You should follow me on twitter here:
@triblondon
• Assanka is hiring (assanka.net/jobs)