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 •