Developing the FT Web App


Published on

Video and slides synchronized, mp3 and slide download available at

Robert Shilston demoes an FT app, discussing the technology choices and architectural approaches that have been used to solve some of the most difficult technical challenges faced in web development. Topics covered will include layout and interactions,native wrappers,testing and QA, and how to manage regular, reliable. Filmed at

Robert Shilston is a director of the FT's Labs division, which works on experimental web technologies and produces products such as the FT web app. He is currently responsible for the technical delivery of the FT web app and its hosting infrastructure.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Developing the FT Web App

  1. 1. The FT eb pp: Coding responsively Dr Robert Shilston ( Director, FT Labs (@ftlabs)
  2. 2. News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on! /FT-html5
  3. 3. Presented at QCon London Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide
  4. 4. Historical comparison 1880 1900 1920 1940 1960 1980 2000 2020
  5. 5. orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing Nesprint Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  6. 6. orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing ‘Traditional’ eb Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  7. 7. orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing pps Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  8. 8. HTML5 is not a ‘mobile thing’. It’s not an alternative to native apps. It’s a ay of making better ebsites.
  9. 9. elcome back to the eb The FT eb app provides a touch optimised user experience ithout native code.
  10. 10. Sometimes it’s hat e’ve done But e’ve learned a lot, so to be honest sometimes it’s hat e ould do if e did it again.
  11. 11. genda •  Coding responsively – Layout and interactions – Connection state – OS •  Development process – Branching and feature flags – Testing and deployment
  12. 12. hat is an app? But first, let’s consider:
  13. 13. hat is an ‘app’? •  Built for a single platform •  In an app store •  ritten in native code •  Built for mobile •  Designed for touch interactions NO THNKS
  14. 14. hat an ‘app’ is to us: app (n). a distributed computer softare application designed for optimal use on specific screen sizes and ith particular interface technologies,
  15. 15. hy code responsively? So let’s start:
  16. 16. Ne devices
  17. 17. + Desktop Click Point Ho an app might run Laptop Type Move Tablet Touch Phone Speak In car screen Listen eroplane TV KioskGlasses Games console See Think? atchBillboard
  18. 18. Layout and interactions •  Screen size – Not the same as resolution •  Instant touch feedback •  Click and mouse hover effects •  Keyboard shortcuts •  Reading experience – Easier to read narro columns – Paragraph leading and guttering
  19. 19. Fastclick •  Speed up touch interactions •  Eliminates 300ms lag <script src='fastclick.js'></script> window.addEventListener('load', function() { new FastClick(document.body); }, false);
  20. 20. Scroller
  21. 21. Floed columns
  22. 22. Floed columns
  23. 23. Refloing
  24. 24. Resizing
  25. 25. Connection state Or hy online and offline events should not be trusted to anser the question ‘are e online?’
  26. 26. navigator.onLine re you online if? – You’ve got ifi signal? – You’ve got 3G signal? – If DNS resolves? If Titter loads? – ill my site? – ill Facebook?
  27. 27. Q: If the value of navigator.onLine is true, hat does that mean? : The device might be online.
  28. 28. For hen there’s no connection •  ppCache –  Essential for offline functionality –  Just use it to bootstrap your app. •  LocalStorage –  Great for code and templates •  Cookies –  Shared ith the server –  Included in every request •  ebSQL / IndexedDB –  Great for content
  29. 29. Splash  screen   Basic  CSS  /  Fonts   Bootstrap  &  error  handling   Main  app  code   Main  CSS  &  HTML  templates   Authen=ca=on   Text  and  image  content   HTML5  AppCache  for   ini=al  page  load     Beware.    AppCache  needs   careful  handling.   LocalStorage  for  code     and  templates   Cookies  for  data  shared   with  the  server   WebSQL  /  IndexedDB  for   news  content  
  30. 30. Squeezing your bits •  Devices tend to limit HTML5 storage •  Storing images offline: Base64 encoded data-URIs + UTF-16 storage encoding = Inefficient
  31. 31. n image storage solution 1.  Donload images as gzipped base64 2.  Squeeze 2⅔ base64 characters into one UTF-16 character 3.  Push that into the database 4.  Reverse hen rendering the page •  Go to to read more.
  32. 32. Tips for coping ith the netork •  Batching your requests •  Prioritise requests – User requested content first – nalytics last •  Progress bars – Sho feedback fast – Be pessimistic
  33. 33. One HTTP request! •  ggressive batching - collect requests asynchronously: •  Callbacks per action and per group api.add('getStory', {'path': '/1'}, callback1); api.add('getStory', {'path': '/2'}, callback2); api.send(callback3); api.add('analytics', params, callback4); api.send(callback5);
  34. 34. Going native
  35. 35. cclimatised users •  ndroid – Back and Search buttons – Sharing: Intent.ACTION_SEND – idgets – Background content donloading •  indos 8 – Sharing and Search charms – Home screen tile – Nav bar
  36. 36. Search on ndroid
  37. 37. Search on indos 8
  38. 38. Search on iPad
  39. 39. Search on iPhone
  40. 40. Native rappers •  Invoke same core online eb site •  rapper to eb communication – via HTML5 postMessage – JavaScript function calls
  41. 41. Managing the release process But ith multiple devices, surely is hard?
  42. 42. The Old Days: Branches Test   Dev   Trunk   Feature  “Apple”   Feature  “Banana”   Release   to  live   Merge   Merge  
  43. 43. The alternative: Feature flags •  Develop in one place •  Sitch bits of code on and off •  Centralise those sitches •  Don’t associate multiple things to the same flag function get(flagname) { switch flagname: case 'WidgetEnabled': return isAndroid ... if (Flags.get('WidgetEnabled’)) { ... }
  44. 44. Feature flags: Override for testing Screenshot of flag tool
  45. 45. Feature flags: Override for testing •  Code example: function get(flagname) { flagoverrides = JSON.parse(localstorage.getItem('flags')); if (flagname in flagoverrides) { return flagoverrides[flagname]; } switch flagname: case 'AppleEnabled': return isAndroid ...
  46. 46. Feature flags 2.0 •  Server-side decisions control client side behaviour – Enable /B feature release – Deploy features to different platforms – Push flags to client •  Share flags client and server side – Get feedback on /B testing •  Remember analytics!
  47. 47. Client-side code updates •  The bootstrap code: – Runs hat’s in localStorage – sks the server if there’s a ne version •  llo beta users to get version first – Donloads it for use next time •  Minimises ppCache aggravation •  Gives us complete control
  48. 48. Final points
  49. 49. HTML5 sites can be great But building a good HTML5 site is very hard.
  50. 50. Summary •  Less separation, more adaptation – Feer, more adaptive ebsites •  Less native, more eb •  HTML5 is NOT just a mobile solution, but a ay of making better ebsites. •  Responsiveness is not about multiple static designs, it's a multi-variable equation
  51. 51. Summary •  appCache + localStorage + intelligent bootstrapping + good use of storage = reliable offline app •  You don’t have to sacrifice features •  ith good optimisations you can get a great app experience
  52. 52. e're trying to help •  Your dev team can use our code – •  e blog about techniques at •  Consultancy available •  Talks at conferences like this one
  53. 53. “Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee  
  54. 54. Thanks @FTLabs Do you ant to build this stuff? Join in. Image  credits::     hOp://,    hOp://­‐car-­‐parking-­‐fail,  hOp:// 2011/04/smart-­‐car.jpg