Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LinkedIn Mobile   How we do we do it?
BuildDesign CodeTestingDeploy
Build     PlatformDesign        iOS Code       AndroidTesting     BrowserDeploy       Other
Design
Interaction vs Visual• Designing a house’s floorplan• Focus on Rooms, Doors and Hallways• Stay away from Paint, Furniture a...
Search, Compose, Room NavigationStream      You        Inbox     Following              Notifications              Breadth ...
Adjust for App Platform• On Screen Back vs Hardware Back• Up vs Back / Stacks vs Pages• Pull To Refresh vs Button Refresh•...
Mobile Web Enter the house       SEO     Email      Organic
Code
Other      iOS           Android        Mobile Web                                                  WrapJS/HTML + Native  ...
Other      iOS           Android        Mobile Web                                                  WrapJS/HTML + Native  ...
Why Node.JS:              Evented & JS• I/O Bound for most interaction• Aggregation and Manipulation of Strings• Lots of p...
Mobile Server• Stateless                          Load Balancer                               Nginx             Nginx•   P...
Screen Based JSON•   Single Request per   {                             ttype: nut1,    screen                            ...
Other      iOS           Android        Mobile Web                                                  WrapJS/HTML + Native  ...
iOS•   Native for all infinite lists•   Native for Window    Manager•   JS/HTML for all screens    that are detail views•  ...
Other      iOS           Android        Mobile Web                                                  WrapJS/HTML + Native  ...
Android•   Native for all the    screens•   WebView for browsing    the web•   Moving towards more    HTML5•   Contacts lo...
Other      iOS           Android        Mobile Web                                                  WrapJS/HTML + Native  ...
Mobile Web•   Backbone for MVC                           •   LocalStorage for personal                               Cache...
Test
Test• Automation:  Vows, Robotium, Selenium, FoneMonkey,  GHUnit• Hudson for build management• Internal Tool for Layout Te...
Deploy
Deploy / Monitor•   Enterprise Build available   •   Keynote for    to employees                     Performance and      ...
Thanks! & Questions?
Upcoming SlideShare
Loading in …5
×

LinkedIn Mobile: How do we do it?

A brief overview of the design, code, test and deploy model we use at LinkedIn in the mobile group to build and support multiplatform development.

  • Be the first to comment

LinkedIn Mobile: How do we do it?

  1. LinkedIn Mobile How we do we do it?
  2. BuildDesign CodeTestingDeploy
  3. Build PlatformDesign iOS Code AndroidTesting BrowserDeploy Other
  4. Design
  5. Interaction vs Visual• Designing a house’s floorplan• Focus on Rooms, Doors and Hallways• Stay away from Paint, Furniture and Carpet• Has & Does for each screen• Black & White then add color
  6. Search, Compose, Room NavigationStream You Inbox Following Notifications Breadth < 4 Depth < 3
  7. Adjust for App Platform• On Screen Back vs Hardware Back• Up vs Back / Stacks vs Pages• Pull To Refresh vs Button Refresh• Settings• Visual Design
  8. Mobile Web Enter the house SEO Email Organic
  9. Code
  10. Other iOS Android Mobile Web WrapJS/HTML + Native Native JS/HTML JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform
  11. Other iOS Android Mobile Web WrapJS/HTML + Native Native JS/HTML JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform
  12. Why Node.JS: Evented & JS• I/O Bound for most interaction• Aggregation and Manipulation of Strings• Lots of persistent socket connections• Client developers are doing server development
  13. Mobile Server• Stateless Load Balancer Nginx Nginx• Platform Transport: JSON In / JSON Out Node JS Node JS Server Server• Nginx as Web Server Mongo Logging Tracking• CDN for Static Content DB Server Server• Log / Track Everything LinkedIn Platform
  14. Screen Based JSON• Single Request per { ttype: nut1, screen time: 298349823, header: “Wow, that is pretty cool”,• JSON is template ....... ...... based footer: “shared by Kiran Prasad”, id: 1298398127,• Updatable on } server
  15. Other iOS Android Mobile Web WrapJS/HTML + Native Native JS/HTML JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform
  16. iOS• Native for all infinite lists• Native for Window Manager• JS/HTML for all screens that are detail views• Per screen choice for the stuff in the middle• Async JS/iOS Bridge
  17. Other iOS Android Mobile Web WrapJS/HTML + Native Native JS/HTML JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform
  18. Android• Native for all the screens• WebView for browsing the web• Moving towards more HTML5• Contacts locally stored but rest only in memory cache
  19. Other iOS Android Mobile Web WrapJS/HTML + Native Native JS/HTML JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform
  20. Mobile Web• Backbone for MVC • LocalStorage for personal Cache• Underscore for utils• Zapto for DOM • SASS for CSS Manipulation • Closure for compiling• Modified iScroll for • Hash based Loader Scrolling
  21. Test
  22. Test• Automation: Vows, Robotium, Selenium, FoneMonkey, GHUnit• Hudson for build management• Internal Tool for Layout Testing• PhantomJS based Tool for Performance• Bug Bash + 2 Week Demos
  23. Deploy
  24. Deploy / Monitor• Enterprise Build available • Keynote for to employees Performance and Availability monitoring• Ship everything 2 times a week • DeviceAnywhere for compatibility testing• Apps and Server Deploy independently • Internal monitoring for QPS, Uptime, etc• 2 Week Bake for Big Stuff • Client Crash Log Metrics tracked daily
  25. Thanks! & Questions?

×