LinkedIn Mobile

LinkedIn MobileHow we do we do it?

BuildDesignCode

TestingDeploy

PlatformiOS

AndroidBrowserOther

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


Data Data ServiceService

TemplatingTemplatingControllersControllers

Tiered Systems

Process

Process


Real Systems


Process

Data Data ServiServi

cece

Process


cece

Process

TrackinTrackingg

Process

BG BG QueuQueu

ee

Process

......

Process

......

Process



Real HTML5 Systems

Browser / Mobile Client


cece

Process


cece

Process

TrackinTrackingg

Process

BG BG QueuQueu

ee

Process

......

Process

......

Process


Real HTML5 with Node.JS

TemplatinTemplatingg

ControllerControllerss

Browser / Mobile Client


cece

Process


cece

Process

TrackinTrackingg

Process

BG BG QueuQueu

ee

Process

......

Process

......

Process


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


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



Domain 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



Domain REST API



NativeNative



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



Domain REST API



NativeNative



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•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

LinkedIn Mobile

Documents

Transcript of LinkedIn Mobile