Mobile gotcha
-
Upload
phegaro -
Category
Technology
-
view
4.344 -
download
0
description
Transcript of Mobile gotcha
![Page 1: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/1.jpg)
LinkedIn Mobile
Lessons from Building
![Page 2: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/2.jpg)
Culture
Product & Design
Development Background
Our Choices
Server
Client
![Page 3: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/3.jpg)
Cult of Simple
• Fast– App Launch– Screen to Screen Switch
• Easy– Tap Count
• Reliable– Don’t Crash– Repeatable
![Page 4: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/4.jpg)
Product & Design
It impacts engineering
![Page 5: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/5.jpg)
Websites vs. Applications
Content Focus
Long Form Layout
Flow & Action Focus
Lists/Details
Responsive Design Good for websites; Not for applications
![Page 6: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/6.jpg)
Interaction vs. Visual
• Design a house floor plan
• Focus on Rooms and Hallways
• Stay away from Paint, Furniture Carpet
• Has & Does for each screen
• Black & White then Color
![Page 7: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/7.jpg)
![Page 8: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/8.jpg)
Adjust App Platforms
• On Screen vs. Hardware Back
• Up vs. Back / Stacks vs. Pages
• Pull to Refresh vs. Button Refresh
• Settings Room Location
• Visual Design
![Page 9: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/9.jpg)
![Page 10: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/10.jpg)
Development Background
Approach to Engineering
![Page 11: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/11.jpg)
HTML5 vs Native
• What is the skillset of the team?
• What is your front door?
• Which platforms are you targeting?
• Phone Gap vs Titanium vs XXX
![Page 12: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/12.jpg)
Libs vs. Frameworks
Frameworks call your app
(Few)
App call libraries(Lots)
![Page 13: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/13.jpg)
![Page 14: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/14.jpg)
![Page 15: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/15.jpg)
![Page 16: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/16.jpg)
![Page 17: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/17.jpg)
![Page 18: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/18.jpg)
![Page 19: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/19.jpg)
Process vs Evented Systems
![Page 20: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/20.jpg)
Process Systems
Single process/thread per request
Block while waiting for I/O to complete
Use Process/Thread Pools
![Page 21: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/21.jpg)
Evented Systems
Single Process for large number of requests
Non Blocking for I/O
Use 1 Process per Core on system for scale
![Page 22: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/22.jpg)
Evented For Mobile
Process Systems great for high compute
Evented Systems great for I/O bound
With mobile client rendering, evented systems best for front end
![Page 23: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/23.jpg)
Our Choices
![Page 24: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/24.jpg)
![Page 25: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/25.jpg)
Server
![Page 26: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/26.jpg)
![Page 27: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/27.jpg)
Mobile Server
• Scaling Node• Node Modules• Logging vs Tracking vs Metrics• File Structure / Code Size• Client / Server Line Format• Server / Server Line Format• Latency vs Bandwidth• Gotchas
![Page 28: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/28.jpg)
Scaling
• Load Balancer talking to each node instance running on separate cores
• In Node .8, finally have master/child file handle sharing based evented model
• 150 qps per core per instance• 60 MB of RAM for an instance
![Page 29: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/29.jpg)
Node Modules
• Step to Async• Express/Connect -- Framework• Vows to Mocha• Request• Underscore
![Page 30: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/30.jpg)
Logging/Monitoring/Tracking
• Logging used for sending lots of text information– useful for debugging
• Monitoring is for sending counters for realtime monitoring: Product and System– Typical: Query Rate, Response Code, Time for request, Page Views,
Actions– Cube from Square
• Tracking is for product metric queries– Get into a database for queries– Needed for doing Uniqing and Pathing queries
![Page 31: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/31.jpg)
File Structure / Code Size
• Follow simple Rails/Django dir
– Controllers, Helpers, Formatters, Templates
– No Views, No Models
• Code Size ~ 10K
![Page 32: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/32.jpg)
• Single Request per screen• JSON is template based• Updateable on Server• Don’t add:
– Links– Styles– Positioning
• Node is part of the client NOT the server
Client / Server Line Level
![Page 33: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/33.jpg)
Server / Server Line Level Format
• Stream Data– Metrics, Logging, Events, etc– Kafka, Thrift, Avro, Protocol Buffers etc.
• Request/Response Data– HTTP/JSON – REST Endpoints for actual data models– Not much faster for performance
![Page 34: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/34.jpg)
Latency vs. Bandwidth
• Latency is the issue with mobile not bandwidth
• Establish and keep the socket open for ping• Use a ping and pull model not a true push• Easier to scale ping/pull model
![Page 35: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/35.jpg)
Node Gotchas
• Exception Handling• Don’t listen on startup till you are connected
to down stream services• Okay to die and respawn• httpClient.agent = false• Turn on console in production• NO BLOCKING!
![Page 36: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/36.jpg)
Client
Native for Infinite Scroll
Native for Window Manger
HTML5 for everything else
![Page 37: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/37.jpg)
iOS / Android Native
![Page 38: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/38.jpg)
Native Gotchas
Web to Native Messaging
Cache/Image Management
Tools / Test
![Page 39: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/39.jpg)
Web to Native Messaging
• iFrame with URL for Ping
• Native Pulls from Queue
• Web-Sockets suck
• REST for Native Services
![Page 40: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/40.jpg)
Cache/Image Management
• Store all data in url/result hash
• Render data from Hash
• Render again from server response
• Image src should be set to small image when
off screen
![Page 41: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/41.jpg)
Tools/Test
• iWebInspector / Weinre• Charles Proxy for req debugging• Pain when OS upgrade• Selenium with Safari Simulator (Web Parts)• Instruments UIAutomation / Robotium (Native)• Layout Test: DumpRender + ImageDiff (5%)• Vcr.js – Fixture Creater• Android Emulator Super Slow to have to do on
build machine with catchup
![Page 42: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/42.jpg)
Mobile Web
![Page 43: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/43.jpg)
Screen vs Page
• App is multiple Screens in one page• Page is a browser Page and has an implication
of JS Load/Parse time• Screen to Screen move is div show/hide
![Page 44: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/44.jpg)
Backbone.js
• Controls Routing from Screen to Screen• Controls Screen lifecycle (load, show, hide)• Controls View Updating based on Model
Change• Has Model construct for Validation• BaseRouter to Backbone – Transitions, screen life cycle
• M V C links in Backbone lead to mem leaks
![Page 45: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/45.jpg)
Libraries
• Zepto – Manipulate the DOM• iScroll – Inertial Scrolling on iOS– Does not work on Android– Pull to Refresh
• Underscore – Collection helpers and binding constructs, templating
![Page 46: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/46.jpg)
Build / Packaging
• Closure– Minify, Comment Removal, Template Compilation
• SASS– Variables, Functions, Selector Inheritance
• Bundle (set of screens)– Local, Template, Controllers/Views
• Build independently and resuable
![Page 47: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/47.jpg)
Startup
• Initial– Index.html– List of bundle files– Store all in Local Storage– Backbone starts home bundle
• Upgrade– Index.html– MD5 has for each file– Compare/Download Diff– Store in Local Storage
![Page 48: Mobile gotcha](https://reader037.fdocuments.in/reader037/viewer/2022103116/558585c8d8b42aac148b4e32/html5/thumbnails/48.jpg)
Tools / Gotchas
• Chrome Memory Profiler– https://developers.google.com/chrome-developer
-tools/docs/heap-profiling
• Memory Leak Tracking– http://gent.ilcore.com/2011/08/finding-memory
-leaks.html• Hardware Acceleration for DIV render only on
screen DIV’s• Double Render from Cache