![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
...](https://image.slidesharecdn.com/qconsf2012-robertshilston-developingtheftwebapp-130328104301-phpapp02/85/The-FT-Web-App-Coding-Responsively-44-320.jpg)
Uploaded byC4Media
The FT Web App: Coding Responsively
The document discusses responsive coding in web applications, highlighting the importance of adapting web experiences across different devices and screen sizes. It emphasizes that HTML5 is not just for mobile but improves website development, along with strategies for managing content and offline functionality. The presentation also covers techniques like feature flags for streamlined development and emphasizes creating adaptive web applications rather than relying solely on native solutions.
More Related Content
Similar to The FT Web App: Coding Responsively
The FT Web App: Coding Responsively
- 1. The FT ebpp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs (@ftlabs)
- 2. Watch the videowith slide synchronization on InfoQ.com! http://www.infoq.com/presentations /FT-Coding-Responsively 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
- 3. Presented at QConSan Francisco www.qconsf.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. Historical comparison 1880 1900 1920 1940 1960 1980 2000 2020
- 6. Nesprint orks offline Fast start up Portable Clipping/saving Long battery life Can be read in the dark Can be read in bright sunlight Updates in real time Cheap Electronic delivery Ubiquity Search Bookmarking Personalisation Sharing Deep linking
- 7. ‘Traditional’ eb orks offline Fast start up Portable Clipping/saving Long battery life Can be read in the dark Can be read in bright sunlight Updates in real time Cheap Electronic delivery Ubiquity Search Bookmarking Personalisation Sharing Deep linking
- 8. pps orks offline Fast start up Portable Clipping/saving Long battery life Can be read in the dark Can be read in bright sunlight Updates in real time Cheap Electronic delivery Ubiquity Search Bookmarking Personalisation Sharing Deep linking
- 9. HTML5 is nota ‘mobile thing’. It’s not an alternative to native apps. It’s a ay of making better ebsites.
- 10. elcome back tothe eb The FT eb app provides a touch optimised user experience ithout native code.
- 11. Sometimes it’s hat e’vedone But e’ve learned a lot, so to be honest sometimes it’s hat e ould do if e did it again.
- 12. genda • Coding responsively – Layout and interactions – Connection state – OS • Development process – Branching and feature flags – Testing and deployment
- 13. But first, let’sconsider: hat is an app?
- 14. 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
- 15. hat an ‘app’is to us: app (n). a distributed computer softare application designed for optimal use on specific screen sizes and ith particular interface technologies,
- 16. So let’s start: hycode responsively?
- 17. Ho an appmight run Desktop Laptop Click Type Tablet Phone Move Touch In car screen eroplane Speak Listen Games + TV Point Think? console Kiosk Billboard ???
- 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.
- 20.
- 21.
- 22. Fastclick • Speed uptouch interactions • Eliminates 300ms lag <script src='fastclick.js'></script> window.addEventListener('load', function() { new FastClick(document.body); }, false);
- 23. Connection state Or hyonline and offline events should not be trusted to anser the question ‘are e online?’
- 24. navigator.onLine re you onlineif? – You’ve got ifi signal? – You’ve got 3G signal? – If DNS resolves? If Titter loads? – ill my site? – ill Facebook?
- 25. Q: If thevalue of navigator.onLine is true, hat does that mean? : The device might be online.
- 26. For hen there’sno 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
- 27. HTML5 AppCache for ini=al page load Splash screen Beware. AppCache needs careful handling. Basic CSS / Fonts Bootstrap & error handling LocalStorage for code Main app code and templates Main CSS & HTML templates Cookies for data shared with the server Authen=ca=on Text and image content WebSQL / IndexedDB for news content
- 28. Squeezing your bits • Devices tend to limit HTML5 storage • Storing images offline: Base64 encoded data-URIs + UTF-16 storage encoding = Inefficient
- 30. n image storagesolution 1. Donload 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.
- 31. Tips for copingith the netork • Batching your requests • Prioritise requests – User requested content first – nalytics last • Progress bars – Sho feedback fast – Be pessimistic
- 32. One HTTP request! • ggressive batching - collect requests asynchronously: api.add('getStory', {'path': '/1'}, callback1); api.add('getStory', {'path': '/2'}, callback2); api.send(callback3); api.add('analytics', params, callback4); api.send(callback5); • Callbacks per action and per group
- 33.
- 34. cclimatised users • ndroid – Back and Search buttons – Sharing: Intent.ACTION_SEND – idgets – Background content donloading • indos 8 – Sharing and Search charms – Home screen tile – Nav bar
- 35.
- 36.
- 37.
- 38.
- 39. Native rappers • Invokesame core online eb site • rapper to eb communication – via HTML5 postMessage – JavaScript function calls
- 40. But ith multipledevices, surely Managing the release process is hard?
- 41. The Old Days:Branches Feature “Banana” Dev Feature “Apple” Merge Test Merge Trunk Release to live
- 42. The alternative: Featureflags • Develop in one place • Sitch bits of code on and off if (Flags.get('WidgetEnabled’)) { ... } • Centralise those sitches function get(flagname) { switch flagname: case 'WidgetEnabled': return isAndroid ... • Don’t associate multiple things to the same flag
- 43. Feature flags: Overridefor testing Screenshot of flag tool
- 44. Feature flags: Overridefor 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 ...
- 45. 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!
- 46. 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 – Donloads it for use next time • Minimises ppCache aggravation • Gives us complete control
- 47.
- 48. HTML5 sites canbe great But building a good HTML5 site is very hard.
- 49. “The biggest mistakee made as a company as betting too much on HTML5 as opposed to native,” “It just asn’t ready”
- 50. Summary • Less separation,more adaptation – Feer, 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. 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. e're trying tohelp • Your dev team can use our code – github.com/ftlabs • e blog about techniques at labs.ft.com • Talks at conferences like this one
- 53. “Don’t build nativeapps, build eb apps” -‐ Tim Berners-‐Lee
- 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