The FT eb pp:
Coding responsively
Dr Robert Shilston (rob@labs.ft.com)
Director, FT Labs (@ftlabs)
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Presented at QCon London
www.qconlondon.com
Purpose of QCon
- to empower software development by facilitating the spread o...
Historical comparison
1880 1900 1920 1940 1960 1980 2000 2020
orks offline
Portable
Long battery life
Can be read in bright sunlight
Cheap
Ubiquity
Bookmarking
Sharing
Nesprint
Fast st...
orks offline
Portable
Long battery life
Can be read in bright sunlight
Cheap
Ubiquity
Bookmarking
Sharing
‘Traditional’ eb...
orks offline
Portable
Long battery life
Can be read in bright sunlight
Cheap
Ubiquity
Bookmarking
Sharing
pps
Fast start u...
HTML5 is not a ‘mobile thing’.
It’s not an alternative to native
apps.
It’s a ay of making better
ebsites.
elcome back to the eb
The FT eb app provides a touch optimised user
experience ithout native code.
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.
genda
•  Coding responsively
– Layout and interactions
– Connection state
– OS
•  Development process
– Branching and fea...
hat is an app?
But first, let’s consider:
hat is an ‘app’?
•  Built for a single platform
•  In an app store
•  ritten in native code
•  Built for mobile
•  Desig...
hat an ‘app’ is to us:
app (n). a distributed computer softare
application designed for optimal use on specific
screen si...
hy code responsively?
So let’s start:
Ne devices
+
Desktop
Click
Point
Ho an app might run
Laptop
Type
Move
Tablet
Touch
Phone
Speak
In car screen
Listen
eroplane
TV
Kio...
Layout and interactions
•  Screen size
– Not the same as resolution
•  Instant touch feedback
•  Click and mouse hover effe...
Fastclick
•  Speed up touch interactions
•  Eliminates 300ms lag
<script src='fastclick.js'></script>
window.addEventListe...
Scroller
Floed columns
Floed columns
Refloing
Resizing
Connection state
Or hy online and offline events should
not be trusted to anser the question ‘are
e online?’
navigator.onLine
re you online if?
– You’ve got ifi signal?
– You’ve got 3G signal?
– If DNS resolves?
If Titter loads?
...
Q: If the value of navigator.onLine is true,
hat does that mean?
: The device might be online.
For hen there’s no connection
•  ppCache
–  Essential for offline functionality
–  Just use it to bootstrap your app.
•  L...
Splash	
  screen	
  
Basic	
  CSS	
  /	
  Fonts	
  
Bootstrap	
  &	
  error	
  handling	
  
Main	
  app	
  code	
  
Main	
...
Squeezing your bits
•  Devices tend to limit HTML5 storage
•  Storing images offline:
Base64 encoded data-URIs
+ UTF-16 stor...
n image storage solution
1.  Donload images as gzipped base64
2.  Squeeze 2⅔ base64 characters into one
UTF-16 character...
Tips for coping ith the netork
•  Batching your requests
•  Prioritise requests
– User requested content first
– nalytic...
One HTTP request!
•  ggressive batching - collect requests
asynchronously:
•  Callbacks per action and per group
api.add(...
Going native
cclimatised users
•  ndroid
– Back and Search buttons
– Sharing: Intent.ACTION_SEND
– idgets
– Background content donl...
Search on ndroid
Search on indos 8
Search on iPad
Search on iPhone
Native rappers
•  Invoke same core online eb site
•  rapper to eb communication
– via HTML5 postMessage
– JavaScript f...
Managing the release process
But ith multiple devices, surely
is hard?
The Old Days: Branches
Test	
  
Dev	
  
Trunk	
  
Feature	
  “Apple”	
  
Feature	
  “Banana”	
  
Release	
  
to	
  live	
 ...
The alternative: Feature flags
•  Develop in one place
•  Sitch bits of code on and off
•  Centralise those sitches
•  Don...
Feature flags: Override for testing
Screenshot of flag tool
Feature flags: Override for testing
•  Code example:
function get(flagname) {
flagoverrides = JSON.parse(localstorage.getIt...
Feature flags 2.0
•  Server-side decisions control client side
behaviour
– Enable /B feature release
– Deploy features to ...
Client-side code updates
•  The bootstrap code:
– Runs hat’s in localStorage
– sks the server if there’s a ne version
•...
Final points
HTML5 sites can be great
But building a good HTML5
site is very hard.
Summary
•  Less separation, more adaptation
– Feer, more adaptive ebsites
•  Less native, more eb
•  HTML5 is NOT just ...
Summary
•  appCache + localStorage + intelligent
bootstrapping + good use of storage
= reliable offline app
•  You don’t hav...
e're trying to help
•  Your dev team can use our code
– github.com/ftlabs
•  e blog about techniques at labs.ft.com
•  C...
“Don’t build native apps,
build eb apps”
-­‐	
  Tim	
  Berners-­‐Lee	
  
Thanks
rob@labs.ft.com
@FTLabs
Do you ant to build this stuff? Join in.
jobs@labs.ft.com
Image	
  credits::	
  	
  
hOp://...
Developing the FT Web App
Developing the FT Web App
Upcoming SlideShare
Loading in...5
×

Developing the FT Web App

603

Published on

Video and slides synchronized, mp3 and slide download available at http://bit.ly/11vFHym.

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 qconlondon.com.

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
603
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developing the FT Web App

  1. 1. The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs (@ftlabs)
  2. 2. InfoQ.com: 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 InfoQ.com! http://www.infoq.com/presentations /FT-html5
  3. 3. Presented at QCon London www.qconlondon.com 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 http://labs.ft.com/ 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 – github.com/ftlabs •  e blog about techniques at labs.ft.com •  Consultancy available •  Talks at conferences like this one
  53. 53. “Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee  
  54. 54. Thanks rob@labs.ft.com @FTLabs Do you ant to build this stuff? Join in. jobs@labs.ft.com Image  credits::     hOp://cdn3.worldcarfans.co/2008/2/medium/9080214.017.Mini1L.jpg,    hOp://www.netbasic.com/blog/2008/10/mini-­‐car-­‐parking-­‐fail,  hOp://runningstopsigns.files.wordpress.com/ 2011/04/smart-­‐car.jpg    

×