Developing the FT Web App
•
0 gefällt mir•1,135 views
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.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Mehr von C4Media
Mehr von C4Media (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Developing the FT Web App
- 1. The FT eb pp: Coding responsively Dr Robert Shilston (rob@labs.ft.com) Director, FT Labs (@ftlabs)
- 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. 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. Historical comparison 1880 1900 1920 1940 1960 1980 2000 2020
- 6. orks offline Portable Long battery life Can be read in bright sunlight Cheap Ubiquity Bookmarking Sharing Nesprint Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
- 7. 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
- 8. 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
- 9. HTML5 is not a ‘mobile thing’. It’s not an alternative to native apps. It’s a ay of making better ebsites.
- 10. elcome back to the eb The FT eb app provides a touch optimised user experience ithout native code.
- 11. 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.
- 12. genda • Coding responsively – Layout and interactions – Connection state – OS • Development process – Branching and feature flags – Testing and deployment
- 13. hat is an app? But first, let’s consider:
- 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 THNKS
- 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. hy code responsively? So let’s start:
- 17. Ne devices
- 18. + 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
- 19. 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
- 20. Fastclick • Speed up touch interactions • Eliminates 300ms lag <script src='fastclick.js'></script> window.addEventListener('load', function() { new FastClick(document.body); }, false);
- 21. Scroller
- 22. Floed columns
- 23. Floed columns
- 24. Refloing
- 25. Resizing
- 26. Connection state Or hy online and offline events should not be trusted to anser the question ‘are e online?’
- 27. navigator.onLine re you online if? – You’ve got ifi signal? – You’ve got 3G signal? – If DNS resolves? If Titter loads? – ill my site? – ill Facebook?
- 28. Q: If the value of navigator.onLine is true, hat does that mean? : The device might be online.
- 29. 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
- 30. 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
- 31. Squeezing your bits • Devices tend to limit HTML5 storage • Storing images offline: Base64 encoded data-URIs + UTF-16 storage encoding = Inefficient
- 33. n image storage solution 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.
- 34. Tips for coping ith the netork • Batching your requests • Prioritise requests – User requested content first – nalytics last • Progress bars – Sho feedback fast – Be pessimistic
- 35. 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);
- 36. Going native
- 37. 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
- 39. Search on indos 8
- 40. Search on iPad
- 41. Search on iPhone
- 42. Native rappers • Invoke same core online eb site • rapper to eb communication – via HTML5 postMessage – JavaScript function calls
- 43. Managing the release process But ith multiple devices, surely is hard?
- 44. The Old Days: Branches Test Dev Trunk Feature “Apple” Feature “Banana” Release to live Merge Merge
- 45. The alternative: Feature flags • Develop in one place • Sitch bits of code on and off • Centralise those sitches • Don’t associate multiple things to the same flag function get(flagname) { switch flagname: case 'WidgetEnabled': return isAndroid ... if (Flags.get('WidgetEnabled’)) { ... }
- 46. Feature flags: Override for testing Screenshot of flag tool
- 47. 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 ...
- 48. 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!
- 49. 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
- 50. Final points
- 51. HTML5 sites can be great But building a good HTML5 site is very hard.
- 52. 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
- 53. 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
- 54. 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
- 55. “Don’t build native apps, build eb apps” -‐ Tim Berners-‐Lee
- 56. 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