Mobile gotcha
- 1. LinkedIn Mobile Lessons from Building
- 2. Culture Product & Design Development Background Our Choices Server Client
- 3. Cult of Simple • Fast – App Launch – Screen to Screen Switch • Easy – Tap Count • Reliable – Don’t Crash – Repeatable
- 4. Product & Design It impacts engineering
- 5. Websites vs. Applications Content Focus Flow & Action Focus Long Form Layout Lists/Details Responsive Design Good for websites; Not for applications
- 6. Interaction vs. Visual • Design a house floor plan • Focus on Rooms and Hallways • Stay away from Paint, Furniture Carpet • Has & Does for each screen • Black & White then Color
- 8. Adjust App Platforms • On Screen vs. Hardware Back • Up vs. Back / Stacks vs. Pages • Pull to Refresh vs. Button Refresh • Settings Room Location • Visual Design
- 10. Development Background Approach to Engineering
- 11. HTML5 vs Native • What is the skillset of the team? • What is your front door? • Which platforms are you targeting? • Phone Gap vs Titanium vs XXX
- 12. Libs vs. Frameworks Frameworks call App call libraries your app (Few) (Lots)
- 19. Process vs Evented Systems
- 20. Process Systems Single process/thread per request Block while waiting for I/O to complete Use Process/Thread Pools
- 21. Evented Systems Single Process for large number of requests Non Blocking for I/O Use 1 Process per Core on system for scale
- 22. Evented For Mobile Process Systems great for high compute Evented Systems great for I/O bound With mobile client rendering, evented systems best for front end
- 23. Our Choices
- 25. Server
- 27. Mobile Server • Scaling Node • Node Modules • Logging vs Tracking vs Metrics • File Structure / Code Size • Client / Server Line Format • Server / Server Line Format • Latency vs Bandwidth • Gotchas
- 28. Scaling • Load Balancer talking to each node instance running on separate cores • In Node .8, finally have master/child file handle sharing based evented model • 150 qps per core per instance • 60 MB of RAM for an instance
- 29. Node Modules • Step to Async • Express/Connect -- Framework • Vows to Mocha • Request • Underscore
- 30. Logging/Monitoring/Tracking • Logging used for sending lots of text information – useful for debugging • Monitoring is for sending counters for realtime monitoring: Product and System – Typical: Query Rate, Response Code, Time for request, Page Views, Actions – Cube from Square • Tracking is for product metric queries – Get into a database for queries – Needed for doing Uniqing and Pathing queries
- 31. File Structure / Code Size • Follow simple Rails/Django dir – Controllers, Helpers, Formatters, Templates – No Views, No Models • Code Size ~ 10K
- 32. Client / Server Line Level • Single Request per screen • JSON is template based • Updateable on Server • Don’t add: – Links – Styles – Positioning • Node is part of the client NOT the server
- 33. Server / Server Line Level Format • Stream Data – Metrics, Logging, Events, etc – Kafka, Thrift, Avro, Protocol Buffers etc. • Request/Response Data – HTTP/JSON – REST Endpoints for actual data models – Not much faster for performance
- 34. Latency vs. Bandwidth • Latency is the issue with mobile not bandwidth • Establish and keep the socket open for ping • Use a ping and pull model not a true push • Easier to scale ping/pull model
- 35. Node Gotchas • Exception Handling • Don’t listen on startup till you are connected to down stream services • Okay to die and respawn • httpClient.agent = false • Turn on console in production • NO BLOCKING!
- 36. Client Native for Infinite Scroll Native for Window Manger HTML5 for everything else
- 37. iOS / Android Native
- 38. Native Gotchas Web to Native Messaging Cache/Image Management Tools / Test
- 39. Web to Native Messaging • iFrame with URL for Ping • Native Pulls from Queue • Web-Sockets suck • REST for Native Services
- 40. Cache/Image Management • Store all data in url/result hash • Render data from Hash • Render again from server response • Image src should be set to small image when off screen
- 41. Tools/Test • iWebInspector / Weinre • Charles Proxy for req debugging • Pain when OS upgrade • Selenium with Safari Simulator (Web Parts) • Instruments UIAutomation / Robotium (Native) • Layout Test: DumpRender + ImageDiff (5%) • Vcr.js – Fixture Creater • Android Emulator Super Slow to have to do on build machine with catchup
- 42. Mobile Web
- 43. Screen vs Page • App is multiple Screens in one page • Page is a browser Page and has an implication of JS Load/Parse time • Screen to Screen move is div show/hide
- 44. Backbone.js • Controls Routing from Screen to Screen • Controls Screen lifecycle (load, show, hide) • Controls View Updating based on Model Change • Has Model construct for Validation • BaseRouter to Backbone – Transitions, screen life cycle • M V C links in Backbone lead to mem leaks
- 45. Libraries • Zepto – Manipulate the DOM • iScroll – Inertial Scrolling on iOS – Does not work on Android – Pull to Refresh • Underscore – Collection helpers and binding constructs, templating
- 46. Build / Packaging • Closure – Minify, Comment Removal, Template Compilation • SASS – Variables, Functions, Selector Inheritance • Bundle (set of screens) – Local, Template, Controllers/Views • Build independently and resuable
- 47. Startup • Initial – Index.html – List of bundle files – Store all in Local Storage – Backbone starts home bundle • Upgrade – Index.html – MD5 has for each file – Compare/Download Diff – Store in Local Storage
- 48. Tools / Gotchas • Chrome Memory Profiler – https://developers.google.com/chrome- developer-tools/docs/heap-profiling • Memory Leak Tracking – http://gent.ilcore.com/2011/08/finding-memory- leaks.html • Hardware Acceleration for DIV render only on screen DIV’s • Double Render from Cache