More Detailed Information about LinkedIn Mobile and its Gotcha's :)

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