are doing - TMCNet on the web

gatecircleMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

62 views

LinkedIn Mobile

How we do we do it?

Build

Design

Code

Testing

Deploy

Platform

iOS

Android

Browser

Other

Code

Mobile Server (node.js + MongoDB)

LinkedIn Platform

Domain REST API

Screen based REST API

iOS Native

30%

Android

80%

Mobile Web

100%


Other OS
Wrappers

100%

Mobile Web

JS/HTML


Mobile Server (node.js + MongoDB)

LinkedIn Platform

Domain REST API

Screen based REST API

iOS Native

30%

Android

80%

Mobile Web

100%


Other OS
Wrappers

100%

Mobile Web

JS/HTML


Model

View

Controller

Typical Web Application

Client/Server Border

ActiveRecord

ERB

Rails
Controllers

Rails Systems

Process

Client/Server Border

Data Service

Templating

Controllers

Tiered Systems

Process

Process

Client/Server Border

Real Systems

Templating

Controllers

Process

Data
Servic
e

Process

Data
Servic
e

Process

Trackin
g

Process

BG
Queu
e

Process

...

Process

...

Process

Client/Server Border

Templating

Controllers

Real HTML5 Systems

Browser / Mobile Client

Data
Servic
e

Process

Data
Servic
e

Process

Trackin
g

Process

BG
Queu
e

Process

...

Process

...

Process

Client/Server Border

Real HTML5 with Node.JS

Templating

Controllers

Browser / Mobile
Client

Data
Servic
e

Process

Data
Servic
e

Process

Trackin
g

Process

BG
Queu
e

Process

...

Process

...

Process

Client/Server Border

Node.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 Balancer

Nginx

Node JS
Server

Mongo
DB

Nginx

Node JS
Server

Logging
Server

Trackin
g
Server

LinkedIn 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)

LinkedIn Platform

Domain REST API

Screen based REST API

iOS

JS/HTML + Native

Android

Native

Mobile Web

JS/HTML


Other

Wrap

JS/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)

LinkedIn Platform

Domain REST API

Screen based REST API

iOS

JS/HTML + Native

Android

Native

Mobile Web

JS/HTML


Other

Wrap

JS/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)

LinkedIn Platform

Domain REST API

Screen based REST API

iOS

JS/HTML + Native

Android

Native

Mobile Web

JS/HTML


Other

Wrap

JS/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 Navigation

Notifications

Stream

You

Inbox

Following

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 Web

Enter the house


SEO


Email


Organic