Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1bc2a8y. Kiran Prasad discusses what impact mobile has on architecture, explaining how HTML5 and Node.js can help, and sharing how to use these technologies effectively at scale. Filmed at qconsf.com. Kiran Prasad joined LinkedIn in 2011. He currently leads the company’s mobile efforts, including phone/tablet and server solutions. Prior to joining LinkedIn, he was the Sr. Director of Applications at Palm Inc., a leader in mobile OS and device development, where he started and delivered webOS, Palm’s first Windows Phone, and was the tech lead for the original Treo.

1. LinkedIn Mobile
Lessons from Building

2. Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/linkedin-html5-nodejs
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 QCon San 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. Simple

5. Fast

6. Easy

7. Reliable

8. Product & Design
Development Background
Our Choices
Server
Client

9. Product & Design
It impacts engineering

10. Websites vs. Applications
Content Focus
Flow & Action Focus
Long Form Layout
Lists/Details
Responsive Design
Good for websites; Not for applications

11. 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

13. 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

15. Development Background
Approach to Engineering

16. 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

17. Libs vs. Frameworks
Frameworks call
your app
(Few)
App call libraries
(Lots)

24. Process vs Evented
Systems

25. Process Systems
Single process/thread per request
Block while waiting for I/O to complete
Use Process/Thread Pools

26. Evented Systems
Single Process for large number of requests
Non Blocking for I/O
Use 1 Process per Core on system for scale

27. 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

29. Our Choices

30. Phone
Tablet
Screen
Screen
Screen
Screen
Controller
Controller
Controller
Controller
View
View
View
View
Client/Server Border
Phone Server
LinkedIn API Layer
Tablet Server

31. 1 Server / App
Touch
Mouse/
Keyboard
Large
X
X
Small
X
?

32. Screen Based JSON
•
Single Request per
screen
•
JSON is template
based
•
Updatable on
server
{
ttype: nut1,
time: 298349823,
header: “Wow, that is pretty cool”,
.......
......
footer: “shared by Kiran Prasad”,
id: 1298398127,
}

33. Implications
• Caching Control
• Session Management
• Front-end Server Scale
• Code - Build - Test - Deploy

34. Caching
• Move server’s page and session caches
• Store server responses in Local Storage
• Manage your own image cache for assets
• Store the app (JS/HTML/CSS) in local storage
• Double render for perceived speed
Massive reduction in memory footprint of server
URL => Response
Base64 Encode Assets and store for more granular cache control
Diff Match Patch for updates

35. Sessions
•
Store on the client side
•
Client Controllers have state
•
Limited state transferred across net
•
Stateless server that is memory light
•
Stateless Server horizontally scallable
Store in local storage come back on upgrade/restore
Fast decisions of best screen without server roundtrip
No cookies going back and forth to carry state
No memory/stable session store => lighter processes
Easy replication even to other data centers

36. Front-End Scale
150qps in 60MB Ram
Bound
• I/O Bound vs ComputeLess actual CPU work
More waiting on Backend,
Process based
• Evented oversince mostly I/O blocked
Using Node.js
footprint light
• Memory or session or page rendering
No cache
• Ping/Pull Model viablemuch simpler
Websocket’s for updates

38. Mobile Web

39. 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

40. 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

41. Libraries
• Zepto – Manipulate the DOM
• Underscore – Collection helpers and binding
constructs, templating

42. 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

43. 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

44. Tools / Gotchas
• Chrome Memory Profiler
– https://developers.google.com/chromedeveloper-tools/docs/heap-profiling
• Memory Leak Tracking
– http://gent.ilcore.com/2011/08/finding-memoryleaks.html
• Hardware Acceleration for DIV render only on
screen DIV’s
• Double Render from Cache

45. FAQ - Slideshare
http://www.slideshare.net/phegaro
• What/Why for server tech? Node.js
• How much layout in screen based
template?
• What are good tools for HTML5
Development?

46. Appendix

47. 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

48. 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

49. Node Modules
•
•
•
•
•
Step to Q
Express/Connect -- Framework
Vows to Mocha
Request
Underscore to loDash

50. 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

51. File Structure / Code Size
• Follow simple Rails/Django dir
– Controllers, Helpers, Formatters, Templates
– No Views, No Models
• Code Size ~ 10K

52. 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

53. 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

54. 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

55. 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!

56. Client
Native for Infinite Scroll
Native for Window Manger
HTML5 for everything else

57. iOS / Android Native

58. Native Gotchas
Web to Native Messaging
Cache/Image Management
Tools / Test

59. Web to Native Messaging
• iFrame with URL for Ping
• Native Pulls from Queue
• Web-Sockets suck
• REST for Native Services

60. 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

61. 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

62. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/linkedinhtml5-nodejs