Your SlideShare is downloading. ×
Lessons from Building LinkedIn Mobile - HTML5 & Node.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Lessons from Building LinkedIn Mobile - HTML5 & Node.js

1,129
views

Published on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1bc2a8y. …

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
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. Development Background Approach to Engineering
  • 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. Libs vs. Frameworks Frameworks call your app (Few) App call libraries (Lots)
  • 16. Process vs Evented Systems
  • 17. Process Systems Single process/thread per request Block while waiting for I/O to complete Use Process/Thread Pools
  • 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. 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. Our Choices
  • 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. 1 Server / App Touch Mouse/ Keyboard Large X X Small X ?
  • 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. Implications • Caching Control • Session Management • Front-end Server Scale • Code - Build - Test - Deploy
  • 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. 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. 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. Mobile Web
  • 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. 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. Libraries • Zepto – Manipulate the DOM • Underscore – Collection helpers and binding constructs, templating
  • 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. 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. 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. 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. Appendix
  • 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. 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. Node Modules • • • • • Step to Q Express/Connect -- Framework Vows to Mocha Request Underscore to loDash
  • 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. File Structure / Code Size • Follow simple Rails/Django dir – Controllers, Helpers, Formatters, Templates – No Views, No Models • Code Size ~ 10K
  • 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. 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. 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. 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. Client Native for Infinite Scroll Native for Window Manger HTML5 for everything else
  • 47. iOS / Android Native
  • 48. Native Gotchas Web to Native Messaging Cache/Image Management Tools / Test
  • 49. Web to Native Messaging • iFrame with URL for Ping • Native Pulls from Queue • Web-Sockets suck • REST for Native Services
  • 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. 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. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/linkedinhtml5-nodejs