1 / 31

LinkedIn Mobile

LinkedIn Mobile. How we do we do it?. Build. Platform. Design Code Testing Deploy. iOS Android Browser Other. Code. iOS Native 30%. Android 80%. Mobile Web 100%. Other OS Wrappers 100%. Mobile Web JS/HTML. Screen based REST API. Mobile Server (node.js + MongoDB).

arden
Download Presentation

LinkedIn Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. LinkedIn Mobile • How we do we do it?

  2. Build Platform • Design • Code • Testing • Deploy iOS Android Browser Other

  3. Code

  4. iOS Native30% Android80% Mobile Web 100% Other OS Wrappers 100% Mobile Web JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform

  5. iOS Native30% Android80% Mobile Web 100% Other OS Wrappers 100% Mobile Web JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform

  6. Client/Server Border Typical Web Application Controller View Model

  7. Client/Server Border Rails Systems Process Rails Controllers ERB ActiveRecord

  8. Client/Server Border Tiered Systems Process Controllers Templating Process Data Service

  9. Process Process Client/Server Border Process Process Process Process Tracking Data Service ... Data Service ... BG Queue Process Controllers Templating Real Systems

  10. Process Process Client/Server Border Process Process Process Process Tracking Data Service ... Data Service ... BG Queue Real HTML5 Systems Browser / Mobile Client Controllers Templating

  11. Process Process Client/Server Border Process Process Process Process Browser / Mobile Client Tracking Data Service Data Service ... ... BG Queue Controllers Templating Real HTML5 with Node.JS Node.JS - Aggregation, Formatting

  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 doingserver development

  13. Nginx Nginx Node JS Server Node JS Server Mobile Server • Stateless • Platform Transport: JSON In / JSON Out • Nginx as Web Server • CDN for Static Content • Log / Track Everything Load Balancer MongoDB Logging Server Tracking Server LinkedIn Platform

  14. 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, }

  15. iOSJS/HTML + Native AndroidNative Mobile Web JS/HTML OtherWrap 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 (70% of App today) • Per screen choice for the stuff in the middle • Async JS/iOS Bridge

  17. iOSJS/HTML + Native AndroidNative Mobile Web JS/HTML OtherWrap 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 20% of screens • Moving towards more HTML5 • Contacts locally stored but rest only in memory cache

  19. iOSJS/HTML + Native AndroidNative Mobile Web JS/HTML OtherWrap JS/HTML Screen based REST API Mobile Server (node.js + MongoDB) Domain REST API LinkedIn Platform

  20. Mobile Web • Backbone for MVC • Underscore for utils • Zapto for DOM Manipulation • Modified iScroll for Scrolling • LocalStorage for personal Cache • SASS for CSS • Closure for compiling • Hash based Loader

  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 • 2 Week Team Demo

  23. Deploy

  24. Deploy / Monitor • Enterprise Build available to employees • Ship everything 2 times a week • Apps and Server Deploy independently • 2 Week Bake for Big Stuff • Keynote for Performance and Availability monitoring • DeviceAnywhere for compatibility testing • Internal monitoring for QPS, Uptime, etc • Client Crash Log Metrics tracked daily

  25. Thanks! & Questions?

  26. Appendix

  27. Product Design

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

  29. Search, Compose, Room Navigation Stream You Inbox Following Notifications Breadth < 4 Depth < 3

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

  31. Mobile WebEnter the house • SEO • Email • Organic

More Related