Building Complex, Beautiful and Performant Screens

Transcript

1. Building Complex, Beautiful and Performant Screens Jamie Adkins - Android Developer
2. Proud Digital Partner to some of the biggest names in Sport. Clubs Leagues & Events World & National Governing Bodies Building Complex, Beautiful and Performant Screens
3. What is a complex screen? Building Complex, Beautiful and Performant Screens Screens that show lots of different types of content. Lots of different view types in your RecyclerView. The Facebook news feed is a great example. Our app home screens are complex screens. We show news, video, live scores, social feeds.
4. ICC (2015) Six Nations (2017)
5. Building Complex, Beautiful and Performant Screens • Smooth scrolling perfomance • Easy to use for developers • Seamless and graceful loading for users Goals
6. Building Complex, Beautiful and Performant Screens Where were we before?
7. CoreWidget Building Complex, Beautiful and Performant Screens
8. CoreWidget Building Complex, Beautiful and Performant Screens
9. Building Complex, Beautiful and Performant Screens • Abstraction away from ViewHolder • Update widgets individually CoreWidget - Pros
10. Building Complex, Beautiful and Performant Screens Performance
11. Building Complex, Beautiful and Performant Screens Performance
12. Building Complex, Beautiful and Performant Screens Performance
13. Performance Building Complex, Beautiful and Performant Screens https://code.fb.com/android/fast-rendering-news-feed-on-android/
14. Building Complex, Beautiful and Performant Screens No Diffing
15. Building Complex, Beautiful and Performant Screens Loading UX
16. Building Complex, Beautiful and Performant Screens • Performance • No Diffing • Poor User Experience CoreWidget - Cons
17. • Huge widgets need to be split up, without sacrificing ease of use for developers • Introduce placeholder/skeleton views to improve the loading experience • Clever diffing Refined Goals Building Complex, Beautiful and Performant Screens
18. Where are we now? Building Complex, Beautiful and Performant Screens
19. Building Complex, Beautiful and Performant Screens Performance
20. Building Complex, Beautiful and Performant Screens Performance
21. Building Complex, Beautiful and Performant Screens User Experience
22. Building Complex, Beautiful and Performant Screens • Removed CoreWidget in favour of Groupie How did we get there?
23. Building Complex, Beautiful and Performant Screens • Library that makes building complex screens easier. • Divides everything into groups that can be individually updated. Groupie
24. Building Complex, Beautiful and Performant Screens • Each View in the RecyclerView is an ‘Item’ • Can group Items using ‘Sections’ • Sections can be updated independently, and the RecyclerView sees the individual items Groupie
25. Building Complex, Beautiful and Performant Screens Articles Section Developer’s POV
26. Building Complex, Beautiful and Performant Screens Articles Section Header Article Article Footer Developer’s POV RecyclerView’s POV
27. Groupie Items Building Complex, Beautiful and Performant Screens
28. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
29. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
30. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
31. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
32. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
33. Groupie Items Building Complex, Beautiful and Performant Screens data class ArticleItem(private val article: Article) : Item() { override fun getLayout(): Int { return R.layout.item_content } override fun bind(viewHolder: ViewHolder, position: Int) { val view = viewHolder.itemView view.contentTitle.text = article.title ... } }
34. Groupie Sections Building Complex, Beautiful and Performant Screens
35. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) } }
36. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) } }
37. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) } }
38. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) } }
39. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) } }
40. Groupie Sections Building Complex, Beautiful and Performant Screens class ArticlesSection(header: HeaderItem, placeholder: Section) : Section() { init { setHeader(header) setPlaceholder(placeholder) setFooter(footerSection) setHideWhenEmpty(true) } }
41. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
42. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
43. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
44. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
45. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
46. Groupie Adapters Building Complex, Beautiful and Performant Screens class HomeGroupAdapter( articlesSection: ArticlesSection, ladderSection: LadderSection, videosSection: VideosSection, aroundTheNetworkSection: AroundTheNetworkSection, homeFavouritesSection: HomeFavouritesSection ) : GroupAdapter<ViewHolder>() { init { spanCount = 2 add(articlesSection) add(ladderSection) add(videosSection) add(aroundTheNetworkSection) add(homeFavouritesSection) } }
47. Updating Sections Building Complex, Beautiful and Performant Screens override fun showArticles(articles: List<Article>) { val items = articles.map { article -> ArticleItem(article) } articlesSection.update(items) }
48. Updating Sections Building Complex, Beautiful and Performant Screens override fun showArticles(articles: List<Article>) { val items = articles.map { article -> ArticleItem(article) } articlesSection.update(items) }
49. Updating Sections Building Complex, Beautiful and Performant Screens override fun showArticles(articles: List<Article>) { val items = articles.map { article -> ArticleItem(article) } articlesSection.update(items) }
50. Updating Sections Building Complex, Beautiful and Performant Screens override fun showArticles(articles: List<Article>) { val items = articles.map { article -> ArticleItem(article) } articlesSection.update(items) }
51. Updating Sections Building Complex, Beautiful and Performant Screens override fun showArticles(articles: List<Article>) { val items = articles.map { article -> ArticleItem(article) } articlesSection.update(items) }
52. Groupie Building Complex, Beautiful and Performant Screens
53. Groupie Building Complex, Beautiful and Performant Screens
54. Problems we haven’t solved yet Building Complex, Beautiful and Performant Screens
55. Unguaranteed Content Building Complex, Beautiful and Performant Screens
56. Awkward Carousels Building Complex, Beautiful and Performant Screens
57. UI Designers Building Complex, Beautiful and Performant Screens
58. Without With Recycler View Decorations
59. Building Complex, Beautiful and Performant Screens • Split up your Views! • Think about loading states • Groupie isn’t the silver bullet Takeaways
60. Lisa Wray’s Groupie https://github.com/lisawray/groupie Airbnb’s Epoxy https://github.com/airbnb/epoxy Tumblr’s Graywater https://github.com/tumblr/Graywater Pulselive http://www.pulselive.com/ Links Building Complex, Beautiful and Performant Screens