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%
Mobile Web
JS/HTML
Screen based REST API
Mobile Server (node.js + MongoDB)
Domain REST API
LinkedIn Platform
Other OS
Wrappers
100%
iOS Native
30%
Android
80%
Mobile Web
100%
Mobile Web
JS/HTML
Screen based REST API
Mobile Server (node.js + MongoDB)
Domain REST API
LinkedIn Platform
Other OS
Wrappers
100%
Typical Web Application
Client/Server Border
Controller
View
Model
Rails Systems
Client/Server Border
Process
Rails
Controllers
ActiveRecord
ERB
Tiered Systems
Client/Server Border
Process
Controllers
Templating
Process
Data Service
Real Systems
Client/Server Border
Process
Controllers
Process
Data
Servic
e
Process
Data
Servic
e
Process
...
Templating
Process
...
Process
Trackin
g
Process
BG
Queu
e
Real HTML5 Systems
Browser / Mobile Client
Controllers
Templating
Client/Server Border
Process
Data
Servic
e
Process
Data
Servic
e
Process
...
Process
...
Process
Trackin
g
Process
BG
Queu
e
Real HTML5 with Node.JS
Browser / Mobile
Client
Controllers
Templating
Client/Server Border
Node.JS - Aggregation, Formatting
Process
Data
Servic
e
Process
Data
Servic
e
Process
...
Process
...
Process
Trackin
g
Process
BG
Queu
e
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
Nginx
Node JS
Server
Node JS
Server
Trackin
Mongo Logging
g
DB
Server
Server
LinkedIn Platform
Screen Based JSON
•
•
•
Single Request
per screen
{
ttype: nut1,
time: 298349823,
header: “Wow, that is pretty cool”,
.......
......
footer: “shared by Kiran Prasad”,
id: 1298398127,
JSON is template
based
Updatable on
server
}
iOS
JS/HTML + Native
Android
Native
Mobile Web
JS/HTML
Screen based REST API
Mobile Server (node.js + MongoDB)
Domain REST API
LinkedIn Platform
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
iOS
JS/HTML + Native
Android
Native
Mobile Web
JS/HTML
Screen based REST API
Mobile Server (node.js + MongoDB)
Domain REST API
LinkedIn Platform
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
iOS
JS/HTML + Native
Android
Native
Mobile Web
JS/HTML
Screen based REST API
Mobile Server (node.js + MongoDB)
Domain REST API
LinkedIn Platform
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
• Automation:
Test
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
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
Stream
You
Inbox
Notifications
Breadth < 4
Depth < 3
Following
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
•