The Magic of the Infinite Scroller

At Badoo we face many technical challenges on a daily basis. One of the challenges I'm going to talk about is our solution to how we showed a large number of users on a single page.

Currently there are a lot of solutions to this on the market but none of them suited our needs. We wanted a balance between maintainability and the-best-technical-idea-ever!

Our solution was our version of the infinite scroll – let the browser do all the magic, while we relax with a coffee.

During this talk I will be focusing on the idea, some of the technical details and the highlights of our implementation.

Transcript

1. The Magic of the Infinite Scroller Konstantin Dzuin 16th of August, 2016 London CSS Meetup
2. Hi, I am… Konstantin Dzuin Mobile Web developer (html/css)
 Badoo, London, UK html/css developer since 2002
 Badooer since 2013 Twitter: @kdzuin
3. 3 CSS developers 7 JS developers 5 QA engineers Mobile Web Team
4. People Nearby We have different ways in which we visualise users. People Nearby is a section in our application where we display users you have bumped into, or just people nearby according to your location.
5. The Contact List A list of all the connections made both existing and new chats, and matches.
6. Visitors, Favourites and more…
7. The Challenge Over 320 million users The great number of users that are affected by our solutions. 
 How to display all these users in a single long list? Smooth UX Supporting Android 2.3+, iPhone and Windows phone devices. Preserve the State Navigating through the application (page-page-back)
 Rotating the device
8. Solutions on the Market Currently there are a lot of solutions to this on the market but none of them suited our needs. We wanted a balance between maintainability and the- best-technical-idea-ever!
9. Google / iScroll Complexities of an infinite scroller demo iScroll, smooth scrolling for the web demo
10. • Re-use DOM elements • Layout is built by JavaScript • Scrolling is native / Scrolling is controlled by JavaScript The Technique
11. CSS: Google .element position: absolute;
 transform: translateY()
 transition: transform all the elements are reused and repositioned using translation .sentinel position: absolute;
 transform: translateY()
 transition: transform sentinel pixel is translated to the bottom + ‘page’ height to create new scrolling space for new elements .runway should be empty and all inner elements moved to GPU processing
12. CSS: iScroll .element position: absolute;
 transform: translateY()
 transition: transform all the elements are reused and repositioned using translation .canvas position: absolute;
 transform: translateY()
 transition: transform • the whole canvas is translated • smooth and configurable perception
13. All good but complicated + 60 fps, Really smooth UX + Configurable scrolling perception (iScroll) – Layout is built by JS, responsibility to maintain the relationships is on JS side – Difficult to scale and re-use
14. Nothing But the Browser
15. • No re-use of DOM elements • Layout is built by CSS • Scrolling is native The Technique
16. Simple but limited… + Layout is build by CSS – Low performance – Browser will eventually crash
17. Our Solution
18. The Technique • Do not re-use DOM elements • Hide elements outside the viewport • Do trust the browser with scroll and layout
19. So, how do we hide the elements?
20. display
 none visibility
 hidden
21. Options display: none two extra blocks with calculated heights before and after the content calculation of box models before hiding, excluding them from rendering visibility: hidden blocks are still in the flow and occupy their height calculation of box models,
 keeping them rendered without effects
22. Who wins? display: none two extra blocks with calculated heights before and after the content calculation of box models before hiding, excluding them from rendering visibility: hidden blocks are still in the flow and occupy their height calculation of box models,
 keeping them rendered without effects
23. Who wins? • No significant difference in performance • No need to create and calculate extra elements somewhere • Even works on slow devices display: none two extra blocks with calculated heights before and after the content calculation of box models before hiding, excluding them from rendering visibility: hidden blocks are still in the flow and occupy their height calculation of box models,
 keeping them rendered without effects
24. Let Us Compare
25. Video comparison Google iScroll Browser Badoo
26. Let’s change the design… People Nearby
27. The Web and Mobile Web are grown up We can trust the browser We need to help the browser a bit The less we reinvent under the browser’s hood – the easier the process of maintenance for the whole system Just imagine that…
28. Questions?
29. Thank you!
30. https://twitter.com/BadooTech https://github.com/badoo https://techblog.badoo.com/ https://twitter.com/kdzuin http://kdzuin.ru/demos/infinite-scroller/ demo videos