LinkedIn Mobile
Lessons from Building
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/linkedin-html5-nodejs

InfoQ....
Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Simple
Fast
Easy
Reliable
Product & Design

Development Background
Our Choices
Server

Client
Product & Design
It impacts engineering
Websites vs. Applications
Content Focus

Flow & Action Focus

Long Form Layout

Lists/Details

Responsive Design
Good for ...
Interaction vs. Visual
• Design a house floor plan
• Focus on Rooms and Hallways
• Stay away from Paint, Furniture Carpet
...
Adjust App Platforms
• On Screen vs. Hardware Back
• Up vs. Back / Stacks vs. Pages
• Pull to Refresh vs. Button Refresh
•...
Development Background
Approach to Engineering
HTML5 vs Native
• What is the skillset of the team?
• What is your front door?
• Which platforms are you targeting?
• Phon...
Libs vs. Frameworks

Frameworks call
your app
(Few)

App call libraries
(Lots)
Process vs Evented
Systems
Process Systems
Single process/thread per request
Block while waiting for I/O to complete
Use Process/Thread Pools
Evented Systems
Single Process for large number of requests

Non Blocking for I/O
Use 1 Process per Core on system for sca...
Evented For Mobile
Process Systems great for high compute
Evented Systems great for I/O bound

With mobile client renderin...
Our Choices
Phone

Tablet

Screen

Screen

Screen

Screen

Controller

Controller

Controller

Controller

View

View

View

View

Cli...
1 Server / App
Touch

Mouse/
Keyboard

Large

X

X

Small

X

?
Screen Based JSON
•

Single Request per
screen

•

JSON is template
based

•

Updatable on
server

{
ttype: nut1,
time: 29...
Implications
• Caching Control
• Session Management
• Front-end Server Scale
• Code - Build - Test - Deploy
Caching
• Move server’s page and session caches
• Store server responses in Local Storage
• Manage your own image cache fo...
Sessions
•

Store on the client side

•

Client Controllers have state

•

Limited state transferred across net

•

Statel...
Front-End Scale
150qps in 60MB Ram

Bound
• I/O Bound vs ComputeLess actual CPU work
More waiting on Backend,
Process base...
Mobile Web
Screen vs Page
• App is multiple Screens in one page
• Page is a browser Page and has an implication
of JS Load/Parse time...
Backbone.js
• Controls Routing from Screen to Screen
• Controls Screen lifecycle (load, show, hide)
• Controls View Updati...
Libraries
• Zepto – Manipulate the DOM
• Underscore – Collection helpers and binding
constructs, templating
Build / Packaging
• Closure
– Minify, Comment Removal, Template Compilation

• SASS
– Variables, Functions, Selector Inher...
Startup
• Initial
–
–
–
–

Index.html
List of bundle files
Store all in Local Storage
Backbone starts home bundle

• Upgra...
Tools / Gotchas
• Chrome Memory Profiler
– https://developers.google.com/chromedeveloper-tools/docs/heap-profiling

• Memo...
FAQ - Slideshare

http://www.slideshare.net/phegaro

• What/Why for server tech? Node.js
• How much layout in screen based...
Appendix
Mobile Server
•
•
•
•
•
•
•
•

Scaling Node
Node Modules
Logging vs Tracking vs Metrics
File Structure / Code Size
Client ...
Scaling
• Load Balancer talking to each node instance
running on separate cores
• In Node .8, finally have master/child fi...
Node Modules
•
•
•
•
•

Step to Q
Express/Connect -- Framework
Vows to Mocha
Request
Underscore to loDash
Logging/Monitoring/Tracking
• Logging used for sending lots of text information
– useful for debugging

• Monitoring is fo...
File Structure / Code Size
• Follow simple Rails/Django dir
– Controllers, Helpers, Formatters, Templates
– No Views, No M...
Client / Server Line Level
•
•
•
•

Single Request per screen
JSON is template based
Updateable on Server
Don’t add:
– Lin...
Server / Server Line Level Format
• Stream Data
– Metrics, Logging, Events, etc
– Kafka, Thrift, Avro, Protocol Buffers et...
Latency vs. Bandwidth
• Latency is the issue with mobile not
bandwidth
• Establish and keep the socket open for ping
• Use...
Node Gotchas
• Exception Handling
• Don’t listen on startup till you are connected
to down stream services
• Okay to die a...
Client
Native for Infinite Scroll

Native for Window Manger
HTML5 for everything else
iOS / Android Native
Native Gotchas
Web to Native Messaging

Cache/Image Management
Tools / Test
Web to Native Messaging
• iFrame with URL for Ping
• Native Pulls from Queue
• Web-Sockets suck

• REST for Native Service...
Cache/Image Management
• Store all data in url/result hash
• Render data from Hash
• Render again from server response
• I...
Tools/Test
•
•
•
•
•
•
•
•

iWebInspector / Weinre
Charles Proxy for req debugging
Pain when OS upgrade
Selenium with Safa...
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/linkedinhtml5-nodejs
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Upcoming SlideShare
Loading in...5
×

Lessons from Building LinkedIn Mobile - HTML5 & Node.js

1,349

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,349
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Lessons from Building LinkedIn Mobile - HTML5 & Node.js

  1. 1. LinkedIn Mobile Lessons from Building
  2. 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. 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. 4. Simple
  5. 5. Fast
  6. 6. Easy
  7. 7. Reliable
  8. 8. Product & Design Development Background Our Choices Server Client
  9. 9. Product & Design It impacts engineering
  10. 10. Websites vs. Applications Content Focus Flow & Action Focus Long Form Layout Lists/Details Responsive Design Good for websites; Not for applications
  11. 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
  12. 12. 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
  13. 13. Development Background Approach to Engineering
  14. 14. 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
  15. 15. Libs vs. Frameworks Frameworks call your app (Few) App call libraries (Lots)
  16. 16. Process vs Evented Systems
  17. 17. Process Systems Single process/thread per request Block while waiting for I/O to complete Use Process/Thread Pools
  18. 18. Evented Systems Single Process for large number of requests Non Blocking for I/O Use 1 Process per Core on system for scale
  19. 19. 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
  20. 20. Our Choices
  21. 21. Phone Tablet Screen Screen Screen Screen Controller Controller Controller Controller View View View View Client/Server Border Phone Server LinkedIn API Layer Tablet Server
  22. 22. 1 Server / App Touch Mouse/ Keyboard Large X X Small X ?
  23. 23. 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, }
  24. 24. Implications • Caching Control • Session Management • Front-end Server Scale • Code - Build - Test - Deploy
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. Mobile Web
  29. 29. 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
  30. 30. 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
  31. 31. Libraries • Zepto – Manipulate the DOM • Underscore – Collection helpers and binding constructs, templating
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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?
  36. 36. Appendix
  37. 37. 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
  38. 38. 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
  39. 39. Node Modules • • • • • Step to Q Express/Connect -- Framework Vows to Mocha Request Underscore to loDash
  40. 40. 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
  41. 41. File Structure / Code Size • Follow simple Rails/Django dir – Controllers, Helpers, Formatters, Templates – No Views, No Models • Code Size ~ 10K
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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!
  46. 46. Client Native for Infinite Scroll Native for Window Manger HTML5 for everything else
  47. 47. iOS / Android Native
  48. 48. Native Gotchas Web to Native Messaging Cache/Image Management Tools / Test
  49. 49. Web to Native Messaging • iFrame with URL for Ping • Native Pulls from Queue • Web-Sockets suck • REST for Native Services
  50. 50. 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
  51. 51. 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
  52. 52. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/linkedinhtml5-nodejs

×