DroidCon Montreal 2015: Facebook for Android in Emerging Markets: an Overview of Recent Work and Open Source Projects

An overview for Facebook's recent work for emerging markets. It includes a discussion of our recently open-sourced projects: Device Year Class, Network Connection Class, Augmented Traffic Control and Fresco. This deck was presented at DroidCon Montreal 2015.

Transcript

1. Alex Sourov Engineering Manager, Android Emerging Markets Team, Facebook Alex Petrescu Software Engineering Lead, Android Newsfeed Team, Facebook Facebook for Android: Developing for Low-End Networks
3. Facebook for Android Works at Global Scale
4. 400M daily Facebook for Android users
5. Nearly 9 out of 10 Facebook for Android Users Are Outside the USA
6. • Deep dive on a couple of efforts: Device Class and Augmented Traffic Control • An Overview Of Our Recent “2G Field Trip” to India • Network Connection Class and Android Image Pipeline (Fresco) Overview
7. • Device Year Class: 
 https://github.com/facebook/device-year-class • Augmented Traffic Control: 
 https://github.com/facebook/augmented-traffic-control • Network Connection Class: 
 https://github.com/facebook/network-connection-class • Fresco (the New Image Pipeline): 
 https://github.com/facebook/fresco New Open Source Projects
8. Year Class
 Segmentation Breaking the Past Work Up Performance Improvement Data Use Optimizations ATC for 
 Network Modeling Smarter Prefetching
9. Device Year Class
10. 10,000+
11. Year Class Example Moto  E Released 2014 CPU  cores 2 Clock  speed 1.2  GHz RAM 1GB
12. Year Class Example Moto  E Galaxy  S2 Released 2014 2011 CPU  cores 2 2 Clock  speed 1.2  GHz 1.2  GHz RAM 1GB 1GB
13. Year Class Example Moto  E Galaxy  S2 Released 2014 2011 CPU  cores 2 2 Clock  speed 1.2  GHz 1.2  GHz RAM 1GB 1GB YC2011 YC2011
14. YC2010-­‐ YC2011 YC2012+
15. YC2010-­‐ YC2011 YC2012+ Typical  Android High  End
16. Relative Crashiness by Year Class %  weekly  users  who  experience  a  crash 2013 2012 2011 2010 2009 3.1x 2.2x 1.4x 1x 1x 1x 1x
17. 2010 2011 2013 2014 2008 2009 2012 Device Year Class
18. Now available on GitHub. https://github.com/facebook/device-year-class
19. How does Year Class work? CPU Cores 4 or more 2012 2 or 3 2011 1 2008 RAM > 2GB 2014 <= 2GB 2013 <= 1.5GB 2012 <= 1GB 2011 <= 512MB 2010 <= 290MB 2009 <= 192MB 2008 Maximum Clock Speed > 2GHz 2014 <= 2GHz 2013 <= 1.5GHz 2012 <= 1.2GHz 2011 <= 1GHz 2010 <= 600MHz 2009 <= 528MHz 2008
20. Year Class Averaging
21. Sample App for Year Class
22. Sample App for Year Class
23. Augmented Traffic Control
24. Augmented Traffic Control
25. Augmented Traffic Control
26. Now available on GitHub. • https://github.com/facebook/augmented-traffic-control
27. • atcd: the ATC daemon responsible for setting/ unsetting traffic shaping. • Django apps to provide an interface to atcd, simple Web UI to control atc from mobile and save shaping profile settings ATC Components
28. India 2G Field Trip: February 2015
29. Why Do We Send Engineers to the Field? Prototype & Validate Ground
 Truth Model
 Networks
31. Facebook Engineers and Student Ambassadors at the Mobile Market at Hyderabad
32. Goals of the Trip Understand the device landscape. Explore network connections in a major urban area in India. Prototype tools and potential improvements.
33. What We Did Set up mobile labs. Use apps in real network conditions. Do more field testing and experimentation. Collect and analyze network traces from our phones.
34. Example of Field Research
35. Our modeling tools need to improve to model this intermittency. What We’ve Learned 2G connectivity in major urban India is highly intermittent. Latencies 
 are very 
 high.
36. Making It Work: Network Connection Classes and the New Image Pipeline (Fresco)
37. Network Connection Class
38. What are the world’s networks really like?
39. Measurement GET facebook_news_feed HTTP/1.1 200 OK content-type: image/jpeg content-length: 46470 X-FB-Connection-Quality: rtt=470 Starting Transfer 10 kb received @ 321 kbps 10 kb received @ 353 kbps 10 kb received @ 293 kbps 5.3 kb received @ 312 kbps Transfer Complete
40. Bandwidth Averaging Bandwidth (kbps) 0 1000 2000 3000 4000 5000 Time Estimated Actual EXCELLENT GOOD MOD.
41. Technology Doesn’t Imply Speed 0 1500 3000 4500 6000 WiFi LTE HSPA EDGE USA Brazil India Japan Britain
42. 0 55 110 165 220 EDGE USA Brazil India Japan Britain 3.5X Technology Doesn’t Imply Speed
43. Covering the Spread 6,128 Singapore LTE 5,816 Taiwan LTE 5,793 Netherlands LTE 114 Pakistan EDGE 120 Bangladesh EDGE 132 Myanmar EDGE
44. Stories Read Per Minute 4 5 6 7 8 9 Bandwidth 25 350 900 1450 2000 2600 3700 4800 5900 7000 Network Connectivity Affects Consumption
45. Connection Class A real-time measure of how fast a network currently is, regardless of technology Poor <150kbps Moderate 150–550kbps Good 550–2000kbps Excellent >2000kbps
46. Every Country Is Different 0% 25% 50% 75% 100% India Mexico 2g 3g 4g Wi-Fi
47. 0% 25% 50% 75% 100% India Mexico Poor Moderate Good Excellent Connection Class in Action
48. 5% 10% 15% 20% 9/1/14 9/5/14 9/9/14 9/13/14 9/17/14 9/21/14 9/25/14 9/29/14 10/3/14 10/7/14 10/11/14 10/15/14 10/19/14 10/23/14 10/27/14 10/31/14 11/4/14 11/8/14 11/12/14 11/16/14 11/20/14 11/24/14 11/28/14 12/2/14 Poor Moderate Sept Oct Nov Speed Throttling in Japan
49. Challenge accepted.
50. Year Class and Connection Class But so does connection class! Year Class matters...
51. Connection Classes Help Us 
 Target Prefetching Poor Moderate Good Excellent Year Class 2010 2011 2012 2013 2014 Comments Prefetching Broken Out
52. Videos don’t play well on bad connections...
 so let’s not auto-play them. Connection Class and Video Auto-Play
53. Network Prioritization Benefits all connection classes except Excellent. Make sure that the most important operations go unthrottled. Idea: Throttle concurrent network requests 
 within the app when on poor connections. The right amount of throttling is also dependent on connection class!
54. Available on GitHub today. https://github.com/facebook/network-connection-class
55. Sample App for Connection Class
56. Create / Subscribe Custom Listener
57. Bandwidth Averaging Bandwidth (kbps) 0 1000 2000 3000 4000 5000 Time Estimated Actual EXCELLENT GOOD MOD.
58. • Uses /proc/net/xt_qtaguid/stats DeviceBandwidthSampler API
59. New Image Pipeline / Fresco
61. Flaky networks Disk & memory constraints Many formats Old OS versions Slow CPUs Image Loading on Android It’s not easy — especially in emerging markets WebP JPEG / PNG
62. Fetching 
 (Network / Local Files) Caching 
 (Disk & memory) Resizing & auto- rotating Decoding Transcoding WebP JPEG / PNG What It Does ImagePipeline
63. Animated GIFs & WebPs support Progressive 
 JPEGs support Custom instrumentation 
 support (via Listeners) Cancellation, prioritization, constraining Post-processing support Prefetching 
 (Disk & memory cache) Features ImagePipeline
64. Drawee Why we built it • To make integration of our image pipeline possible • To provide solution for commonly used functionality • To reduce the memory footprint of the view hierarchy
65. • Submits image requests • Releases resources • Tracks view’s visibility • Handles tap-to-retry • Displays the hierarchy Things It Does Drawee
66. Components Drawee Hierarchy View Controller events draw invalidate set, reset, ...
67. Hierarchy Drawee ScaleType 
 Drawable ScaleType 
 Drawable ScaleType 
 Drawable Placeholder Image Failure Image Settable Drawable Actual Image Fade Drawable
68. Rounded corners / circle Features Drawee Placeholder / Progress bar Backgrounds / Overlays Failure / Retry image Scale types (per image) Fading animation F C Holder with custom DH views Multi-uri
69. Rounded corners / circle Features Drawee Placeholder / Progress bar Backgrounds / Overlays Failure / Retry image Scale types (per image) F F C Holder with custom M
70. R Features Drawee Placeholder / Progress bar Backgrounds / Overlays Failure / Retry image Scale types (per image) F F C Holder with custom Multi-uri
71. R Features Drawee Placeholder / Progress bar Backgrounds / Overlays Failure / Retry image Scale types (per image) F F C Holder with custom M
72. Improvements over Existing Solutions Drawee Smart resource management Simple API Smaller memory footprint
73. [XML] <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/face_image" android:layout_width="@dimen/small_icon_width" android:layout_height="@dimen/small_icon_width" fb:placeholderImage="@drawable/small_face_silhouette" fb:roundAsCircle="true" /> [Java] mFaceDraweeView = (SimpleDraweeView) findViewById(R.id.face_image); mFaceDraweeView.setImageURI(uri);
74. [XML] <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/face_image" android:layout_width="@dimen/small_icon_width" android:layout_height="@dimen/small_icon_width" fb:placeholderImage="@drawable/small_face_silhouette" fb:roundAsCircle="true" /> [Java] mFaceDraweeView = (SimpleDraweeView) findViewById(R.id.face_image); mFaceDraweeView.setImageURI(uri);
75. Performance No duplicate 
 work Efficient memory management
76. Available on GitHub today. https://github.com/fresco
77. Questions?
78. Thank You https://www.facebook.com/Engineering