Your SlideShare is downloading. ×
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
Mobile gotcha
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

Mobile gotcha

4,292

Published on

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

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

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

No Downloads
Views
Total Views
4,292
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
42
Comments
0
Likes
17
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 MobileLessons from Building
  • 2. Culture Product & DesignDevelopment 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 & DesignIt impacts engineering
  • 5. Websites vs. Applications Content Focus Flow & Action FocusLong Form Layout Lists/Details Responsive DesignGood 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
  • 7. 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
  • 8. Development Background Approach to Engineering
  • 9. 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
  • 10. Libs vs. FrameworksFrameworks call App call libraries your app (Few) (Lots)
  • 11. Process vs Evented Systems
  • 12. Process Systems Single process/thread per requestBlock while waiting for I/O to complete Use Process/Thread Pools
  • 13. Evented SystemsSingle Process for large number of requests Non Blocking for I/OUse 1 Process per Core on system for scale
  • 14. Evented For MobileProcess Systems great for high compute Evented Systems great for I/O bound With mobile client rendering, evented systems best for front end
  • 15. Our Choices
  • 16. Server
  • 17. 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
  • 18. 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
  • 19. Node Modules• Step to Async• Express/Connect -- Framework• Vows to Mocha• Request• Underscore
  • 20. 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
  • 21. File Structure / Code Size• Follow simple Rails/Django dir – Controllers, Helpers, Formatters, Templates – No Views, No Models• Code Size ~ 10K
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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!
  • 26. Client Native for Infinite ScrollNative for Window MangerHTML5 for everything else
  • 27. iOS / Android Native
  • 28. Native GotchasWeb to Native MessagingCache/Image Management Tools / Test
  • 29. Web to Native Messaging• iFrame with URL for Ping• Native Pulls from Queue• Web-Sockets suck• REST for Native Services
  • 30. 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
  • 31. 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
  • 32. Mobile Web
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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

×