LinkedIn MobileHow we do we do it?
BuildDesignCode
TestingDeploy
PlatformiOS
AndroidBrowserOther
Code
Mobile Server (node.js + MongoDB)Mobile Server (node.js + MongoDB)
LinkedIn PlatformLinkedIn Platform
Domain REST API
Screen based REST API
iOS NativeiOS Native30%30%
AndroidAndroid80%80%
Mobile Mobile WebWeb100%100%
Other OS Other OS Wrappers Wrappers
100%100%
Mobile WebMobile WebJS/HTMLJS/HTML
Mobile Server (node.js + MongoDB)Mobile Server (node.js + MongoDB)
LinkedIn PlatformLinkedIn Platform
Domain REST API
Screen based REST API
iOS NativeiOS Native30%30%
AndroidAndroid80%80%
Mobile Mobile WebWeb100%100%
Other OS Other OS Wrappers Wrappers
100%100%
Mobile WebMobile WebJS/HTMLJS/HTML
ModelModel
ViewViewControllerController
Typical Web Application
Client/Server Border
ActiveRecorActiveRecordd
ERBERBRails Rails ControllersControllers
Rails Systems
Process
Client/Server Border
Data Data ServiceService
TemplatingTemplatingControllersControllers
Tiered Systems
Process
Process
Client/Server Border
Real Systems
TemplatingTemplatingControllersControllers
Process
Data Data ServiServi
cece
Process
Data Data ServiServi
cece
Process
TrackinTrackingg
Process
BG BG QueuQueu
ee
Process
......
Process
......
Process
Client/Server Border
TemplatingTemplatingControllersControllers
Real HTML5 Systems
Browser / Mobile Client
Data Data ServiServi
cece
Process
Data Data ServiServi
cece
Process
TrackinTrackingg
Process
BG BG QueuQueu
ee
Process
......
Process
......
Process
Client/Server Border
Real HTML5 with Node.JS
TemplatinTemplatingg
ControllerControllerss
Browser / Mobile Client
Data Data ServiServi
cece
Process
Data Data ServiServi
cece
Process
TrackinTrackingg
Process
BG BG QueuQueu
ee
Process
......
Process
......
Process
Client/Server Border
Node.JS - Aggregation, FormattingNode.JS - Aggregation, Formatting
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
Mobile Server
•Stateless
• Platform Transport: JSON In / JSON Out
•Nginx as Web Server
• CDN for Static Content
• Log / Track Everything
Load BalancerLoad Balancer
NginxNginx
Node JS Node JS ServerServer
MongMongoDB oDB
NginxNginx
Node JS Node JS ServerServer
LogginLogging g
ServerServer
TrackinTracking g
ServerServer
LinkedIn PlatformLinkedIn Platform
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,}
Mobile Server (node.js + MongoDB)Mobile Server (node.js + MongoDB)
LinkedIn PlatformLinkedIn Platform
Domain REST API
Screen based REST API
iOSiOSJS/HTML + JS/HTML +
NativeNative
AndroidAndroidNativeNative
Mobile Mobile WebWeb
JS/HTMLJS/HTML
OtherOtherWrap Wrap
JS/HTMLJS/HTML
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
Mobile Server (node.js + MongoDB)Mobile Server (node.js + MongoDB)
LinkedIn PlatformLinkedIn Platform
Domain REST API
Screen based REST API
iOSiOSJS/HTML + JS/HTML +
NativeNative
AndroidAndroidNativeNative
Mobile Mobile WebWeb
JS/HTMLJS/HTML
OtherOtherWrap Wrap
JS/HTMLJS/HTML
Android•Native for all the
screens
•WebView for 20% of screens
•Moving towards more HTML5
•Contacts locally stored but rest only in memory cache
Mobile Server (node.js + MongoDB)Mobile Server (node.js + MongoDB)
LinkedIn PlatformLinkedIn Platform
Domain REST API
Screen based REST API
iOSiOSJS/HTML + JS/HTML +
NativeNative
AndroidAndroidNativeNative
Mobile Mobile WebWeb
JS/HTMLJS/HTML
OtherOtherWrap Wrap
JS/HTMLJS/HTML
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
Test
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
Deploy
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
Thanks! & Questions?
Appendix
Product Design
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
Search, Compose, Room NavigationSearch, Compose, Room Navigation
NotificationsNotifications
StreamStream YouYou InboxInbox FollowingFollowing
Breadth < 4
Depth < 3
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
Mobile WebEnter the house
SEO
EmailOrganic