Yelp has open-sourced Bento, a framework to build modularized user interface on Android by combining different, reusable components into a single screen.
Modularity is the key goal of Bento, and along with it goes reusability of components, Yelp engineer Tyler Argo says.
The Bento framework makes it easy to break down complex interfaces into a set of easy to understand, modular, dynamic, and testable components.
According to Yelp, Bento is inspired by Epoxy, an open-source library developed at Airbnb to build complex UIs based on RecyclerView. Bento shall not be considered just a wrapper around RecyclerView, though, since it also supports ViewPager and ListView. Moreover, as Yelp engineer Diego Waxemberg writes, Bento can be easily extended to FrameLayout or LinearLayout.
Bento supports a method of building modular UIs common to many Android apps that group different views together. RecyclerView makes it easy to create such groups when all views are homogeneous, although it tends to require writing a lot of boilerplate code. This is where libraries like Epoxy step in by providing higher-level abstractions to create RecyclerView-based UIs more efficiently. For example, Epoxy uses annotations that are processed to create models for the views to display. Bento takes a significantly distinct approach where each of those views is packaged into a modular, reusable component that packages the data that should be expanded into a view (Component) along with the logic to expand it into a view and to handle interaction (ComponentViewHolder). Finally, a ComponentController is used to manage all of the various components that are brought together on a screen. Bento also provides helper classes so you only need to define your Component and part of the ComponentViewHolder and ignore the rest of the underlying machinery, at least in simpler cases. For example, Bento includes a ListComponent, a PaginatingListComponent, a CarouselComponent, and others.
As an example of reusability of components across views, Waxemberg mentions the case of the Business Passport in the Yelp app, which is reused in many screens like the business page, user profile, delivery screen, etc. Another interesting feature of Bento is it enables introducing component progressively into an existing application, so you do not have to rewrite its UI from scratch. In particular, Yelp has been leveraging this feature for almost a year to progressively port a number of their apps to Bento. Bento support for alternative views to RecyclerView is also an enabling factor for developers wanting to port their app to Bento, since they can do so without first needing to change their code to use RecyclerViews.
Other major differences between Bento and Epoxy, as outlined by Waxemberg, are the lack of an annotation processor in Bento, a more gradual learning curve by sticking to RecyclerView semantics, and the fact it does not have any external dependencies. Having no annotation processing support was a conscious design decision, explains Waxemberg, to avoid its huge cost in terms of compilation times. In particular, Yelp has been able to build over 1M lines of code with an average compilation time < 1 minute.
Bento is available on GitHub and can be installed using Gradle.