2019-07-23 - &droid - Postmates Android Tech Talks

Learn more about the exciting (and sometimes challenging) experiences of Postmates Software Engineers. Talks were presented by our three Android development teams.

- Building Better APIs with gRPC (Fleet - Veeren Mandalia and Parth Mehta)
- Open Source Demo: Center Slider View (Seller - James Lee)
- Elegant Android Development at Postmates (Buyer - Hai Le and Gaurav Murti)

Transcript

2. &droid 
 Postmates Android Tech Talk July 23, 2019
3. About Postmates Postmates is on a mission to help people unlock the best of their cities – and their lives – with an insanely reliable on-demand “anything” network.
4. By the Numbers 4 Major Offices (SFO - BNA - SEA - MEX) 1,300 Employees 3,500 Cities 500K Merchants 140K Couriers Per Week 6.5M Deliveries Per Month
5. Buyer Fleet Seller The Three Apps
6. Speakers James 
 Lee Android Engineering Lead Veeren Mandalia Android Engineering Lead Hai 
 Le Android Engineer Parth 
 Mehta Server Engineering Lead Gaurav 
 Murti Android Engineer Bianca Curutan Mobile Engineer MC
7. Fleet Building Better APIs 
 with gRPC Veeren Mandalia
 Parth Mehta
8. Problem • Improve platform responsiveness and reliability - e.g., Postmates only have a limited time when viewing a delivery offer, every second matters • Reduce engineering time - API definition & implementation
9. • Remote Procedure Call-based • High performance because of multiplexing and compression • Open source • Multiplatform
10. Shared API Definition • Service and models defined in proto definition files • Definition shared between server & Android/iOS clients • Serves as the single source of truth of API definition and documentation
11. Service Definition REST (Kotlin) @GET("v2/courier/events") fun getEvents(@Query("token") token: String, @Query("limit") limit: Int): Observable<EventsResponse>
12. Service Definition gRPC (proto definition file) service FleetService { rpc Events (EventsRequest) returns (stream EventsResponse) {} }
13. Model Definition message EventsResponse { string token = 1; repeated Event events = 2; } message EventsRequest { string token = 1; bool limit = 2; }
14. Tight API Contracts service FleetService { rpc Events (EventsRequest) returns (stream EventsResponse) {} }
15. Tight API Contracts message EventsResponse { string token = 1; repeated Event events = 2; } message EventsRequest { string token = 1; bool limit = 2; }
16. Tight API Contracts message EventsError { oneof error_oneof { InvalidToken invalid_token = 1; UnsupportedLimit unsupported_limit = 2; Error generic = 3; } }
17. gRPC is Multiplatform
18. Generated Code • The protobuf compiler (protoc) then generates language specific framework and application code • Output - Client: Java, Swift - Server: Go, Python
19. Generated Code Client Service Client Model
20. API Updates CI CI message EventsRequest { string token = 1; bool limit = 2; enum event_type = 3; }
21. Creating a Stub val target = "fleet.postmates.com:428" val channel: ManagedChannel = OkHttpChannelBuilder .forTarget(target) .keepAliveTime(15, SECONDS) .keepAliveTimeout(10, SECONDS) .userAgent(“Postmate Android User Agent”) .let { builder -> AndroidChannelBuilder.fromBuilder(builder) .context(context) } .build()
22. Creating a Stub val fleetServiceStub = FleetServiceGrpc.newStub(channel) val fleetServiceBlockingStub = FleetServiceGrpc.newBlockingStub(channel)
23. Make a Request val request = EventsRequest.newBuilder() .setLimit(20) .setToken("token") .build()
24. Make a Request util.getObservableFromRpc<EventsRequest, EventsResponse> { streamObserver -> fleetServiceStub.events(request, streamObserver) }.observeOn(ioScheduler) .subscribe({ eventsResponse -> // Process events, e.g. Show offer to Postmate }, { throwable -> // Handle error })
25. RxJava Utilities fun <Req, Resp> getObservableFromRpc(rpc: (StreamObserver<Resp>) -> Unit): Observable<Resp> { return Observable.fromEmitter({ emitter: Emitter<Resp> -> val responseObserver = object : CancellableStreamObserver<Req, Resp>() { override fun onError(t: Throwable) { super.onError(t) emitter.onError(t) } override fun onNext(value: Resp) = emitter.onNext(value) override fun onCompleted() = emitter.onCompleted() } emitter.setCancellation { responseObserver.cancel() } rpc(responseObserver) }, Emitter.BackpressureMode.LATEST) }
26. RxJava Utilities abstract class CancellableStreamObserver<Req, Resp> : ClientResponseObserver<Req, Resp> { var requestStream: ClientCallStreamObserver<Req>? = null override fun beforeStart(requestStream: ClientCallStreamObserver<Req>?) { this.requestStream = requestStream } @CallSuper override fun onError(t: Throwable) { // Handle error.. } fun cancel() { requestStream?.cancel("Forceful cancellation of stream", StatusException(Status.CANCELLED)) } }
27. Under the Hood Channel Server RPC MSG Server
28. Built on Top of HTTP2
29. Grpc / Http2 Channel Server RPC MSG Stream F F F Connection
30. Performance Multiplexing • Multiple ongoing RPCs over a single connection Compact over the wire • Protobuf over the wire • Compression
31. Bi-Directional Streaming • gRPC supports Bi-Directional streaming • Faster and more efficient data transfer over a persistent connection • Ideal for payloads like events
32. Push and Fetch Server Streaming Server FCM
33. Event Latency on REST vs gRPC 0% 15% 30% 45% 60% 10ms 50ms 100ms 250ms 500ms 750ms 1000ms 1500ms 2000ms SLOW gRPC REST
34. Seller Open Source Demo: 
 Center Sliding View James Lee
35. Problem "... a slider for choosing a value which shows 1 minute increments up to 5 minutes before and after the currently selected time. It should automatically re-center the dragger when the user chooses a new time, such that they could continue adjusting the time beyond the previously visible range." “Oh, and it should have animations.”
36. Options... Standard Android Widgets? Notable Missing Features: • No mechanism for re-centering animation (from extending 
 off-screen) • Cannot add text for each individual tick
37. Options... Open Source Libraries?
38. Options... Build It! https://developer.android.com/ guide/topics/ui/custom- components Easy Hard - Modify an existing view type - Compound component - Fully customized component
39. Getting Started with Custom Views • Extend a basic View • Initialize Graphics components (Paint, Rect, Drawable, Colors, etc.) • Determine size and layout in onMeasure(), onLayout(), and onSizeChanged() • Implement onDraw() • Handle user input in onTouchEvent()
40. public void onDraw(Canvas canvas) {
 // Draw baseline
 canvas.drawLine( /* baseline coordinates and color */ );
 
 // Draw each value as a tick and draw text under each tick
 for (Line tickLine : tickLines) {
 canvas.drawLine( /* tick coordinates and color */ );
 canvas.drawText( /* tick text, coordinates, and color */ );
 }
 
 // Draw the dragger draggerDrawable.setBounds(draggerBounds);
 draggerDrawable.draw(canvas);
 
 // Draw the indicator indicatorDrawable.setBounds(indicatorBounds);
 indicatorDrawable.draw(canvas); canvas.drawText(/* indicator text, coordinates, and color */);
 } Forming the Slider
41. public boolean onTouchEvent(MotionEvent event) {
 switch (event.getActionMasked()) {
 case MotionEvent.ACTION_DOWN:
 // handle down event invalidate(); break;
 case MotionEvent.ACTION_MOVE:
 // handle move event invalidate();
 break;
 case MotionEvent.ACTION_UP:
 // handle up event invalidate();
 break;
 } 
 return true;
 } Note: Touch Slop determines distance for user to be considered scrolling ViewConfiguration.get(ctx).getScaledTouchSlop(); Also, GestureDetector class simplifies logic by providing methods that respond when common gestures are detected Forming the Slider
42. https://shapeshifter.design/ SVG (Scalable Vector Graphics) ↳ Vector Drawables Animated Vector Drawable
 (API 21; Android 5.0)
 
 reset() added in API 23; Android 6.0 Making the Dragger
43. Handler handler = new Handler();
 Runnable animation = new Runnable() {
 @Override
 public void run() {
 if ( /* isRunning */ ) {
 invalidate();
 handler.postDelayed(this, 16);
 }
 }
 }; • Must draw every 16 ms to render “smoothly” at 60 fps (frames per second) • Achievable by posting a Runnable to a Handler and calling invalidate() to redraw the view every 16 ms Making the Dragger
44. Two animations happen when user lifts up finger: 1. Dragger contract animation starts 2. All movable components slide a distance inverse of the distance the user scrolled in the x-direction Animations
45. Two animations happen when user lifts up finger: 1. Dragger contract animation starts 2. All movable components slide a distance inverse of the distance the user scrolled in the x-direction Animations
46. Animations Two animations happen when user lifts up finger: 1. Dragger contract animation starts 2. All movable components slide a distance inverse of the distance the user scrolled in the x-direction
47. Two animations happen when user lifts up finger: 1. Dragger contract animation starts 2. All movable components slide a distance inverse of the distance the user scrolled in the x-direction Animations
48. Polish • Customizable and overridable properties • Gradients to fade at the edge of the view • Snapping the dragger and indicator to the nearest discrete tick • Interpolator (overshoot feels more real than linear)
49. Center Sliding View • https://blog.postmates.com/a-simple-centersliderview-for-android-4a45e2e9ba5e • https://github.com/postmates/centersliderview-android
50. Fully Customizable • https://blog.postmates.com/a-simple-centersliderview-for-android-4a45e2e9ba5e • https://github.com/postmates/centersliderview-android
51. Open
 Source https://postmates.io
52. Buyer Elegant Android Development at Postmates Hai Le
53. About Me A
54. "We who cut mere stones must always be envisioning cathedrals."
55. Not Afraid to Make Mistakes In 15 months: • Two app redesigns • Lots of new features • 0% → 75% Kotlin
56. A/B Test Everything • Make A/B testing a habit • A/B test everything • Your users are your best friends • Build something that users want
57. How We Build Things Repeat Build A/B Test
58. Buyer Elegant Android Development at Postmates Gaurav Murti
59. ❤ →
60. Velocity + Quality Happy Fabric: 99.9% Crash-free users Solution: Design system with reusable components
61. Design Components $TITLE_TEXT + $SUBTITLE_TEXT + $START_TEXT $TEXT $END_TEXT
62. Engineering • "It's all about the Base." • Writing good BaseActivity, BaseFragment, and BaseDialogSheetFragment logic abstract fun getTitle(): String abstract fun getSubtitle(): String
63. Engineering Custom Views open class RoundedButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, 
 defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) <com.postmates.android.customviews.RoundedButton android:id="@+id/button_rsvp" android:layout_width="match_parent" android:layout_height="wrap_content" app:centerText="@string/rsvp" app:buttonType="primary"/>
64. We're Hiring! 
 https://careers.postmates.com