linkedin mobile how we do we do it?. build design code testing deploy platform ios android browser...
TRANSCRIPT
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