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