Android Unidirectional Data Flow with LiveData Improving Coinverse’s Performance and Structure (UDF) pattern has improved the usability and performance of since the first beta launched in February. Coinverse is the first app creating audiocasts covering technology and news in cryptocurrency. Upgrades using UDF include more efficient newsfeed creation, removal of adjacent native ads, and faster audiocast loading. The Unidirectional Data Flow Coinverse The UDF pattern organizes the app into three main areas, view , and ensuring the app is modularized and reliable. I learned of the UDF pattern from episode 148 of the , with at and . On first listen it was interesting, but a large overhaul. UDF became compelling as I worked on fixing bugs and realized how complex various flows had become. state, events effects Fragmented podcast Evolving Android architectures (Part 1) Kaushik Gopal Instacart Donn Felker The examples of UDF I’ve seen thus far have been with . Rx a powerful and customizable tool for creating streams of data that can be observed in real-time. However, provides the same benefit of observing state changes and on top of that is simple, directly integrates with Android’s , and handles Android’s lifecycle events by default. If unfamiliar, check out Google’s ’s . To try out UDF I refactored the newsfeed flows in Coinverse as we’ll walkthrough below. Rx LiveData architecture components Jose Alcérreca talk on LiveData <a href="https://medium.com/media/8b9dd6f492bd3f25f79f7bf5cbe0388e/href">https://medium.com/media/8b9dd6f492bd3f25f79f7bf5cbe0388e/href</a> UDF Background UDF pattern, a.k.a. or was originally popularized in web development with Facebook’s and state management, and UI libraries. Early Android can be found from and at in 2015. ’s talks on Rx educated developers on which are fundamental to UDF. Unidirectional Data State Flow React Readux Flux experimentation Brian Egan Guillaume Lung SoundCloud Jake Wharton reactive programming Growing Number of Android Apps Adopting To name a few… and @ Kaushik Gopal Laimonas Turauskas Instacart @ Robinhood Dan Hill @ / Lyft Donald Chen Instagram Engineering @ Microsoft Cesar Valiente App companies adopting UDF Model View View Model — MVVM Gem Lake, Yosemite Emigrant Wilderness Trail For the first iteration of Coinverse I used the (MVVM) approach. MVVM separates the UI from the business logic, improving readability and organization. However, as an app grows with MVVM it becomes a lake of data. Information flows in, out, and around at many points via and with , and . This adds complexity for keeping track of logic, debugging, and testing, which requires mocking many components. Model View View Model Activities Fragments Data Binding, ViewModels Repositories UDF Advantages pc — , Waterfall at Yosemite National Park Ned Scher UDF is a waterfall, information flows in one direction through a single source providing many benefits. One point of entry for streams — The UI and business logic interact through single points of entry. Control UI involving async events — Know exactly when and where things begin and finish Debug issues — Easy to follow sequence of events and identify errors Streamlined tests — The majority of logic is contained in the ViewModel requiring less mocking. LiveData LiveData provides a straightforward approach to implementing UDF. Lifecycle aware Can emit multiple or single events Concise code Quick to implement <a href="https://medium.com/media/aece5d95a459fab51fe4afcff559f91b/href">https://medium.com/media/aece5d95a459fab51fe4afcff559f91b/href</a> View State, Events, and Effects ViewState Coinverse’s main newsfeed View is responsible for holding the final view’s persisted data. This entails all of the content shown to a user on a screen, including information about the content such as enabled statuses. state Looking at Coinverse’s main newsfeed above, examples of view include the contents of the toolbar, what timeframe and the feedtype of feed to display, as well as the contentList to populate the feed with. state Events ContentSelected(…) View consist of both user interface and system initiated actions. UI actions include button presses and text input, whereas system actions might be Android lifecycle events and screen rotation. events In the case of content selected above a view is created, ContentSelected. The will share information with the business layer to initiate the retrieval of the audiocast selected. The Coinbase Blog’s event event Effects ContentSwiped(…) View are one time UI occurrences that don’t persist. include navigation, dialogs, and toasts. are created by the business layer to initiate changes in the UI. effects Effects Effects When the item above is swiped right, the business layer adds a label to the content. The business layer sends an , ContentSwiped**,** informing the UI of the change in the content’s label. The UI can then remove the content from the main newsfeed. CCN saved effect App Structure Let’s understand how the one-way flow of data is structured. The handles all UI and system level actions stored in a single stream. The stream is sent to the that receives the actions and handles them accordingly in the business logic. View ViewModel The is the source of truth for the view and creates any necessary . The also handles requests to the data layer, managing the results , success ( ), and states returned from the with an Lce object (more on Lce's below). ViewModel state effects ViewModel Repository loading content error Repository Both the and are observed by the updating any changes from the in real-time. state effects View, ViewModel Implementation mainfeed loading We’ll use Coinverse’s main newsfeed loading as our example for how to implement UDF. Step 1 of 6 — Define Models <a href="https://medium.com/media/e3e457ec723be5f770f4c050214571d0/href">https://medium.com/media/e3e457ec723be5f770f4c050214571d0/href</a> View Stored as a LiveData object in the storing the contentList of LiveData type state — ViewModel, View and — Use Kotlin’s to pass one time events event effect Sealed class The view uses LiveData because it’s important the data is immutable vs. MutableLiveData. Otherwise, the flow of data would not be unidirectional, and the state could be changed in many places. state View and are not persisted in the . A Sealed class, like an Enum, but on a class level, is used to pass information. Sealed classes define a parent and child class with or without data. TheScreenLoad is a data class with data about what the should load. Whereas the UpdateAds is a class without data telling the view to update the ads in the newsfeed. events effects ViewModel event ViewModel effect Step 2 of 6 — Pass events to ViewModel <a href="https://medium.com/media/21b7345af796983c640793c3fbfdf7ee/href">https://medium.com/media/21b7345af796983c640793c3fbfdf7ee/href</a> In this example, when the system action of onCreate occurs, a ScreenLoad event is added to the stream of view events and sent from the to the to start creating the main feed. Fragment ViewModel All of the events created in the / are added to a object _viewEvent, a MutableLiveData object which updates the immutable LiveData object. I’m using the pattern of passing all of the events in onResume based on ’s . View Fragment LiveData Kaushik sample The LiveData stores data wrapped in an Event. As explained by in his , events ensure a single unique object is added to a stream. This avoids the accidental creation of multiple objects for a single action. Jose LiveData post about events Step 3 of 6 — Process events mainfeed loaded <a href="https://medium.com/media/1e82719128462cbbc400fb2ceab73db4/href">https://medium.com/media/1e82719128462cbbc400fb2ceab73db4/href</a> The receives incoming events, handling each event in a when statement based on the type of ViewEvent class. For ScreenLoad, the entireViewState is updated with the required data. To populate the newsfeed a request to the with getMainFeed is made. ViewModel Sealed Repository Update State Value In cases where an attribute of the ViewState needs to be updated rather than the entire ViewState, Kotlin’s shallow function is useful. copy <a href="https://medium.com/media/ce1bf00297c228e57a7216047f915529/href">https://medium.com/media/ce1bf00297c228e57a7216047f915529/href</a> Step 4 of 6 — Manage Network Requests with LCE Pattern <a href="https://medium.com/media/abb3971ab92689aa13784def4501b3e3/href">https://medium.com/media/abb3971ab92689aa13784def4501b3e3/href</a> To manage network requests, introduces the Lce class object with three states, , , and . The state represents a successful request. Kaushik Sealed loading content error content <a href="https://medium.com/media/115cf44f615dca588145ff82c08df8f1/href">https://medium.com/media/115cf44f615dca588145ff82c08df8f1/href</a> A class is also useful for returning different types of results. Sealed <a href="https://medium.com/media/0282a893889f04b825cc9f73d6a231fb/href">https://medium.com/media/0282a893889f04b825cc9f73d6a231fb/href</a> getMainFeed’s network request shares send the Lce states to the via the LiveData stream. The PagedListResult class can be passed into the Lce for both the and states. The will then manage each state appropriately. ViewModel content error ViewModel Step 5 of 6 — Handle LCE States mainfeed error The gif shows something has gone awry. We’ll see how the error is handled in the . ViewModel <a href="https://medium.com/media/2e31d1bd3a6304c6a19b4728f9102597/href">https://medium.com/media/2e31d1bd3a6304c6a19b4728f9102597/href</a> UDF has streamlined both methods of requesting new content from the network and retrieving the updated content from the database. Prior to using UDF, Coinverse called two repository methods separately to populate the main newsfeed. Room When the feed is loading the existing Room database content is returned so that the user is not staring at an empty screen. For the successful Content case, the updated content from Room is returned. For errors requesting new content, the existing Room content is also displayed similar to theLoading case. In the error above, a SnackBar view is passed to the to display the error message. effect Fragment The observes each Lce state with a LiveData SwitchMap. The SwitchMap passes in one LiveData object and returns a new and different LiveData object that is saved to the view . ViewModel state Like all LiveData, a SwitchMap must be observed in the view in order for the value to be emitted within the map inside the . ViewModel Step 6 of 6 — Observe State Change! <a href="https://medium.com/media/503f19392a8e77dba776d7ab367549a1/href">https://medium.com/media/503f19392a8e77dba776d7ab367549a1/href</a> Now the view may be observed when an update occurs. The view are observed in the same way. state effects Bonus — Removing Adjacent Ads auto adjacent ads detection In addition to a streamlined newsfeed above, UDF has improved how Twitter’s native ads are shown in the newsfeed. MoPub’s MoPubRecyclerAdapter does not have a built-in approach to avoid adjacent ads from showing. Content can be swiped to be saved or dismissed, eventually causing two ads to appear next to each other. Prior to UDF, this was handled with a manual swipe-to-refresh by the user. MoPub With UDF there is a contentLabeled view . When the status of the view changes, meaning an item is labeled to be removed from the main feed, a check for adjacent ads is made. If removing the content creates adjacent ads, the ads are automatically refreshed. state state Trade-Offs Using LiveData for the Unidirectional Data Flow has been great, but it’s not perfect. LiveData is only applicable for logic impacting the UI. For non-UI logic LiveData will not be observed since it requires lifecycle to be passed in. For these instances, or Rx may be used. If no UI is involved then an even better solution might be to offload the logic completely to the backend with . Kotlin coroutines Firebase Cloud Functions There’s not as much customization with LiveData for things like threading. With this year’s latest Google I/O updates coroutines appear to easily integrate with LiveData offering more customization. Coinverse Next Steps Expanding to the rest of Coinverse’s app Unidirectional Data Flow — — Now that the majority of the newsfeed logic is modularized in the , JUnit testing will be easier with less mocking of components. JUnit testing ViewModel Exploring integration with LiveData Kotlin coroutines — Resources Slides — @ Unidirectional Data Flow por Adam Hurwitz Medellín Android MeetUp Notes — Unidirectional Data Flow guide I’d love your feedback on the beta! Coinverse to be updated on a Unidirectional Data Flow sample app and more. Follow me A to and of the for organizing the talk! If you are in Medellín I recommend stopping by their MeetUp. big thanks Cristián Gomez Carlos Daniel Medellín Android MeetUp Medellín Android talk — Unidirectional Data Flow por Adam Hurwitz

Flow

Coinbase

Facebook

Google

Instagram

Lyft

Microsoft

Robinhood

Twitter

YouTube

Sample App—Android Unidirectional Data Flow

Follow me

Read My Stories

Too Long; Didn't Read

Android Unidirectional Flow with LiveData

Android Unidirectional Flow with LiveData

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

1inch is ...Inflationary?

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

1inch is ...Inflationary?

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps