Mobilise London

A few things we learnt @FTLabs from building app.ft.com

Transcript

1. Developing a Web App for ‘Mobile’ Tips and tricks from the team @FTLabs Graham Hinchly (@grahamhinchly) Engineering Manager, FT Labs (@ftlabs)
2. Distributing a web app
4. app.ft.com demo
5. Make it work offline
6. bit.ly/PqIUT9 – thanks @andrewsmatt!
7. Content JS CSS HTML fragments Bootstrap Fonts
10. Fastclick demo github.com/ftlabs/fastclick
11. Swiping & Scrolling
12. FTScroller •  github.com/ftlabs/ftscroller – Momentum scrolling – Swiping – Snapping – Cross-browser – Backwards compatible •  Credit to @rowanbeentje
13. #perfmatters
14. Performance tips •  Back to Chrome dev tools…. – Another demo….?! •  Minimise paint •  Use hardware accelerated animations – translate3d(X, Y, Z) •  Avoid layout thrashing – https://github.com/wilsonpage/fastdom •  http://jankfree.org/
15. Test. Test. Test. (on real devices)
16. opendevicelab.com
17. Useful debug tools •  Dev tools for Chrome for Android – ADB Chrome Extension – Search “adbplugin” – Can get set up in < 5 mins – Remember: •  Check you have latest versions of Chrome (espec. on device) •  Few setup steps: https://developers.google.com/chrome- developer-tools/docs/remote-debugging
18. Useful debug tools •  Dev tools for iOS – Remote debugging with Safari Web Inspector on iOS6+ – github.com/google/ios-webkit-debug-proxy
19. Thanks @grahamhinchly graham.hinchly@ft.com We’re hiring! labs.ft.com/jobs/